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

109

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

Положить внутрь<a>
Положить <a>внутрь
Неважно?

html css semantic-markup

110

3 - Неважно.

НО, я обычно использую только внутри, <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> Text </a>. Так что я думаю (или надеюсь;)) это нормально делать, когда вам действительно нужно.

— CunningFatalist

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

— Имам Букс,

33

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

Чтобы доказать это самому себе, вы всегда можете проверить это в Службе валидации 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><a href="http://www.google.com">Google</a></span>

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

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

— CraigTP
источник

20

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

— Greg
источник

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

— Джитендра Вьяс

26

Нет, оба встроены

— Грег

16

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

если вам нужна ссылка внутри диапазона, поместите <a>внутрь .
если вы хотите что-то разметить в ссылке, поместите в<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

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

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