Разное

Семантика html5: Semantic elements in HTML5. Description and use

29.08.2023

Содержание

Как улучшить SEO с помощью семантики HTML5

0 ∞

В этом руководстве мы узнаем, что такое семантика HTML5 и как она помогает улучшить SEO сайта.

  • Что такое семантика HTML5?
  • Как улучшить SEO с помощью семантики?
  • Используйте лучшие семантические элементы
  • Как секционные элементы исключаются из структуры документа?
  • Используйте несемантические элементы с умом
  • Планируйте структуру HTML-документа
  • Сделайте текстовые блоки легко читаемыми
  • Заключение

Семантика была неотъемлемой частью HTML. Но ей стали уделять должное внимание только после появления HTML5.

Но все HTML-теги с определенным значением являются семантическими Например, заголовки (h2>, <h3>, <h4>, <h5>, <h5>, <h6>), упорядоченные и неупорядоченные списки (<ol>, <ul>, <li>), абзацы (<p>), изображения (<img>), таблицы (<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>), элементы формы (<form>, <fieldset>, <label>, <input>, <textarea>) и ссылки (<a>).

HTML5 добавил в язык несколько новых семантических тегов: <figure>, <header>, <footer> (блочные теги) и <strong>, <em>, <mark> (строчные теги). Но по-настоящему важным стало введение четырех секционных элементов: <article>, <aside>, <nav> и <section>. Они позволяют создать более детальную архитектуру каждой HTML-страницы.

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

  1. Используя семантику HTML
  2. С помощью расширенных сниппетов (структурированных данных).

Не все семантические теги HTML5 предназначены для одной и той же цели. Существует три их основных типа:

  • Блочные секционные элементы.
  • Блочные несекционные элементы.
  • Строчные элементы.

Блочные секционные элементы формируют структуру документа, которую могут понять поисковые роботы. К секционным HTML-тегам относятся:

  1. <article> — предназначен для разметки отдельных публикаций, таких как статьи или обзоры.
  2. <section> — используется для разметки блоков контента, которые логически связаны друг с другом. Например, контента с вкладками;
  3. <aside> — для структурирования сносок и меток.
  4. <nav> — для элементов навигации.

Тег <main> не является секционным элементом. Но это все равно семантический тег. Его можно использовать только один раз на каждой HTML- странице.

Секционные элементы создают разметку контента, которая находится вне структуры страницы. Поэтому для них можно задавать свои заголовки (<h2>, <h3>, <h4>, <h5>, <h5>, <h6>), шапки (<header>) и подвалы (<footer>). Эти теги относятся только к секционному элементу и не являются частью страницы. Вот пример правильной разметки на HTML5.

<html>
   <head>...</head>
   <body>
        <h2>Title of the Entire Page</h2>
        <h3>Subtitle of the Entire Page</h3>
        <article>
              <h2>Title of the Article Section</h2>
              <h3>Subtitle of the Article Section</h3>
        </article>
   </body>
</html>

В примере видно, что можно использовать отдельный тег <h2> для элемента <article>.

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

Также у тега <article> могут быть свои <header> и <footer>, которые не входят в DOM страницы.

<html>
   <head>...</head>
   <body>
        <header>Header of the Entire Page</header>
        <article>
              <header>Header of the Article Section</header>
              <p>...</p>
              <p>...</p>
              <footer>Footer of the Article Section</footer>
        </article>
        <footer>Footer of the Entire Page</footer>
   </body>
</html>

Благодаря этой особенности семантических тегов поисковые системы могут обрабатывать автономные блоки как отдельные объекты.

Несемантические теги стоит использовать только для стилизации веб-страницы. Например, чтобы добавить отступ к группе несвязанного между собой контента, нужно создать класс HTML и стилизовать его с помощью CSS. В этой ситуации лучше применить тег <div>, поскольку он не структурирует содержимое. Блочный тег <div> имеет строчный эквивалент. Это <span> , который можно использовать для стилизации строчного контента.

Существуют инструменты, которые помогают создать логическую структуру веб-страницы. HTML Outliner – это инструменты, которые анализируют структуру веб-страницы.

Они реализованы в виде онлайн-сервисов, которые помогают определить потенциальные проблемы в структуре HTML-документа. Например, отсутствующие заголовки.

Также доступны специальные расширения для браузера. Например, HeadingsMaps для Firefox или HTML5 Outliner для Chrome. Они позволяют анализировать структуру HTML-документа с любого URL-адреса. Таким образом, можно быстро проверить, какую семантику HTML5 используют ваши конкуренты.

Для проверки структуры HTML-документа и некоторые разработчики используют текстовые браузеры. Например, браузер Lynx. Первоначально они были созданы для слабовидящих пользователей, которые просматривают веб-страницы с помощью программ чтения с экрана.

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

Текстовые блоки веб-страницы должны быть легко читаемыми. Это помогает поисковым системам лучше понимать контент. Теги, используемые для «разбиения» контента, являются семантическими. К ним относятся: <img>, <figure>, <video>, <audio>, <ul>, <ol> и другие.

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

Ангелина Писанюкавтор-переводчик статьи «A Guide to HTML5 Semantics for Better SEO»

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, отклики, подписки!

Семантика в HTML 5 / Хабр

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

Остановимся, что бы рассмотреть нашу ответственность. К несчастью, в истории мы связаны с разработкой важного инструмента нашей цивилизации, который будет использоваться для общения в течении десятилетий. И так когда мы направляем свои умы, праздно или всерьез, на улучшение HTML мы должны понимать на сколько далеко идущими могут быть последствия наших решений.

