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

109

Хочу вить spanи aметки. Нужно ли мне

  1. Положить <span>внутрь<a>
  2. Положить <a>внутрь<span>
  3. Неважно?
html css semantic-markup Салман А
источник

Ответы:

110

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>
Джон Хэдли
источник
1
Недавно я столкнулся с проблемой пустого пространства с text-overflow: ellipsis и overflow: hidden, которую можно было решить, добавив элемент встроенного блока к моей кнопке навигации. В итоге я получил <a> <span> Text </span> </a>. Так что я думаю (или надеюсь;)) это нормально делать, когда вам действительно нужно.
CunningFatalist
Я выберу вариант 2, потому что это имеет значение. Якорь должен быть предназначен только для привязки, а не для содержания элементов (лучшая практика). Представьте себе ситуацию, когда вы создаете плитку, на которую можно нажимать, а привязка является родительским элементом компонента плитки, а внутри компонента находятся ссылки на изображения и другие изображения. Сканер Google сойдет с ума и, в конце концов, сойдет с ума, это нехорошо для вашего сайта.
Имам Букс,
33

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

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

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

<!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>

т.е.

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

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

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

CraigTP
источник
20

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

Greg
источник
Но <a> - это уровень блока, а <span> - элемент встроенного уровня, а элемент уровня блока не может находиться внутри встроенного элемента. Я думаю, это было на валидации w3c
Джитендра Вьяс
26
Нет, оба встроены
Грег
16

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

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

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

Салман А
источник
2

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

сикора
источник
Правильно, они оба являются встроенными элементами.
Крис
2

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

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

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

user1368737
источник
1

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

Xopa
источник
0

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

Старая школа
источник
0

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

Тоби
источник