Избегаем популярных ошибок в HTML5. Частые ошибки в HTML5 разметке с точки зрения семантики

Ошибки и плохие практики HTML5 разметки, которые часто встречаются, и объяснение, как избежать подобных ошибок в разметке. Одна из самых распространённых ошибок - это произвольная замена элементов <div> структурными элементами из HTML5, на <sect

Избегаем популярных ошибок в HTML5

» » Сообщение:

Пошаговая схема выбора HTML5-элементов для разметки страницы

Разбирая сайты для Галереи HTML5 и отвечая на вопросы читателей на сайте Доктор HTML5, я вынужден просматривать целую кучу страниц на HTML5 и, конечно же, их исходный код. В этой статье я расскажу вам об ошибках и сомнительной разметке, которые мне частенько приходится видеть, и объясню, как их избежать.
~ Ричард Кларк

Не используйте <section> как обертку для оформления

Одна из самых распространенных проблем, которую я часто вижу в разметке сайтов - это произвольная замена элементов <div> структурными элементами из HTML5, особенно замена оформительской обертки на <section>.
В XHTML или HTML4 я бы увидел что-нибудь такое:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<div id="wrapper">
    <div id="header"> 
        <h1>Моя супер-пупер страница</h1>
        <!-- Содержимое шапки -->
    </div>
    <div id="main">
        <!-- Содержимое страницы -->
    </div>
    <div id="secondary">
        <!-- Вторичное содержимое -->
    </div>
    <div id="footer">
        <!-- Содержимое подвала -->
    </div>
</div>

Вместо этого я вижу следующее:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<section id="wrapper">
    <header> 
        <h1>Моя супер-пупер страница</h1>
        <!-- Содержимое шапки -->
    </header>
    <div id="main">
        <!-- Содержимое страницы -->
    </div>
    <section id="secondary">
        <!-- Вторичное содержимое -->
    </section>
    <footer>
        <!-- Содержимое подвала -->
    </footer>
</section>

Честно говоря, это неправильно: <section> - это не обертка. Элемент <section> определяет смысловую секцию содержимого для создания структуры документа. Он должен содержать заголовок.
Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу <body>, как описано у Крока Кеймена. Если же вам все еще нужна дополнительная обертка, используйте <div>.
Раз уж Доктор Майк объясняет, что <div> не мертв, а вам не удается найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обертки.

Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, все еще могут понадобится экстра-элементы <div>.

Код: Выделить всё Развернуть
<body>
    <header> 
        <h1>Моя супер-пупер страница</h1>
        <!-- Содержимое шапки -->
    </header>
    <div role="main">
        <!-- Содержимое страницы -->
    </div>
    <aside role="complementary">
        <!-- Вторичное содержимое -->
    </aside>
    <footer>
        <!-- Содержимое подвала -->
    </footer>
</body>

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

Используйте <header> и <hgroup> осознанно

Элемент <hgroup> удален из спецификации HTML5 и не рекомендован к использованию, прим. редактора.

Нет смысла писать разметку, если этого можно не делать, так ведь? К сожалению, я часто вижу элементы <header> и <hgroup> там, где они совсем не нужны. Вы можете узнать все подробности в наших статьях, посвященных элементу <header> и элементу <hgroup>, но я коротко резюмирую:

  • Элемент <header> представляет собой группу вводного содержимого или навигационных средств и обычно содержит структурный заголовок.
  • Элемент <hgroup> группирует набор элементов от <h1> до <h6>, представляя собой структурный заголовок в случае, когда заглавие имеет несколько уровней, вроде подзаголовков, альтернативных названий или слоганов.

Злоупотребление <header>

Думаю, что вы в курсе, что <header> можно использовать в документе несколько раз.
Но эта возможность привела к следующим ошибкам:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<article>
    <header> 
        <h1>Мой лучший пост</h1>
    </header>
    <!-- Содержимое записи -->
</article>

Если ваш <header> содержит единственный заголовок, избавьтесь от ненужного <header>.
Элемент <article> в любом случае гарантирует, что заголовок войдет в смысловую структуру документа. И поскольку <header> не содержит нескольких элементов, как указано в его описании, зачем вам код, который, в общем-то, не нужен?
Будьте проще:

Код: Выделить всё Развернуть
<article>
    <h1>Мой лучший пост</h1>
    <!-- Содержимое записи -->
</article>

Неправильное использование <hgroup>

Раз уж зашла речь о заголовках - я часто вижу неправильное использование <hgroup>. Не следует использовать <hgroup> в сочетании с <header> в случае, когда:

  • дочерний заголовок всего один или
  • элемента <hgroup> будет достаточно и без <header>.