HTML 5, W3C недавно удвоило усилия по формированию нового поколения HTML, за прошедший год или около того набрал значительные темпы. Это огромны проект, который охватывает не только структуру HTML, но и разбор моделей, модели обработки ошибок, DOM, алгоритмы для извлечения ресурсов, медиа-котента, 2D графики, шаблоны данных, модели безопасности, модели загрузки страницы, хранение данных на стороне клиента и многое другое.

Так же существуют изменения в структуре, синтаксисе и семантике HTML, некоторые из них описал Lachlan Hunt в статье «Обзор HTML 5» (перевод на хабре).

Но в этой статье давайте рассмотрим исключительно семантику HTML. Это то, чем я был заинтересован в течении многих лет и я считаю, что это очень важно для будущего HTML.

BBC недавно объявила о том, что они будут снижать долю микроформата hCalendar в своей программе телепередач, в пользу доступности и удобства abbr design pattern. Это свидетельствует о том, что мы, вне всяких сомнений, вытолкнули семантические возможности HTML далеко за те пределы, которые когда-либо предназначались, и действительно это возможно для языка. Мы просто исчерпали элементы и атрибуты HTML, которые способны повысить семантику документа. Если мы будем и далее хитрить с существующими конструкциями HTML, то будет возникать все больше таких проблем. Потому что HTML страдает от фундаментального деффекта, как семантический язык разметки — его семантика фиксирована и не расширяема.

Это не просто теоретическая проблема. Сотни тысяч разработчиков используют class и id для создания более семантической разметки (они так же используют их в качестве «крючков» для CSS стилей, но это другой вопрос). Почти всегда эти разработчики используют специальные словари, значения которых они сами составляют, а не значения существующих схем. Это псевдосемантическая разметка — в лучшем случае.

Многие страницы по всему интернету используют микроформаты, что бы добавить более структурированной семантики, чем при помощи обнищавшего набора элементов и атрибутов HTML. В этом случае значения использованные для атрибута class согласованы со словарями, иногда взяты из других стандартов, такие как vCard, иногда из недавно созданных словарей, где нет жесткого существующего стандарта (как в случае с hReview).

Расширяемая семантика

Существует очень серьезная проблема, которую необходимо решить здесь. Нам нужны механизмы в HTML, которые четко и однозначно позволят разработчикам добавлять более выразительной семантики, а не псевдосемантики в их разметку. Это, пожалуй, является самой насущной задачей для HTML 5 проектов.

Но это не так просто, придумать механизм для создания большей семантики в HTML контенте: Существуют значительные ограничения, на любое решение. Возможно, самое большое из них — обратная совместимость. Решение, не может нарушить сотни миллионов устройств для просмотра использующихся сегодня, которые будут использоваться в ближайшие годы. Любое решение, которое не совместимо, не будет широко принято разработчиками, опасаясь потери читателей. Оно будет быстро засыхать на корню.

Решение должно быть так же вперед-совместимым. Не в том смысле, что оно должно работать в будущих броузерах — это задача разработчиков броузеров, но оно должно быть расширяемым. Мы не можем ожидать какого-либо единого решения, которое мы сейчас разработаем, что бы решить все вообразимые и невообразимые потребности семантики в будущем. Мы можем разработать решения, которые могут быть расширены для удовлетворения будущих потребностей, по мере их возникновения.

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

