Обтекание якорных элементов текстом

Question

Если элемент привязки имеет текст (и только текст), но не является частью большого блока текста, имеет ли значение (например, семантика, SEO, обслуживание), будет ли этот тег привязки обернут элементом абзаца?

<!-- Wrapped -->
<p><a href=''>Link Description</a></p>

<!-- Standard -->
<a href=''>Link Description</a>

Глядя на большие сайты, оба способа оказываются популярными. Но есть ли заметные различия?

Answer 1

(Обратите внимание, что p следует использовать только для абзацев. Если это не параграф, и вы хотите использовать такую ​​оболочку, используйте div вместо; если это абзац, p следует использовать в любом случае.)

Я могу вспомнить два случая, когда такая обертка имеет семантическое значение (см. Ниже). Еще одна веская причина для использования обертки, конечно, если существующий CSS/JS предлагает / требует этого (например, если автор CSS решил применить стиль div элементы и a без div обертка сломала бы макет).

Разрывы строк

Пользовательские агенты, которые не поддерживают предоставляемый автором CSS (например, текстовые браузеры, программы чтения каналов и т. Д.), Обычно начинают новую строку для таких элементов, как div, pи т. д. (т. е. "элементы уровня блока" в HTML 4), но не для таких элементов, как span, aи т. д. ("встроенные элементы").

Так что если у вас есть что-то вроде этого:

<p>Teaser with some text.</p>
<a href="link">Read more</a>
<cite>John Doe</cite>

такой пользовательский агент может отображать последние два элемента в одной строке:

Teaser with some text.

Read more John Doe

хотя может быть предпочтительнее иметь каждый на своей строке:

Teaser with some text.

Read more

John Doe

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

Если a является единственным элементом контента фразы (например, между двумя p элементы), то это не проблема, конечно.

незаконченный p

Если p элемент не имеет закрывающего тега (который действителен), следующий a станет частью p:

<p>some text

<a href="link">Read more</a>

Если закрывать p это не вариант, нужно было бы использовать обертку для a (тот, который не может быть ребенком pнапример, div).