HTML5 навигация, структура и семантика

Question

В последнее время я задавал много вопросов, но, надеюсь, это будет последнее время.

Я привел пример по адресу: http://myhideout.eu/menu/

В основном это все о меню для моего нового сайта, структурный дизайн которого немного отличается от того, что вы обычно видите, семантика и все такое

По сути, он состоит из нескольких вкладок, которые не являются реальными ссылками, хотя они могут быть. Ниже предопределенная область, которая будет служить одной из двух целей.

Предполагая, что использование не просматривает меню, область будет использоваться для чего-то, не связанного с навигацией. Например, отображение изображения баннера. Определен как основной контент. Когда меню используется, этот основной контент не будет отображаться. Вместо этого область будет использоваться для подменю.

Мне следует подумать, что это достаточно просто, и при условии, что нет серьезных проблем совместимости браузеров с более новыми браузерами, которые в настоящее время не включают ie8 и старше. Я могу предпочесть поддержку ie8, все вовремя, но на самом деле это будет больше о поддержке windows xp.

Теперь это все хорошо, и это работает, но есть некоторые вопросы, на которые я хотел бы ответить, и некоторые вопросы, которые мне хотелось бы решить.

Прежде всего, если бы я мог избежать использования div, я бы хотел. Если есть другой элемент, который больше подходит, пожалуйста, дайте мне знать.

Во-вторых, это быстро сбивает с толку все: hover и что нет. CSS как таковой - беспорядок, и все предложения будут приветствоваться.

В-третьих, в отношении определенной ширины элементов li, отображаемых как ячейки таблицы, я обнаружил, что они действуют довольно странно. Если я установлю ширину 100%, первая ячейка будет максимально широкой, при этом все равно будут отображаться остальные, но если я установлю слишком высокое значение абсолютного пикселя, все будет идеально выровнено. Я думаю, это довольно неплохо, поэтому ширина в настоящее время установлена ​​равной ширине области навигации, но является ли это хорошим подходом, и можно ли ожидать, что он будет работать в других браузерах, не использующих браузер, также в будущем? Или лучше просто рассчитать подходящую ширину?

Наконец, основной div, который отображается, когда навигация не используется, на самом деле не связан с навигацией, но я не понял, как это сделать, не помещая этот элемент в элемент. Комментарии по этому вопросу также будут оценены.

Вероятно, есть проблемы, которые я не заметил, или вопросы, которые я забыл задать, поэтому снова, любые комментарии очень приветствуются.

Я надеюсь получить здесь отзывы высокого качества, и я надеюсь, что получу;)

Так вот и все.

Заранее спасибо и наилучшими пожеланиями.

Edit: Принимая некоторые ваши советы и немного подумав, я немного изменил структуру: http://jsfiddle.net/hJuym/39/

Я еще не нашел лучшей альтернативы для отображения: table-cell Независимо от того, что я получаю в результате странных полей / отступов или неопрятных границ.

EDIT2: Сейчас я перепробовал все, что мог себе представить, но все еще не могу решить одну крошечную проблему.

Мне сказали, что атрибут table-cell не нужен. Хотя это все хорошо, на самом деле это работает ТОЧНО, как я хочу сейчас, используя атрибут отображения ячейки таблицы.

, так как table-cell плохой, по-видимому, я попытался заставить его работать с inline, что привело к нечетному верхнему отступу в 1.5px или полям, от которого я не могу избавиться, но что более важно, я ' m не может установить ширину элементов li. Кроме того, границы очень трудно контролировать, если вы хотите, чтобы они выглядели идеально. где как табличная ячейка, по-видимому, просто пересекают границу между двумя ячейками как одну.

Тогда, конечно, я попробовал inline-block, который имел наибольший успех, хотя я вынужден удалить определенные пробелы и разрывы строк в html, что раздражает, но все же я не могу установить фиксированная ширина, хотя, видимо, я должен быть в состоянии, и все же граница - беспорядок.

Конечно, я пытался возиться с поплавками, но это только вызывает у меня головную боль. Поэтому я хочу 10 вкладок. хорошо, просто взять общую ширину и разделить на 10. Да, это работает, если вы не можете установить ширину или использовать границы ... jabba jabba jabba nit pick.

Я не злой или что-то в этом роде, но я смущен, устал и сдаюсь.

Пожалуйста, скажите мне, почему я не могу просто использовать то, что на самом деле работает, в основном атрибут table-cell, и, предполагая, что есть веская причина, пожалуйста, объясните мне подробно, какова альтернатива, потому что я не не вижу. l

пример новейшего рабочего проекта в последнем редактировании.

С уважением.

Answer 1

1. Div, как уже упоминалось. означает «деление». Он идеально подходит для многих сценариев и не нуждается в замене, кроме случаев, упомянутых Колинроссом в его ответе. Если вам просто нужно сгруппировать некоторую разметку в удобном заполнителе, не бойтесь использовать div
2. Я пытался немного почистить твой код. Посмотрите это JSFiddle: http://jsfiddle.net/hJuym/35/. Очевидно, что есть некоторые произвольные измерения (такие как ширина, высота и различные смещения), но это не составит труда изменить.
3. Не используйте table-cell для отображения. Используйте block, inline или inline-block, как упоминалось в Colinross.
4. Как показано в моем jsfiddle выше (http://jsfiddle.net/hJuym/35/), вам не нужно. Оборачивайте все в заголовке, затем разбивайте заголовок на навигационный и обычный отображаемый контент. Код объясняет сам себя.

РЕДАКТИРОВАТЬ: я добавил некоторые пояснительные комментарии к скрипке выше. Прокомментированная версия: http://jsfiddle.net/hJuym/36/

Answer 2

В частности, спецификация html 5 определила несколько «выдающихся» новых элементов, на которые, я полагаю, вы ссылаетесь здесь.

<header> (и <footer>), <nav>, <article> и т. Д. - все это просто семантические контейнеры, если хотите. Некоторые, семантически, могут быть вложенными, например, элемент <nav> внутри <article> для навигации на уровне статьи (например, переход к сноске).

Следует помнить, что они по своей природе связаны со своими родительскими элементами, поэтому

<body>
<header>Hi there!</header>
<nav>This would be site-level navigation</nav>
<article>
<header>Welcome to *this page*</header>
<nav>This would be page-level navigation</nav>
<p> Here is the actual page content </p>
</article>

Вы можете представить этот код, семантически представляющий, что сайт говорит "Привет!", Где на странице написано "Добро пожаловать на эту страницу".

Пожалуйста, будьте более конкретны для лучшего примера / объяснения.

Быстрые примечания: не определяйте не-1018 * ячейки таблицы для отображения: ячейка таблицы, если только вы не хотите действительно странного поведения в браузерах. Придерживайтесь для отображения: {нет, блок, встроенный, встроенный блок}

Div обозначает * div * ision

Answer 3

В дополнение к моему предыдущему ответу, когда толчок наступает, новые введенные элементы, как правило, предназначены исключительно для семантики. W3C (Рабочая группа) определила, что подавляющее большинство веб-сайтов используют div для разделения своих верхних и нижних колонтитулов и блоков навигации. Они добавили элементы, чтобы придать веб-сайтам согласованность, чтобы браузеры и другие механизмы рендеринга, такие как ARIA-совместимые программы чтения с экрана и / или прагматически разработанные парсеры (например, веб-сканеры), могли определять семантическую природу элементов более последовательно (например, игнорирование элементов body header и body navigation и начало чтения страницы вслух пользователю при первом элементе <article>.

Надеюсь, что помогает