Итак, как HTML 5 решит этот вопрос? HTML 5 вводит ряд новых элементов. Некоторые я назвал «структурные» — section, nav, aside, header и footer. Элемент dialog который по типу и содержанию схож с blockquote. Есть так же целый ряд элементов данных, как например meter, который представляет собой «скалярное измерение в пределах известного диапазона или дробное значение, например использование диска»; и элемент time{http://www.w3.org/html/wg/html5/#the-time}, который представляет собой дату и/или время.

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

Рассмотрим каждое препятствие

Обратная совместимость

Как современные броузеры обрабатывают эти новые элементы, такие как section? Хорошо, последние версии Safari, Opera, Mozilla и даже IE7 все делают на странице следующим образом.

<h2>Top Level Heading</h2>
<section>
  <h2>Second Level Heading</h2>
  <p>this is text in a section element</p>
  <section>
  <h2>Third Level Heading</h2>
  </section>
</section>

* This source code was highlighted with Source Code Highlighter.

В начале это выглядит прекрасно. Но когда мы пытаемся задать стили CSS, например, для элемента section, который выглядит следующим образом:

section {color: red}
… Большинству из упомянутых броузеров это удается, но IE7 (и тем более 6) нет.

Поэтому у нас есть проблема обратной совместимости с 75% броузеров, использующихся в настоящее время. Учитывая, период полураспад Internet Explorer, мы можем прогнозировать, что большинство пользователей будут использовать IE6 и IE7, даже через несколько лет.

Если HTML 5 вводит новые элементы, какова вероятность, что они будут использоваться подавляющим большинством разработчиков — учитывая то, что они не совместимы с большинством используемых броузеров?

Давайте обратимся к совместимости снизу вверх, это следующая проблема.

Совместимость снизу вверх

Сначала мы поставим вопрос: «Зачем мы изобретать эти новые элементы?». Разумным ответом будет: «Потому что не хватает семантики в HTML, а добавление этих элементов мы увеличим семантику HTML, что не может быть плохим, или может?».

Добавляя эти элементы, мы рассматриваем необходимость повышения потенциала семантики HTML, но только в рамках узкой сферы. Независимо от того сколько элементов введем, мы всегда будем думать о добавлении большей семантике HTML. И добавив столько элементов, сколько нам хочется, мы не решим проблему. Нам не нужно добавлять определенные термины в словарь HTML, мы должны добавить механизм, позволяющий расширять семантику документа по мере необходимости. В технических терминах, мы должны сделать HTML расширяемым. HTML 5 не предлагает механизма расширяемости.

Таким образом HTML 5 выполняет функцию, которая убьет значительный процент современных броузеров и не позволяет добавить семантики языка вообще.

Остаюнся несколько вопросов о новых элементах. Откуда взяты названия новых элементов? Как было решено, что элемент навигации нужно называть «nav»? Зачем в навигации применяются термины page-level, site-level и meta-site-level?

Почему бы не принять существующий словарь, такой как DocBook? Его словарь структуры документа более богат, он был разработан путем публикаций экспертов, на протяжении многих лет. Это не является аргументом в пользу DocBook, а дело в том, что чрезвычайно важная задача подготовки механизма обеспечения семантикой HTML проходит путь, уделяя малое внимание практике в работе которая началась более 30 лет назад. (Оригинал работы по GML начался в начале 1970-х годов)

Некоторые идеи решения

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

Если добавление новых элементов не обсуждается, по крайней мере в этой дискуссии, атрибуты — другая логическая область HTML, сконцентрируемся на ней. В конце концов, мы на протяжении, почти, десяти лет использовали атрибуты class и id, как механизмы расширения семантики HTML. Многие разработчики уже знакомы с этим и чувствуют себя комфортно. Проект microformats показал, что существующих атрибутов не достаточно, для использования их как механизм расширения семантики HTML. Так что, если мы хотим использовать атрибуты для решения проблемы, мы должны ввести один или более новых атрибутов. Пред тем, как перейти к механики, того как это может работать, справедливо подвергнуть это предложение тем же требованиям, как и новые элементы в HTML 5. Самое главное во внедрении новых атрибутов — это будет ли обратная совместимость HTML. Если да, то обеспечивает ли это работоспособный механизм расширения семантики в HTML?

Давайте изобретем новый атрибут. Назовем его «structure», но название не важно. Мы можем использовать его так:

<div structure="header">
Давайте посмотрим, как наши броузеры это оценят.

Конечно, все наши броузеры обработают следующий элемент CSS.

div {color: red}
А как насчет этого:

div[structure] {font-weight: bold}
На самом деле, почти все броузеры, включая IE7, обработают стиль div с атрибутом structure, даже если нет такого атрибута. К сожалению, наше счастье изчезает, потому что IE6 нет. Но мы можем использовать этот атрибут в HTML и все существующие броузеры распознают его. Мы даже можем использовать стили CSS для нашего HTML, с использованием атрибута во всех современных броузерах. И если мы хотим обойти старые броузеры, мы можем добавить class, со значением стиля. В сравнении с HTML 5 решением, которое добавляет новые элементы, не работающие в Internet Explorer 6 или 7, мы видим, что это, безусловно, более обратно совместимое решение.

Расширяемость через атрибуты

Вместо новых элементов, HTML 5 должна принять ряд новых атрибутов. Каждый из этих атрибутов будет относиться к категории или типу семантики. Например, как я уже подробно изложил в другой статье, HTML включает в себя: структурную семантику, риторическую семантику, ролевую семантику (принятую из XHTML) и другие классы и категории семантики.

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

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

Например XHTML атрибут role работает следующим образом:

<ul role="navigation sitemap">
  <li href="downloads">Downloads</li>
  <li href="docs">Documentation</li>
  <li href="news">News</li>
</ul>

* This source code was highlighted with Source Code Highlighter.

Значение атрибута role является разделенное пространство списка из слов определенного стандартным словарем или заданным словарем.

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

<p rhetoric="irony">He’s a fantastic person.</p>
Это демонстрирует теоретический тип семантики — «риторический», который может быть использован для разметки документа риторического характера. Этот элемент явно не играет роли иронии в документе. Наоборот, содержит в себе элементы иронии.

Вот еще один пример. Все более очевидно, что в HTML не хватает представления машино-читаемого значения понятным для человека, например даты. Это лежит в основе проблемы BBC с микроформатом hCalendar, о ней мы говорили ранее. Хотя May Day next year действительно не имеет смысла, зато по аналогии May Day next year будет.

Опять же, когда мы используем конкретный термин «equivalent» в качестве атрибута или какой либо другой для обозначения такого рода семантики, это не является проблемой. Важно отметить, что это не так просто, как использование атрибута class или role, где в один элемент помещается целый набор элементов семантики информации. Для, должным образом, расширяемого решения, которое обеспечит обратную совместимость и достаточную гибкость, стоит исследовать в этом направлении.

Я назвал этот раздел «Некоторые идеи решения», поскольку значительный объем работы необходимо сделать, для того, что бы создать действительно работоспособное решение. Открытые вопросы включают в себя следующее.

  • сколько различных семантических атрибутов должно быть. Будут ли эти категории расширяемыми, если да, то каким образом?
  • Каким образом определять словарь?
  • Мы просто изобретаем термины, которые мы хотим, почти тем же образом, как и разработчикки использовали значение class, или возможные значения должны быть определены стандартизированной спецификацией?
  • Если у нас есть конфликт, между двумя словарями, например двум идентичным терминам дают определения два различных словаря, как это решить?
  • Нужно ли пространство имен или же существует другой механизм?

Вместо того, что бы торопится с ответом на эти вопросы, я выдвинул на свет вопросы которые необходимо решить и начать диалог. Разветвление и размах решений сделаных в HTML 5, слишком велик для принятия этих решений, необходимо внести осведомленность о лингвистике, семантике, семиотике и смежных областях.

Надеюсь понятно, что просто внесение новых элементов в HTML не является решением проблемы расширения семантики в HTML.

Давайте не спешить с легким решением — с изменением «климата» все это обременит наших внуков проблемой, как и сейчас. По крайней, мере давайте оставим им максимально хороший HTML, на сколько возможно.

Sexy New HTML5 Semantics — Smashing Magazine

  • 18 минут чтения
  • Кодирование, HTML5, HTML, Semantics
  • Поделиться в Twitter, LinkedIn
Об авторе

Брюс работает над доступностью, веб-стандартами и браузерами с 2001 года. Вот почему он выглядит так плохо. Вы можете подписаться на него в @brucel или прочитать его… Больше о Брюс ↬

Большая часть ажиотажа, который мы видели до сих пор в отношении HTML5, была связана с новыми API: локальное хранилище, кеш приложений, веб-воркеры, двухмерное рисование и тому подобное. Но не будем забывать, что HTML5 предоставляет нам 30 новых элементов для разметки документов и приложений , увеличивая общее количество доступных нам элементов до более чем 100. контент, который необходимо разумно разметить, поэтому давайте рассмотрим некоторые из новых элементов, чтобы убедиться, что ваш следующий проект будет столь же семантическим, сколь и интерактивным.

Дальнейшее чтение на SmashingMag:

  • Кодирование макета HTML 5 с нуля
  • Шпаргалка по HTML 5 (PDF)
  • Учимся любить HTML5
  • Важность элементов разметки HTML5

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

Больше после прыжка! Продолжить чтение ниже ↓

По ходу дела мы увидим, что семантика HTML5 тщательно разработана для расширения текущих возможностей HTML, при этом всегда предоставляя пользователям старых браузеров доступ к содержимому. Мы также увидим, что семантическая разметка — это не «приятно иметь», а скорее краеугольный камень веб-разработки, потому что именно она улучшает доступность, возможность поиска, интернационализация и интероперабельность .

Человеческий язык, такой как английский, с его словарным запасом в миллион слов, не может однозначно выразить каждый нюанс мысли, поэтому, имея всего 100 или около того слов, которые мы можем использовать в HTML, будут ситуации, когда это неясно. какой элемент использовать для какой части контента. В этом случае выберите один; быть последовательным на сайте.

Некоторые презентационные элементы убраны

Чисто презентационные элементы, такие как center , font и big теперь устарели. Их роль полностью узурпирована каскадными таблицами стилей. Это не значит, что вам нужно бежать и перекодировать все эти древние страницы; HTML5 делает их устаревшими для авторов, но поскольку HTML5 стремится не сломать Интернет, браузеры по-прежнему будут отображать эти переплетенные паутиной устаревшие страницы.

По той же причине из текущих элементов удалены презентационные атрибуты; например, выровняйте по img , таблица , фон на теле , и bgcolor на таблица .

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

Помимо этого краткого обзора см. исчерпывающий список удаленных элементов и атрибутов W3C.

Некоторые презентационные элементы были переопределены, чтобы быть семантическими

Не все элементы презентации сняты и сняты. Некоторые из них прошли обширную программу переобучения и получили новую блестящую семантику. Например, элемент small больше не означает «использовать мелкий шрифт», хотя он будет отображаться таким образом в таблицах стилей браузера. Теперь он представляет собой побочные комментарии, такие как мелкий шрифт:

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

Некоторые переопределения кажутся мне зачисткой. В то время как я могу отстать от для привлечения внимания к названиям продуктов, ключевым словам и т. Д., Без какого-либо особого акцента, определяющего семантику для разметки названий кораблей ( , если вы так склонны) кажется странно точным. Но у меня морская болезнь, и ваш морской пробег может отличаться. С аналогичной нишевой точностью:

Элемент u [сейчас] представляет собой фрагмент текста с неясной, хотя явно воспроизводимой, нетекстовой аннотацией, такой как маркировка текста как имени собственного в китайском тексте (собственно китайское знак имени) или пометить текст как написанный с ошибкой.

Подробнее об измененных элементах и ​​атрибутах можно прочитать на сайте W3C.

Сексуальная новая семантика

Все мы знаем о видео и аудио . А canvas в настоящее время особенно популярен, потому что он позволяет создавать трехмерную графику с использованием webGL, поэтому разработчики игр могут портировать свои продукты в Интернет. Подобно старому доброму img , эта семантика представляет собой встроенный контент, потому что он перетаскивает контент из другого источника — файла, URI данных или JavaScript.

Однако, в отличие от img , у них есть открывающий и закрывающий теги, что позволяет использовать запасные варианты. Таким образом, браузеры, которые не поддерживают новую семантику, могут передавать некоторый контент: например, изображение может быть запасным вариантом для холста, или Flash-ролик может быть запасным вариантом для видео , метод, называемый «видео для всех». ».

Элементы source и track являются пустыми элементами (без закрывающих тегов), которые являются дочерними элементами video или аудио .

Исходный элемент проходит мимо кодека Вавилонской башни, который у нас есть. Каждый элемент указывает на другой исходный файл (WebM, MP4, Ogg Theora), и браузер воспроизведет первый из них, с которым он сможет работать:

.
<управление звуком>
  <источник src=bieber.ogg type=audio/ogg>
  <источник src=bieber.mp3 тип=аудио/mp3>
    
    Загрузите форматы Ogg или MP3.

В этом примере Opera, Firefox и Chrome загрузят Ogg-версию последнего шедевра Мастера Бибера, а Safari и IE загрузят версию в формате MP3. Chrome может воспроизводить как Ogg, так и MP3, но браузеры загружают первый исходный файл, который они понимают. Резервный контент между открывающим и закрывающим тегами — это ссылка для загрузки контента на рабочий стол и его воспроизведения через отдельный медиаплеер, и он отображается только в браузерах, которые не могут воспроизводить собственные мультимедиа.

Для видео можно использовать встроенный Flash-ролик, размещенный на YouTube:

<управление видео>

Таким образом, пользователи более старых браузеров, таких как IE 6-8, будут видеть фильм YouTube (если у них есть Flash Player), поэтому они, по крайней мере, смогут просматривать видео, в то время как пользователи современных браузеров получит полный опыт родного видео. Таким образом, каждый получает контент, для чего, в конце концов, и существует ваш сайт.

Элемент track является новым дополнением к семейству HTML5 и в настоящее время реализуется Opera, Chrome и IE. Он указывает на файл субтитров, который содержит текст и информацию о времени. При реализации он синхронизирует субтитры с медиафайлом, чтобы включить субтитры и субтитры по запросу; полезно не только для слабослышащих зрителей, но и для тех, кто не говорит на языке, используемом в аудио- или видеофайле.

Семантика для интернационализации

Меньше ву! чем семантика мультимедиа и игр, является семантикой интернационализации. Крутые ребята из Силиконовой долины могут удивиться, узнав, что люди во всемирной паутине используют языки, отличные от английского, и даже используют разные системы письма.

В таких языках, как арабский и иврит, пишут справа налево, в отличие от европейских языков, в которых пишут слева направо. На страницах, использующих только одну систему письма, это не представляет проблемы, но на страницах с двунаправленным («двунаправленным») письмом браузерам приходится решать, где ставить знаки препинания, маркеры, цифры и тому подобное. Браузеры обычно неплохо справляются с использованием двунаправленного алгоритма Unicode, но в некоторых случаях он ошибается, что может серьезно повлиять на удобочитаемость контента.

HTML5 дает нам элемент bdi , который позволяет авторам переопределить двунаправленный алгоритм Unicode и сделать их текст более понятным. Для дальнейшего описания проблемы и того, как ее решает bdi , см. «HTML5’s New bdi Element» Ричарда Исиды, руководителя отдела интернационализации W3C.

В некоторых языках есть письменности, которые вообще не являются алфавитными, но выражают идею, а не звук. Иногда автору приходится помогать читателям с произношением особенно редких или неудобных символов, обычно предоставляя альтернативный шрифт мелким шрифтом над соответствующим символом. В печати это традиционно делалось с помощью очень маленького шрифта размером 5 пунктов под названием «ruby», а HTML5 дает нам три новых элемента для разметки текста ruby: рубин , rt и rp .

Для получения дополнительной информации см. «Элемент HTML5 ruby ​​ в словах из одного слога или меньше» Дэниела Дэвиса.

Структурная семантика

Большинство людей знают, что HTML5 дает нам много новых элементов для описания частей веб-страницы, таких как заголовок , нижний колонтитул , навигация , раздел , артикул , в сторону и так далее. Они существуют, потому что мы, веб-разработчики, действительно хотели иметь такую ​​семантику. Откуда об этом узнали авторы спецификации HTML5? Потому что в 2005 году Google проанализировал 1 миллиард страниц, чтобы увидеть, какие авторы использовали в качестве имен классов на 9 страницах.0043 div s и другие элементы. Совсем недавно, в 2008 году, Opera MAMA проанализировала 3 миллиона URL-адресов, чтобы увидеть лучшие имена классов и лучшие идентификаторы, используемые в дикой природе. Этот анализ показал, что авторы хотели разметить эти области страницы, но у них не было элементов для этого, кроме скромного и общего div , к которому они затем добавили описательные классы и идентификаторы.

(В HTML5 Doctor есть много статей о семантике HTML5, поэтому мы не будем раздувать эту статью, углубляясь в нее. Внимание: некоторые из них были написаны мной.)

Новая семантика была построена так, чтобы изящно деградировать. Например, рассмотрите, что спецификация должна сказать о новом элементе :

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

Таким образом, этот элемент можно использовать для аннотирования иллюстраций, диаграмм, фотографий, списков кодов и т. д.

Это не новая идея. HTML3 предложил fig (который так и не попал в окончательную спецификацию HTML 3.2). Выглядело это так:


   Житель земли: Nicodamus bicolor строит силки из шелка
   
Маленький мохнатый паук.
   <КРЕДИТ> Дж. А. Л. Кук/OSF

С этим большая проблема. В браузерах, которые не поддерживают fig (и ни один из них не поддерживает), изображение не будет отображаться, потому что 9Элемент 0043 fig будет полностью проигнорирован. Содержимое элемента Credit будет отображаться, потому что это просто текст. Таким образом, вы получите кредит без изображения в старых браузерах.

В HTML5 вы бы закодировали тот же пример следующим образом:

<рисунок>

   

      
Житель земли: Nicodamus bicolor строит силки из шелка. 

      
Маленький мохнатый паук.
      <маленький>Дж. А. Л. Кук/OSF

В отличие от прерванного синтаксиса HTML3, версия HTML5 обратно совместима: браузер, который не «знает» об элементе , по-прежнему будет отображать img и текст внутри figcaption (как HTML3 ). элемент кредита будет точно так же отображать свое содержимое). Обратите внимание, что мы используем переопределенный элемент small вместо создания нового элемента Credit . Помните, что «мелкий шрифт также иногда используется для атрибуции».

