Одна из наиболее распространенных ошибок, которые люди допускают при использовании тегов, — это приравнивание HTML5 <section> к <div>, в частности, использование его непосредственно в качестве замены (в целях стилизации). В XHTML или HTML4 мы часто видим такой код:
<!-- HTML 4-стильный код --><div id=wrapper> <div id=header> <h1>Моя супер-пупер страница</h1> Содержимое заголовка </div> <div id=main> Содержимое страницы < /div> <div id=вторичный> Вторичный контент </div> <div id=footer> Содержимое нижнего колонтитула </div></div>
Теперь в HTML5 это будет выглядеть так:
Пожалуйста, не копируйте этот код! Это неправильно!
<section id=wrapper> <header> <h1>Моя супер-пупер страница</h1> <!-- Содержимое заголовка --> </header> <section id=main> <!-- Содержимое страницы --> </ раздел> <section id=вторичный> <!-- Вторичный контент --> </section> <footer> <!-- Содержимое нижнего колонтитула --> </footer></section>
Такое использование неверно:**
Это не контейнер стилей. Элемент **section представляет семантическую часть контента, используемую для составления сводки документа. Он должен содержать заголовок. Если вы ищете элемент, который действует как контейнер страницы (например, стиль HTML или XHTML), рассмотрите возможность написания стиля непосредственно в элементе body, как предлагает Крок Камен. Если вам все еще нужны дополнительные контейнеры стилей, придерживайтесь div.
Основываясь на вышеизложенных идеях, ниже приведены примеры правильного использования HTML5 и некоторых функций ролей ARIA (обратите внимание, что в зависимости от вашего собственного дизайна вам также может потребоваться добавить элементы div).
<body><header> <h1>Моя супер-пупер страница</h1> <!-- Содержимое заголовка --></header><div role=main> <!-- Содержимое страницы --></div>< в стороне role=complementary> <!-- Вторичное содержимое --></aside><footer> <!-- Содержимое нижнего колонтитула --></footer></body>2. Используйте заголовки и hgroups только при необходимости.
Конечно, нет смысла писать ярлыки, которые не нужно писать. К сожалению, я часто вижу, что заголовки и hgroups используются бесцельно. Вы можете прочитать две статьи об элементах header и hgroup для более детального понимания. Я кратко резюмирую их содержание следующим образом:
Поскольку заголовки могут использоваться в документе несколько раз, этот стиль кодирования может стать популярным:
Пожалуйста, не копируйте этот код! Заголовок здесь не нужен ->
<header> <h1>Моя лучшая запись в блоге</h1> </header> <!-- Содержание статьи --></article>
Если ваш элемент заголовка содержит только один элемент заголовка, отбросьте этот элемент заголовка. Поскольку элемент статьи уже гарантирует, что заголовок появится в сводке документа, а заголовок не может содержать несколько элементов (как определено выше), зачем писать дополнительный код. Просто напишите это так:
<article> <h1>Моя лучшая запись в блоге</h1> <!-- Содержание статьи --></article>
неправильное использование
Что касается заголовков, я также часто вижу неправильное использование hgroups. Иногда hgroup и заголовок не следует использовать вместе:
Первый вопрос обычно выглядит так:
Пожалуйста, не копируйте этот код! Здесь не требуется hgroup –> <hgroup> <h1>Моя лучшая запись в блоге</h1> </hgroup> <p>Рич Кларка</p></header>
В этом примере просто удалите hgroup и дайте заголовку идти своим чередом.
<header> <h1>Моя лучшая запись в блоге</h1> <p>Рич Кларк</p></header>
Второй вопрос — еще один ненужный пример:
Пожалуйста, не копируйте этот код! Здесь заголовок не требуется ->
<hgroup> <h1>Моя компания</h1> <h2>Основана в 1893 году</h2> </hgroup></header>
Если единственным подэлементом заголовка является hgroup, что еще делает заголовок? Если в заголовке нет других элементов (например, нескольких hgroups), просто удалите заголовок напрямую.
<hgroup> <h1>Моя компания</h1> <h2>Основана в 1893 году</h2></hgroup>3. Не помещайте все ссылки в виде списка в навигацию.
С появлением в HTML5 30 новых элементов (на момент первой публикации) наш выбор при создании семантических и структурированных тегов стал несколько небрежным. При этом не следует злоупотреблять гиперсемантическими элементами. К сожалению, nav является примером такого злоупотребления. Спецификация элемента nav описывается следующим образом:
Элемент nav представляет собой блок на странице, который ссылается на другие страницы или другие части этой страницы, блок, содержащий навигационные соединения.
Примечание. Не все ссылки на странице необходимо размещать в элементе nav — этот элемент предназначен для использования в качестве основного блока навигации. Конкретный пример: в нижнем колонтитуле часто бывает много ссылок, таких как условия обслуживания, домашняя страница, страница с заявлением об авторских правах и т. д. Самого элемента нижнего колонтитула достаточно для решения таких ситуаций. Хотя здесь также можно использовать элемент nav, мы обычно считаем его ненужным.
Ключевые слова являются основной навигацией. Конечно, мы можем целый день болтать друг с другом о том, что важно. Лично я это определяю так:
Чтобы облегчить доступ, добавите ли вы ссылку на этот навигационный тег в виде быстрого перехода?
Если ответ на эти вопросы отрицательный, просто поклонитесь и отправляйтесь в путь.
4. Распространенные ошибки в элементах рисунка.Правильное использование рисунков и figcaption действительно трудно освоить. Давайте посмотрим на некоторые распространенные ошибки,
Не все изображения являются цифрами
Выше я говорил вам не писать ненужный код. То же самое касается и этой ошибки. Я видел, как многие веб-сайты помечали все изображения цифрами. Ради картинки, пожалуйста, не добавляйте к ней лишние теги. Вы только вредите себе и не делаете свою страницу понятнее.
Рисунки описываются в спецификации как плавное содержимое, иногда с собственным описанием заголовка. Обычно они рассматриваются как независимые единицы документооборота. В этом и прелесть рисунка — его можно переместить с главной страницы контента на боковую панель, не влияя на поток документов.
Эти проблемы также рассматриваются в блок-схеме элементов HTML5, упомянутой ранее.
Если диаграмма предназначена исключительно для представления и не упоминается в других частях документа, то она определенно не
. Остальное зависит от ситуации, но начните с вопроса: должно ли это изображение соответствовать контексту? Если нет, то, вероятно, это тоже не так (возможно, так и есть). Идем дальше: Могу ли я переместить это в приложение? Если оба вопроса применимы, то, вероятно, так и есть.
Логотип — это не фигура
Кроме того, логотипы не относятся и к фигурам. Вот некоторые распространенные фрагменты кода, которые я использую:
<!-- Пожалуйста, не копируйте этот код! Это неправильно --><header> <h1> <figure>  </figure> Название моей компании </h1 > </header><!-- Пожалуйста, не копируйте этот код! Это тоже неправильно--><header> <figure>  </figure></header>
Больше нечего сказать. Это очень распространенная ошибка. Мы можем спорить друг с другом до тех пор, пока коровы не разойдутся по домам, о том, должен ли логотип быть тегом H1, но дело не в этом. Настоящая проблема — чрезмерное использование элемента «фигура». На рисунки следует ссылаться только внутри документа или в окружении элементов раздела. Я думаю, маловероятно, что ваш логотип будет упоминаться таким образом. Это просто, не используйте цифру. Вам просто нужно сделать это:
<header> <h1>Название моей компании</h1> <!-- Здесь больше информации --></header>
Фигура – это не просто картинка
Еще одно распространенное заблуждение относительно рисунка заключается в том, что оно используется только в картинках. Рисунок может представлять собой видео, аудио, диаграмму, цитату, таблицу, код, прозу или любую их комбинацию. Не ограничивайте цифры картинками. Задача веб-стандартов — точно описать контент с помощью тегов.
5. Не используйте ненужные атрибуты типа.Это распространенная проблема, но не ошибка, и я думаю, что нам следует избегать этого стиля с помощью лучших практик.
В HTML5 элементы сценария и стиля больше не требуют атрибута type. Однако они, скорее всего, будут автоматически добавлены вашей CMS, поэтому удалить их не так-то просто. Но если вы пишете код вручную или имеете полный контроль над своими шаблонами, на самом деле нет смысла включать атрибут type. Все браузеры думают, что скрипты — это JavaScript, а стили — это стили CSS, поэтому вам больше не нужно этого делать.
<!-- Пожалуйста, не копируйте этот код! Он слишком избыточен --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts /></скрипт>
На самом деле, все, что вам нужно сделать, это написать:
<link rel=stylesheet href=css/styles.css /><script src=js/scripts /></script>
Даже код, определяющий набор символов, можно опустить. Марк Пилигрим объясняет это в главе «Семантика» книги «Погружение в HTML5».
6. Неправильное использование атрибута формы.HTML5 вводит некоторые новые атрибуты формы. Вот несколько замечаний по использованию:
Логические свойства
Некоторые мультимедийные элементы и другие элементы также имеют логические свойства. Здесь действуют те же правила.
Некоторые из новых атрибутов формы являются логическими, что означает, что пока они появляются в метке, соответствующее поведение гарантированно установлено. Эти свойства включают в себя:
Честно говоря, я редко такое вижу. В качестве примера можно привести следующие общие из них:
<!-- Пожалуйста, не копируйте этот код! Это неправильно! --><input type=email name=email require=true /><!-- Еще один пример ошибки --><input type=email name = требуется адрес электронной почты=1 />
Строго говоря, в этом нет ничего страшного. Пока анализатор HTML браузера видит обязательный атрибут, появляющийся в теге, его функциональность будет применена. Но что, если вы напишете require=false наоборот?
<!-- Пожалуйста, не копируйте этот код! Это неправильно! --><input type=имя электронной почты=требуется адрес электронной почты=false />
Анализатор по-прежнему будет считать обязательный атрибут допустимым и выполнять соответствующее поведение, даже если вы попытаетесь приказать ему не выполнять его. Это явно не то, чего вы хотите.
Существует три допустимых способа использования логических свойств. (Последние два действительны только в xthml)
Правильный способ написания приведенного выше примера:
<тип ввода=имя электронной почты=требуется адрес электронной почты />Подвести итог
Вышеизложенное представляет вам редактор о том, как избежать 6 распространенных неправильных вариантов использования HTML5. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!