Первая проблема выглядит так:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<header>
    <hgroup> 
        <h1>Мой лучший пост</h1>
    </hgroup>
    <p>Ричард Кларк</p>
</header>

В этом случае стоит избавиться от <hgroup> и оставить только заголовок:

Код: Выделить всё Развернуть
<header>
    <h1>Мой лучший пост</h1>
    <p>Ричард Кларк</p>
</header>

Следующая проблема состоит в очередном использовании элементов там, где они необязательны:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<header>
    <hgroup> 
        <h1>Моя компания</h1>
        <h2>Основана в 1893 году</h2>
    </hgroup>
</header>

Когда <hgroup> - это единственный дочерний элемент <header>, то какой смысл в этом <header>? Если в нем нет дополнительных элементов, соседствующих с <hgroup>, смело избавляйтесь от <header>.

Код: Выделить всё Развернуть
<hgroup> 
    <h1>Моя компания</h1>
    <h2>Основана в 1893 году</h2>
</hgroup>

Больше примеров использования <hgroup> вы можете найти в отдельной, более подробной статье.

Не оборачивайте все списки ссылок в <nav>

На момент написания статьи существует более 30-ти новых элементов и неудивительно, что у нас разбегаются глаза, когда дело доходит до создания осмысленной структурной разметки. Поэтому не стоит злоупотреблять всеми доступными сейчас суперсемантическими элементами. Что, к сожалению, часто происходит с элементом <nav>.
Спецификация определяет роль <nav> следующим образом:

Элемент <nav> представляет собой часть страницы, которая ссылается на другие страницы или части текущей, то есть раздел с навигационными ссылками.

Замечание: не все группы ссылок на странице должны быть обернуты в элемент <nav> - этот элемент, главным образом, предназначен для группировки главных навигационных блоков. В частности, в подвалах часто содержатся короткие списки ссылок на различные части сайта, вроде правил использования сервиса, домашней страницы и копирайтов. Элемента <footer> вполне достаточно для группировки такого рода ссылок; и несмотря на то, что элемент <nav> может быть использован в таких случаях, обычно в этом нет необходимости.
~Спецификация WHATWG HTML

Ключевая фраза - «главных навигационных блоков». Мы можем дискутировать весь день о значении слова «главный», но для меня это значит:

  • Самая главная навигация;
  • Поиск по сайту;
  • Вторичная навигация (что спорно);
  • Внутренняя навигация (по длинной статье, например).

И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что следующие случаи не подходят для использования <nav>:

  • Постраничная навигация;
  • Социальные ссылки, за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours;
  • Тэги к записи в блоге;
  • Категории записи;
  • Навигация третьего уровня;
  • Подвалы, набитые ссылками.

Если вы не уверены, стоит ли оборачивать список ссылок в <nav>, просто спросите у себя: «главная ли это навигация?»
Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:

  • «Не используйте <nav>, если кажется, что в этом случае может подойти и <section> с заголовком <hx>», - Ян Хиксон, IRC.
  • Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?

Если ответ на оба эти вопроса «нет», то, скорее всего, это не <nav>.

Общие ошибки с элементом <figure>

Ах, <figure>. Правильным использованием этого элемента вместе с подельником <figcaption> не так-то просто овладеть.
Рассмотрим некоторые общие проблемы, которые я вижу при использовании <figure>.

Не каждая картинка это <figure>

Ранее я советовал вам не писать лишний код там, где этого не требуется. Та же ошибка и здесь. Я видел сайты, где каждая картинка была обернута в <figure>. Нет никакой необходимости в добавлении экстра-разметки вокруг картинок только ради самого процесса. Вы просто делаете лишнюю работу и нисколько не улучшаете описание содержимого страницы.

Спецификация обозначает <figure> как «содержимое в потоке, с необязательным заглавием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте». Как раз в этом состоит вся красота элемента <figure>, который может быть перемещен из основного содержимого, скажем, в колонку, что никак не повлияет на основной поток документа.

Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не <figure>. Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не <figure>, а, возможно, <aside>. Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?»
Если ответ на оба вопроса «да», то это, вероятнее всего, <figure>.

Ваш логотип - это не <figure>

Плавно переходим к следующей проблеме, вышеупомянутые правила применимы и к ней.
Вот пара регулярно встречающихся примеров:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<header>
    <h1>
        <figure>
            <img src="logo.png" alt="Моя компания">
        </figure>
        Название компании
    </h1>
</header>
Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<header> 
    <figure>
        <img src="logo.png" alt="Моя компания">
    </figure>