HTML5 также дает нам новый элемент figcaption . Первоначально авторы спецификации пытались повторно использовать заголовок , как это было предложено в HTML3, но возникли устаревшие проблемы, поскольку заголовок ранее был только дочерним элементом таблицы .

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

Интерактивная семантика

Структурные элементы HTML5 в настоящее время мало что делают в визуальных браузерах, хотя программное обеспечение, расположенное поверх браузеров (например, программы чтения с экрана), начинает их использовать (см. Читатели в марте 2011 года» и «JAWS, IE и заголовки в HTML5».)

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

Большинство браузеров будут реализовывать его как «поле расширения»: когда пользователь щелкает какой-либо значок, созданный браузером (например, треугольник или стрелку, указывающую вниз) или слово «Подробности» (которое может быть заменено собственным авторским рубрики в дочерней сводке ), элемент откроется, открывая свои детали внутри. Детали могут быть полным описанием изображения или графика, описанием сложной таблицы, расширенными параметрами формы поиска или чем-либо еще. Сегодня это обычная потребность в Интернете, теперь она стала нативной и устраняет необходимость в пользовательском JavaScript.

Большинство из нас видели новую семантику форм HTML5. Большинство из них являются атрибутами элемента input , что обеспечивает постепенное снижение до в старых браузерах. Новые элементы включают datalist , output , progress и meter .

