Семантическая разметка: разрыв строки после ссылки

Я бы хотел:

  1. Показать серию ссылок, каждая на новой строке
  2. Поддерживать переменную ширину ссылок и возможность переноса текста
  3. Ограничить область наведения мыши каждой ссылки на ее фактическое содержание
  4. Держите ссылки внутри потока контента

Лучшее решение, которое я могу придумать,

<div>
    <a href="">Text</a>
</div>
<div>
    <a href="">Text</a>
</div>

, но я не люблю добавлять несемантические <div>, Я пытался с помощью a { float: left; clear: both }, но это убрало ссылки из потока контента. Насколько мне известно, я не могу использовать псевдо-селектор, такой как :outer-wrapper, Есть ли лучшее решение, или <div> обертки лучшее решение?

* Я думал об использовании <ul><li><a>, но у меня есть только одна или две ссылки на страницу, и это не кажется разумным, чтобы добавить <ul><li> на месте <div> просто чтобы избежать <div>

3 ответа

Решение

Это в значительной степени основанный на мнениях и философии вопрос, источник бесконечных и бесполезных дебатов по поводу "семантической разметки", которая сама является семантически неопределенным понятием. Но чтобы превратить вопрос в нечто более конструктивное, я хотел бы спросить, что на самом деле имеет значение, какую разметку вы используете. Что это означает при рендеринге без CSS или при использовании вспомогательного программного обеспечения?

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

Варианты могут быть:(обернуть их в их содержание)

  1. display:table, чтобы сложить их.
  2. display:inline-block или же,
  3. float:left иметь их на линии.

Для разметки вы можете обернуть <a> в <nav> тег. и добавьте роль атрибута, чтобы отличить его от главной навигации или для нее.
http://www.w3.org/TR/wai-aria/roles

Примечания: Если навигация не нужна, можно использовать любой другой тег, например нижний колонтитул или абзац. Подробнее здесь: http://www.w3.org/html/wg/drafts/html/master/sections.html

Спасибо всем

Кажется, что то, что вы хотите поместить на страницу, семантически, это список ссылок. Так что используйте только это.

ul > li > a { /*whatever you want*/ }

Вы можете обернуть список вnavили вы можете забыть ul в целом и просто

nav > a { display: block; }

Кроме того, не думаю, что все divss несемантичны. Да, они не имеют определенного значения, но спецификация говорит, что они представляют их содержание. Действительно большое использование для div будет для группировки элементов, которые имеют одинаковую тему или функцию. В твоем случае у меня не было бы div который содержит только один aпотому что ты был бы прав насчет div выступающий в качестве раздувания.

Другие вопросы по тегам