</header>

Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчет того, должно ли лого находиться внутри <h1>, но мы здесь не за этим. Настоящая проблема - в неправильном употреблении <figure>. Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Все, что вам нужно, это:

Код: Выделить всё Развернуть
<header>
    <h1>Название компании</h1>
    <!-- и все остальное здесь -->
</header>

Элемент <figure> - это не только картинки

Другое распространенное заблуждение насчет <figure> - что он может быть использован только для картинок. Это не так. Элемент <figure> может быть видео, аудио, графиком (на SVG, к примеру), цитатой, таблицей, блоком кода, фрагментом текста или любой комбинацией этих и многих других элементов. Не ограничивайте использование <figure> только картинками. Наша работа, как энтузиастов от веб-стандартов, заключается в том, чтобы максимально точно описывать содержимое при помощи разметки.

Некоторое время назад я писал про <figure> детальнее. Рекомендую почитать, если вам интересно узнать подробности или просто освежить знания.

Не используйте ненужные атрибуты type

Эта проблема, пожалуй, является самой распространенной среди заявок в Галерею HTML5. И хотя это, по сути, не ошибка, мне кажется, что правильнее будет ее избегать.

Дело в том, что в HTML5 не нужно добавлять атрибут type для элементов <script> и <style>. Если эти элементы автоматически добавляются вашей CMS, то избавиться от них может быть непросто, но если вы пишете код руками или полностью контролируете шаблоны, то нет никакого смысла писать избыточные атрибуты. Поскольку все браузеры ожидают, что скриптами будет JavaScript, а стилями CSS, вам это совсем не нужно:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="scripts"></script>

Вместо этого просто напишите:

Код: Выделить всё Развернуть
<link rel="stylesheet" href="styles.css">
<script src="scripts"></script>

Кроме того, вы можете уменьшить объем кода, который пишете для задания кодировки документа и других вещей.
Глава про семантику в «Погружении в HTML5» Марка Пилгрима объясняет все.

Неправильное использование атрибутов форм

Вы, должно быть, знаете, что HTML5 предложил набор новых атрибутов для элементов форм. Мы расскажем о них подробнее в ближайшие месяцы, а пока я покажу вам некоторые вещи, которые делать не стоит.

Одиночные атрибуты

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

  • autofocus
  • autocomplete
  • required

Надо признаться, я нечасто встречал подобное, но если в качестве примера взять атрибут required, то попадалось следующее:

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<input type="email" name="email" required="true">
<!-- Еще один плохой пример -->
<input type="email" name="email" required="1">

В конечном счете это никому не вредит. HTML-парсер видит атрибут required в разметке, поэтому требуемая функциональность будет включена.
Но что, если поставить код вверх ногами и написать required="false"?

Код: Выделить всё Развернуть
<!-- Не копируйте этот код! Он неправильный! -->
<input type="email" name="email" required="false">

Парсер по-прежнему увидит атрибут required и применит поведение, несмотря на то, что вы пытались сказать ему не делать этого. Явно не то, что вам было нужно.

Существует три правильных способа задания одиночных атрибутов, второй и третий из которых нужны только если вы пишете XHTML:

  • required
  • required=""
  • required="required"

Если применить эту запись к нашему примеру (в HTML), получится следующее:

Код: Выделить всё Развернуть
<input type="email" name="email" required>

Резюме

Было бы просто невозможным перечислить здесь все странные приемы и образцы разметки, с которыми мне довелось столкнуться, но эти - одни из самых часто встречавшихся.
А какие еще ошибки разметки бросались вам в глаза? Расскажите в комментариях.


Быстро проверить корректность структуры документа поможет инструмент h5o

атрибуты, xhtml, html5, section, header, семантика, верстка, aria, cms, autofocus, autocomplete, required

Re: Избегаем популярных ошибок в HTML5

Admin » » Сообщение:

Владимир Кузнецов писал(а):Когда article, section, nav остается без заголовка (а это сразу выявляется в структуре), то нужно либо дать блоку осмысленный заголовок, либо заменить его на div. Памятуя об этом правиле, можно избежать неуместного использования новых тегов, мне кажется.




Похожие темыКомментарии ПросмотрыПоследнее сообщение
0594HTML5 Атрибуты. Новые и старые атри...
Сообщение от: Admin
01080Собственные страницы ошибок, свои с...
Сообщение от: Admin
02350Дженнифер Нидерст Роббинс. HTML5, C...
Сообщение от: Admin
0623Modernizr - бархатный путь в HTML5....
Сообщение от: Admin
02012К.Сухов. HTML5 - Путеводитель по те...
Сообщение от: Admin