Есть ли у нас правильная семантика?

Итак, у нас много новых семантик, но правильные ли они? В конце концов, исследование Google, на котором они основывались, было проведено в 2005 году — довольно давно! Возможно, семантика уже несколько отстала от времени? Многие отмечают, что они ориентированы на документы, а не на приложения. Нужна ли нам больше семантики, ориентированной на приложения, такой как логин или общий элемент , или какой-то модальный элемент для модальных диалоговых окон?

Не знаю; Я не разработчик приложений. Но, по крайней мере, HTML является «живым стандартом», поэтому их можно добавить, если рабочей группе будут представлены достаточно убедительные варианты использования.

Я думаю, что большинство программистов приветствовали бы новый способ встраивания изображений, которые реагируют на контекст устройства. Заимствуя элемент video , который отображает исходное видео в соответствии с указаниями медиазапросов, я могу представить себе новый элемент, такой как картинка :


   
   
   <исходный код=lores.png>
      
      злой пират

Это потребует найма.png для широкоэкранных устройств, midres.png для устройств шириной от 480 до 800 пикселей и lores.png для всего остального, тем самым делая спорным вопрос, который в настоящее время задают себе дизайнеры: «Я заставляю каждый браузер загружать изображение с высоким разрешением, а затем сжимаю его для маленьких экранов, тем самым тратя впустую пропускную способность, или я отправляю изображение с низким разрешением». для каждого браузера и масштабировать его для больших экранов, потенциально жертвуя качеством?»

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

