Пролет внутри анкера или анкер внутри пролета или не имеет значения?

Я хочу вложить теги span и a. Нужно ли мне

  1. Поместите <span> внутрь <a>
  2. Поместите <a> внутрь <span>
  3. Неважно?

html css semantic-markup
person Community    schedule 19.11.2009    source источник

Ответы (10)


arrow_upward
113
arrow_downward

3 - Неважно.

НО, я обычно использую <span> внутри <a>, только если он используется только для части содержимого тега, т.е.

<a href="#">some <span class="red">text</span></a>

Скорее, чем:

<a href="#"><span class="red">some text</span></a>

Что, очевидно, должно быть просто:

<a href="#" class="red">some text</a>
person Jon Hadley    schedule 19.11.2009
comment
Недавно я столкнулся с проблемой пустого пространства с text-overflow: ellipsis и overflow: hidden, которую можно было решить, добавив элемент inline-block к моей кнопке навигации. Я закончил с ‹a› ‹span› Text ‹/span› ‹/a›. Так что я думаю (или надеюсь;)) это нормально, когда вам действительно нужно. - person CunningFatalist; 12.09.2014
comment
Я выберу вариант 2, потому что это имеет значение. Якорь должен использоваться только для закрепления, а не для содержания элементов (передовая практика). Представьте себе ситуацию, когда вы создаете плитку, на которую можно нажимать, и привязка является родительским элементом компонента плитки, а внутри компонента находятся ссылки на изображения и другие изображения. Сканер Google сойдет с ума и, в конце концов, сойдет с ума, это нехорошо для вашего сайта. - person Imam Bux; 09.07.2020
comment
@ImamBux - я бы сделал наоборот, выбрал вариант 1, потому что якорь (как правило) не является частью того, что представляет собой диапазон, но представляемая вещь является частью якоря. Представьте себе адрес, связанный с картой; <address> является частью (или целиком) ссылки, но ссылка <a> не является частью адреса. В варианте 2 <a><img...></a> достаточно распространен, так что вы можете часто нарушать свое правило. - person Stephen P; 21.10.2020

arrow_upward
33
arrow_downward

Совершенно допустимо (по крайней мере, по стандартам HTML 4.01 и XHTML 1.0) вкладывать либо <span> внутри <a>, либо <a> внутри <span>.

Чтобы убедиться в этом сами, вы всегда можете проверить это в службе валидации разметки W3C

Я пробовал проверить:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

То же самое, что и выше, но с <a> внутри <span>

i.e.

<span><a href="http://www.google.com">Google</a></span>

с обоими типами документов HTML 4.01 и XHTML 1.0, и оба успешно прошли проверку!

Единственное, о чем нужно знать, - это убедиться, что вы закрываете теги в правильном порядке. Поэтому, если вы начинаете с <span>, а затем с <a>, убедитесь, что вы закрыли тег <a>, прежде чем закрывать <span>, и наоборот.

person CraigTP    schedule 19.11.2009

arrow_upward
20
arrow_downward

Это не имеет значения - им обоим разрешено находиться друг в друге.

person Greg    schedule 19.11.2009
comment
Но ‹a› является уровнем блока, а ‹span› - элементом встроенного уровня, а элемент уровня блока не может находиться внутри встроенного элемента. Я думаю, это было при проверке w3c - person Jitendra Vyas; 20.11.2009

arrow_upward
17
arrow_downward

это зависит от того, что вы хотите разметить.

  • если вам нужна ссылка внутри диапазона, поместите <a> внутри <span>.
  • если вы хотите что-то разметить в ссылке, поместите <span> в <a>
person knittl    schedule 19.11.2009

arrow_upward
16
arrow_downward

SPAN - это встроенный контейнер GENERIC. Не имеет значения, находится ли a внутри span или span внутри a, поскольку оба являются встроенными элементами. Не стесняйтесь делать то, что кажется вам логически правильным.

person Salman A    schedule 20.11.2009

arrow_upward
2
arrow_downward

Это зависит от того, для чего нужен пролет. Если это относится к тексту ссылки, а не к тому, что это ссылка, выберите №1. Если диапазон относится к ссылке в целом, выберите №2. Если вы не объясните, что представляет собой диапазон, ответа не будет больше. Они оба являются встроенными элементами и могут быть синтаксически вложены в любом порядке.

person sykora    schedule 19.11.2009
comment
Правильно, они оба являются встроенными элементами. - person Chris; 19.11.2009

arrow_upward
2
arrow_downward

Это может иметь значение, например, если вы используете какой-то шрифт значка сортировки. У меня это было только что с:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Обычно я помещал бы диапазон внутри буквы A, но стиль не вступал в силу, пока не поменял его местами.

person user1368737    schedule 23.01.2015

arrow_upward
1
arrow_downward

Лично я, как веб-разработчик, помещаю диапазон в тег привязки только в том случае, если я пытаюсь выделить часть текста ссылки, например, применяя фон к одному разделу.

person Xopa    schedule 14.07.2011

arrow_upward
0
arrow_downward

Это будет работать и в том, и в другом случае, но лично я бы предпочел вариант 2, чтобы диапазон был «вокруг» ссылки.

person Oldskool    schedule 19.11.2009

arrow_upward
0
arrow_downward

С семантической точки зрения, я думаю, имеет больше смысла, так как это контейнер для одного элемента, и если вам нужно вложить их, это предполагает, что больше, чем элемент будет внутри внешнего.

person Toby    schedule 19.11.2009