HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

<h1>Scones:</h1>

<p>The most resplendent of snacks</p>

Семантика HTML5 на текстовом уровне

Кроме уже рассмотренных элементов, определяющих структуру и помогающих сгруппировать данные, в HTML5 предусматривается ряд тегов, которые ранее назывались линейными элементами. Теперь в спецификации HTML5 на эти элементы ссылаются как на элементы семантики на текстовом уровне (http://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics). Рассмотрим несколько примеров общего характера.

Элемент <b>

Исторически сложилось так, что элемент <b> означает «выделить жирным шрифтом» (http://www.w3.org/TR/html4/present/graphics.html#edef-B). Это было еще в те давние времена, когда частью разметки считался и выбор стиля. Но теперь официально этот элемент можно использовать только в качестве стилевой привязки в коде CSS, поскольку в текущей спецификации HTML5 об элементе <b> говорится следующее:

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

Хотя сейчас этому элементу не придается никакого конкретного смысла, поскольку он относится к текстовому уровню, он не предназначен для заключения в него большой группы элементов разметки, поскольку для этой цели следует применять div-элемент. Следует также иметь в виду, что поскольку он исторически использовался для выделения текста жирным шрифтом, то, если вам нужно, чтобы содержимое, помещенное внутрь тега <b>, не выводилось на экран жирным шрифтом, придется переключить свойство font-weight в CSS.

Элемент <em>

Каюсь, я часто пользовался элементом <em> в качестве средства стилевого оформления. Мне следует пересмотреть свои позиции, приняв во внимание определение из HTML5:

«Элемент <em> акцентирует внимание на своем содержимом».

Следовательно, пока вы не хотите акцентировать чье-либо внимание на заключаемом в элемент содержимом, пользуйтесь тегом <b> или там, где это уместно, тегом <i>.

Элемент <i>

В спецификации HTML5 про элемент <i> говорится следующее:

«...выделяемый или произносимый с другой интонацией отрывок текста или же выделенный качественно — как выпадающий из общего ряда повествования»

Достаточно сказать, что он не используется просто для выделения чего-либо курсивным шрифтом. Например, им можно воспользоваться для разметки в строке текста какого-либо странного названия:

<p>However, discussion on the hgroup element is now frustraneous as

it's now gone the way of the <i>Raphus cucullatus</i>.</p>

примечание

В HTML5 существует масса других семантических тегов текстового уровня. Чтобы просмотреть все эти теги, обратитесь к соответствующему разделу спецификации по адресу http://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics.

Устаревшие функции HTML

Кроме атрибутов языка в ссылках на сценарии, есть и другие части HTML, которыми вы, возможно, привыкли пользоваться и которые теперь в HTML5 считаются устаревшими. Важно понимать, что в HTML5 есть две разновидности устаре­вших функций: соответствующие и несоответствующие. Соответствующие функции сохраняют свою работоспособность, но в системах проверки в отношении их будут выдаваться предупреждения. На практике следует по возможности избегать их применения, но если все же они будут использоваться, от этого небеса не рухнут на землю. Несоответствующие функции могут по-прежнему влиять на отображение данных в конкретных браузерах, но если их использовать, то можно прослыть весьма рисковым человеком и лишиться выходных!

Перечень устаревших и несоответствующих функций весьма обширен. Признаться, многими из них я никогда не пользовался (а некоторые даже никогда не видел!). Возможно, у вас на них будет аналогичная реакция. Но если интересно, полный перечень устаревших и несоответствующих функций можно найти по адресу http://www.w3.org/TR/html5/obsolete.html. Из наиболее примечательных устаревших и несоответствующих функций можно назвать strike, center, font, acronym, frame и frameset.

Есть также функции, фигурировавшие в ранних предварительных версиях HTML5, которые теперь попали в число отвергнутых. В качестве примера можно привести hgroup. Изначально предполагалось использовать этот тег в качестве контейнера для групп заголовков, то есть h1 как основной заголовок и h2 как подзаголовок могли помещаться внутрь элемента hgroup. Но теперь дискутировать по поводу элемента hgroup совершенно бесполезно, поскольку он пошел по пути вымершего Raphus cucullatus (если хотите узнать, кто это, воспользуйтесь Google).

Практическое применение элементов HTML5

Настало время применить некоторые из только что рассмотренных элементов на практике. Вернемся к примеру из главы 1. Если сравнить разметку, показанную ниже, с исходной разметкой из первой главы (напоминаю, что все примеры можно загрузить с сайта http://rwd.education или из репозитория GitHub), то можно увидеть те места, где применены рассмотренные нами новые элементы:

<article>

    <header class="Header">

        <a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png"

            alt="Scone O'Clock logo" /></a>

        <h1 class="Strap">Scones: the most resplendent of snacks</h1>

    </header>

    <section class="IntroWrapper">

        <p class="IntroText">Occasionally maligned and misunderstood; the

            scone is a quintessentially British classic.</p>

        <figure class="MoneyShot">

            <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible

                scones" />

            <figcaption class="ImageCaption">Incredible scones, picture from

                Wikipedia</figcaption>

        </figure>

    </section>

    <p>Recipe and serving suggestions follow.</p>

    <section class="Ingredients">

        <h3 class="SubHeader">Ingredients</h3>

    </section>

    <section class="HowToMake">

        <h3 class="SubHeader">Method</h3>

    </section>

    <footer>

        Made for the book, <a href="http://rwd.education">'Resonsive

            web design with HTML5 and CSS3'</a> by <address><a href="http://

            benfrain">Ben Frain</a></address>

    </footer>

</article>

Осмысленный выбор элементов. Чтобы сконцентрироваться на структуре, я убрал существенный объем внутреннего содержимого. Надеюсь, вы согласитесь с тем, что отличить различные разделы разметки друг от друга весьма несложно. Но теперь мне хотелось бы дать один довольно прагматичный совет: мир не рухнет, если вы не станете всякий раз выбирать правильный элемент для каждой отдельно взятой ситуации. Например, какой бы из элементов в предыдущем примере я ни применил, <section> или <div>, это не выразилось бы в каких-то реальных последствиях. Если вместо предписанного к использованию элемента <i> используется <em>, я не считаю это преступлением против человечества и ребята из W3C не откроют на вас охоту и не станут вас очернять за неправильный выбор. Просто руководствуйтесь здравым смыслом. И тем не менее, если есть возможность смыслового использования таких элементов, как <header> и <footer>, их применение обеспечит большую доступность вашего кода для понимания.

Использование WCAG  и WAI-ARIA для повышения доступности веб-приложений

Со времени написания первого издания данной книги (2011 и 2012 годы) консорци­ум W3C добился многого в деле упрощения для разработчиков написания более доступных веб-страниц.

Руководство по обеспечению доступности  веб-контента (WCAG)

Руководство WCAG существует с целью предоставления «единого общего стандарта для доступности веб-контента, отвечающего на международной основе нуждам физических лиц, организаций и правительств».

Когда речь заходит о более простых веб-страницах (в противовес единой странице веб-приложений и им подобных средств), имеет смысл сконцентрироваться на руководстве WCAG. В нем предлагается целый ряд (в основном вполне разумных) рекомендаций по обеспечению доступности вашего веб-контента. Каждая рекомендация оценивается по уровням соответствия: A, AA или AAA. Дополнительные сведения об этих уровнях можно найти по адресу http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-levels-head.

Возможно, окажется, что вы уже придерживаетесь многих из рекомендаций, например, в плане предоставления альтернативного текста для изображений. Крат­кое изложение рекомендаций можно получить по адресу http://www.w3.org/WAI/WCAG20/glance/Overview.html, после чего создать свой собственный краткий контрольный лист-справочник по образцу, показанному на сайте http://www.w3.org/WAI/WCAG20/quickref/.

Я призываю всех потратить пару часов на изучение списка. Многие рекомендации совсем не трудно выполнить, предоставив тем самым реальные преимущества пользователям.

Стандарт предоставления возможности полноценного использования Интернета людьми с физическими ограничениями (WAI-ARIA)