Отправка изображения нужного размера на устройства без потери полосы пропускания — одна из самых сложных проблем кросс-девайсного и адаптивного дизайна на данный момент. Возможно, мы увидим решение этой проблемы в HTML6. На данный момент лучшие решения, в том числе Adaptive Images Мэтта Уилкокса и Responsive Images от Filament Group, требуют JavaScript и настройки файла htaccess сервера. Худшие решения требуют старомодных методов, таких как анализ браузера, который теперь переименован в «обнаружение устройства», но все тот же старый сопоставление строки с шаблоном пользовательского агента, который до смешного хрупкий, не ориентированный на будущее или масштабируемый, и прямолинейный. дней появления на веб-сайтах значков «Лучше всего просматривается в Netscape Navigator с разрешением 800 × 600».

Когда, где, кто?

Многие данные зависят от трех элементов информации: когда , где и кто ?

В HTML5 есть элемент time (который в последнее время стал полем битвы). Это позволяет вам аннотировать удобочитаемую дату однозначной машиночитаемой датой. Неважно, что находится между тегами, потому что это контент, который люди могут прочитать. Таким образом, вы можете использовать любой из следующих вариантов:

Что бы вы ни выбрали, машина все равно будет знать дату, которую вы имеете в виду, благодаря атрибуту datetime , отформатированному как ГГГГ-ММ-ДД . Если вы хотите добавить время, вы можете: отделить время от даты с помощью T , а затем указать время в 24-часовом формате, заканчивая Z вместе со смещением часового пояса. Таким образом, 2011-11-13T20:00Z будет 20:00 13 ноября 2011 года по Гринвичу, а 2011-11-13T23:26.083Z-05.00 будет 23:26 и 83 миллисекунды в часовом поясе, лежащем за 5 часов до UTC. Браузер, локализованный на Шри-Ланке, может использовать эту информацию для автоматического преобразования дат в буддийский календарь. Поисковые системы могут использовать временные метки, чтобы помочь оценить «свежесть».

