Семантическая разметка: разрыв строки после ссылки
Я бы хотел:
- Показать серию ссылок, каждая на новой строке
- Поддерживать переменную ширину ссылок и возможность переноса текста
- Ограничить область наведения мыши каждой ссылки на ее фактическое содержание
- Держите ссылки внутри потока контента
Лучшее решение, которое я могу придумать,
<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
со стилем, с тех пор ссылки будут по умолчанию работать вместе, отображаясь как встроенный текст без разделителя.
Варианты могут быть:(обернуть их в их содержание)
display:table
, чтобы сложить их.display:inline-block
или же,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; }
Кроме того, не думаю, что все divs
s несемантичны. Да, они не имеют определенного значения, но спецификация говорит, что они представляют их содержание. Действительно большое использование для div
будет для группировки элементов, которые имеют одинаковую тему или функцию. В твоем случае у меня не было бы div
который содержит только один a
потому что ты был бы прав насчет div
выступающий в качестве раздувания.