Возможно, удивительно, что, несмотря на то, что геолокация сейчас так распространена, у нас нет элемента местоположения, который просто принимает три атрибута: широту, долготу и (необязательно) высоту. Было бы здорово иметь возможность написать следующее:

Лондон SW1A 4WW

Браузер затем предложит показать вам карту или проложить маршрут от текущего местоположения GPS или любого другого сервиса, основанного на местоположении.

(Поскольку я выступил с докладом, на котором основана эта статья, Ян Хиксон, редактор HTML5, сказал, что он ожидает добавить новый элемент . Если бы я мог выбирать, я бы предпочел вместо , поэтому я мог носить футболку с надписью «У меня есть время , если у вас есть место «.)

В HTML3 был элемент человек , «используемый для имен людей, чтобы разрешить их автоматическое извлечение программами индексирования», но он так и не был реализован. В HTML4 элемент cite можно было использовать для переноса имен людей, но в HTML5 он был удален, что вызывает споры (см. «Incite a Riot» Джереми Кейта). Таким образом, в HTML5 у нас не осталось возможности однозначно обозначить человека. Имена людей, однако, трудно решить. В то время как время и даты имеют хорошо известные стандартизированные форматы ISO ( ГГГГ-ММ-ДД и ЧЧ:ММ:СС.ммм соответственно), а местонахождение всегда широта, долгота и высота, личные имена труднее разбить на полезные части: есть русские отчества, индонезийские одинарные словесные имена, несколько фамилий и тайские прозвища для рассмотрения. (Дополнительную информацию и обсуждение см. в отличной статье Ричарда Ишиды «Персональные имена во всем мире».) требуемый или подразумеваемый формат, поэтому браузер или поисковая система не могут узнать, например, является ли 1936-10-19 — это дата, номер детали или почтовый индекс.

Микроданные

HTML5, как и HTML4, является расширяемым (но не таким грязным способом расширяемости, как форматы XML, которые так ненавидит рабочая группа). Вы можете использовать проверенные микроформаты, использующие классы HTML, или полную спецификацию RDFa, которая не проходит проверку в HTML4 или HTML5. Поскольку авторы считали RDFa слишком сложным для написания (Google провел исследование, которое показало, что авторы делают на 30% больше ошибок с RDFa, чем с другими форматами), HTML5 специфицирует микроданные, механизм добавления общей семантики через согласованные шаблоны разметки. . HTML5 Doctor содержит больше информации о микроданных HTML5, а Opera 11.60 поддерживает API Microdata DOM.

Подобно микроформатам и RDFa, дополнительная семантика, добавленная к разметке, имеет смысл, только если у вас есть шпаргалка, в которой указано, что означает каждая часть. Это означает, что данные должны указывать на словарь, который сообщает любому поисковому роботу, как интерпретировать массив найденных им данных. Для микроданных существует недавно созданный Schema.org, который представляет собой «набор схем, то есть тегов HTML, которые веб-мастера могут использовать для разметки своих страниц способами, признанными основными поставщиками поиска».

Имеет ли значение семантика?

Теперь, когда JavaScript генерирует все больше и больше разметки, некоторые люди склонны думать, что семантика не имеет значения. Мы видим различные продукты, продаваемые как HTML5, которые просто заставляют div летать по экрану с помощью JavaScript  —  простых методов DHTML, не изменённых 10 лет назад.

Я даже видел несколько веб-страниц вообще без разметки. Некоторые фреймворки выдают скелет HTML с пустыми тегами body и внедряют весь HTML со скриптом. Если вы запускаете какой-то мини-JavaScript по сети, вообще без разметки, вы ближе к Flash, чем к Интернету.

Точно так же, как 47 минут (очевидно) слишком много, чтобы бороться с созданием макета CSS, после чего вы должны просто сдаться и использовать таблицы, некоторые люди считают, что думать о том, какой элемент использовать, — это пустая трата времени. . «Есть два типа разработчиков: те, кто спорят о том, что div не имеет смысла, и те, кто создает эпическое дерьмо», — пишет Томас Фукс, как будто эти два действия исключают друг друга.

Лучший аргумент заключается в том, что ни одно программное обеспечение не заботится о семантике и не потребляет ее, так зачем беспокоиться? Это неправда (уже ведется работа по сопоставлению вспомогательных технологий с новой семантикой), но даже если бы это было правдой, это игнорирует тот факт, что это аргумент курицы и яйца. Предполагается, что ни одна новая поисковая система никогда не появится на рынке и не сможет использовать новые элементы, или что браузеры никогда не выпустят новые версии, которые могут использовать эту семантику, и что разработчики не будут писать новые расширения  — , короче говоря, это предполагает, что эволюция Интернета завершена.

Семантика имеет значение . Семантика передает значение, и как только это установлено, машины могут делать что-то значимое с этими данными без необходимости разрабатывать и использовать алгоритмы для угадывания. Расширение браузера может позволить пользователю перейти прямо к nav одним нажатием клавиши. Он может сделать это, потому что ищет nav вместо того, чтобы использовать эвристику для поиска div с id или class , что предполагает его использование в качестве навигации (при условии, что автор решил использовать что-то разумное, например навигация, навигация, боковая панель или меню  —  и сайт ресторана с div под названием «меню» может быть списком блюд, а не другими страницами (ах, двусмысленность естественного языка). Сканер может динамически собирать статьи на временной шкале. Возможностей гораздо больше, чем может представить мое скудное воображение.

Сеть основана на простых технологиях, объединенных вместе для получения удивительных результатов  —  результатов, которые, безусловно, превзошли первоначальные намерения или ожидания изобретателей. Сеть будет продолжать делать это. Что делает Интернет таким замечательным, таким гибким и таким мощным, так это тот факт, что контент находится в открытых форматах, которые можно анализировать и смешивать новыми и удивительными способами.

Это может произойти, если содержимое размечено автором по смыслу  —  и если язык имеет правильные элементы разметки, которые авторы могут использовать в качестве словаря. HTML5 расширяет наш словарный запас . Нам понадобится больше слов  — , и они появятся с HTML6 и т. д. sourcable, hackable, mashuppable, доступный, индексируемый, многоразовый, то мы должны гарантировать, что мы используем небольшое количество семантических инструментов в нашем распоряжении должным образом, и мы все выиграем.

(Эта статья основана на моем выступлении на конференции Fronteers.)

Об авторе

Брюс пропагандирует открытые веб-стандарты для Opera. Вместе с Реми Шарпом он написал книгу «Введение в HTML5». Книга указывает на хорошие и плохие стороны спецификаций HTML5 и показывает, как использовать язык, а некоторые области спецификации будут обсуждаться теоретически, поскольку они еще нигде не реализованы. Это первая полноценная книга по HTML5 («Новые райдеры», выходит во втором издании).

 

(al) (il) (vf)

Семантические теги HTML5 | Webflow University

Домашний урок

Все уроки

Используйте семантические теги HTML5 для улучшения доступности и структуры сайта.

layout-design

В этом видео старый пользовательский интерфейс. Скоро будет обновленная версия!

В веб-дизайне семантический элемент — это элемент с внутренним или неотъемлемым значением, которое представляет это значение как для браузера, так и для разработчика. HTML5 представил семантические теги, которые позволяют вам определить назначение элемента на вашем сайте. Например, 9Тег 0014 Nav определяет навигационные ссылки, а тег Main определяет основное содержимое веб-страницы (также называемое «документом»). Напротив, тег Div не имеет семантического значения, поэтому блоки Div не считаются семантическими элементами.

С помощью Webflow вы можете добавлять эти теги к элементам дизайна вашего сайта, чтобы улучшить доступность и структуру вашего сайта.

На этом уроке вы узнаете: 

  1. Как использовать семантические теги
  2. Преимущества семантических тегов

Как использовать семантические теги

Webflow позволяет добавлять ряд семантических тегов HTML5 к вашим элементам из панели настроек элемента . Лучше всего использовать семантические теги для любых элементов, которые служат определенной цели и имеют внутреннее значение (например, заголовки, нижние колонтитулы, навигация и т. д.).

‍
Совет от профессионала: Если вы используете каждый семантический элемент по назначению, браузер сделает большую часть работы, чтобы сделать этот элемент доступным!

Доступные семантические теги HTML5 Webflow включают:

  • Заголовок — определяет заголовок для документа или раздела, который обычно находится вверху страницы и предназначен для введения, который может содержать элементы заголовка, логотип, поиск форма и т. д. 
  • Нижний колонтитул — определяет нижний колонтитул для документа или раздела, который может содержать информацию об авторе, ссылки на связанные страницы и т. д. 
  • Nav — определяет набор навигационных ссылок в документе. Обычно используется для меню, оглавлений и указателей
  • Основной — определяет основное содержание документа. Основной элемент не должен содержать повторяющийся контент, такой как навигационные ссылки, логотипы сайтов, формы поиска и т. д. 
  • Раздел — определяет раздел документа, в котором сгруппированы материалы с похожими темами. Элемент Webflow section по умолчанию имеет HTML5-тег Section .
  • Статья — определяет отдельную композицию на странице, такую ​​как сообщение на форуме, газетная статья или сообщение в блоге
  • Сторона — определяет контент помимо содержимого страницы, например боковую панель или выноску.  
  • Адрес — определяет контактную информацию для автора/владельца документа или статьи определяет самостоятельный контент (например, иллюстрации, диаграммы, фотографии, блоки кода и т. д.)

    Чтобы добавить семантический тег к элементу на вашем сайте: 

    1. Выберите элемент на холсте Webflow
    2. Перейдите к Панель настроек элемента
    3. Щелкните раскрывающийся список Тег и выберите соответствующий тег HTML5 для выбранного элемента , как Элементы и списки h2-H6 имеют предопределенные семантические значения, поэтому вы не сможете определить для них теги HTML5.

      Преимущества семантических тегов 

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

      Для дизайнеров и разработчиков

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

      В качестве дополнительного бонуса теги HTML5 способствуют повышению производительности сайта и SEO, поскольку размер файла семантического HTML часто меньше, чем несемантического кода, а поисковые системы придают большее значение ключевым словам внутри семантических элементов, чем ключевым словам, включенным в несемантические элементы. элементы (например, элементы Div).

      Для специальных возможностей 

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

      Определяя элементы семантически с помощью семантических тегов HTML5, мы сообщаем поисковым роботам и вспомогательным технологиям (таким как программы чтения с экрана), какие части веб-сайта являются, чтобы они могли более точно отображать элементы и/или сообщать элементы посетителям сайта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *