Что такое семантика в html
Перейти к содержимому

Что такое семантика в html

  • автор:

Семантика в HTML

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

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

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

Структурные элементы: организация страницы

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

Вот что типичная веб-страница может в себя включать:

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

Текстовые элементы: определение контента

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

Вы, в основном, будете использовать:

  • для абзацев;

    • для (неупорядоченных) списков;
    • для (упорядоченных) списков;
    • для отдельных пунктов списка;
    • для цитат.

    Строчные элементы: различный текст

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

    Есть много строчных элементов, но вы обычно столкнётесь со следующими:

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

    Общие элементы

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

    • для блочных элементов;
    • для строчных элементов.

    Хотя эти элементы HTML на самом деле не несут какого-либо смысла, они пригодятся когда мы начнём использовать CSS.

    Не заморачивайтесь на семантике

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

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

    Semantics

    В программировании, Семантика означает значение фрагмента кода — например, «К какому результату приведёт выполнение этой строки JavaScript?», или «Каково предназначение или какая роль у этого элемента HTML?», а не «Как он выглядит?».

    Семантика в JavaScript

    Семантика в CSS

    Для CSS, рассмотрим стилизацию списка элементов li , в которых содержатся разные виды фруктов. Вы бы поняли, какая часть DOM выбрана с помощью селектора div > ul > li , или .fruits__item ?

    Семантика в HTML

    В HTML, например, элемент (en-US) является семантическим, что даёт тексту внутри него роль (или значение) «заголовка первого уровня на вашей странице».

    h1>This is a top level headingh1> 

    По умолчанию, стандартные стили (en-US) большинства браузеров зададут (en-US) большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизировать его так, как сочтёте нужным).

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

    span style="font-size: 32px; margin: 21px 0;" >Is this a top level heading?span > 

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

    HTML должен предоставлять структуру информации, которой он будет наполняться, и не должен полагаться на стандартные свойства стилей. Стилизация (то, как эта информация должна выглядеть), полностью ложится на плечи CSS.

    Некоторые из преимуществ использования семантической разметки:

    • Поисковые системы будут рассматривать содержимое такой разметки как важные ключевые слова, влияющие на рейтинг страницы в результатах поиска (смотри SEO)
    • Программы для чтения с экрана могут использовать её как указатель, чтобы помочь слабовидящим пользователям ориентироваться на странице
    • Среди бесконечных блоков div гораздо проще найти блок семантического кода, чем блок с семантическим классом или классом, принадлежащим пространству имён.
    • Указывает разработчику на тип данных, которые будут размещены
    • Семантическая разметка отражает правильное именование элементов / компонентов

    Принимая решение об использовании той или иной разметки, спросите себя: «Какой элемент (элементы) лучше всего описывает / представляет данные, которые я собираюсь использовать?» Например, это список данных ?; упорядоченный, неупорядоченный ?; это статья с разделами и дополнительной информацией ?; в ней перечислены определения ?; это рисунок или изображение, которое требует подписи ?; должен ли он иметь собственные header и footer ?; и т.п.

    Семантические элементы

    Вот некоторые из примерно 100 доступных семантических элементов:

    Learn more

    • HTML element reference on MDN
    • Using HTML sections and outlines (en-US) on MDN
    • MDN Web Docs Glossary
      • SEO

      HTML5 Семантика

      Семантика — это изучение значений слов и фраз на языке HTML.

      Семантические элементы = элементы со смыслом.

      Что такое семантические элементы?

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

      Примеры несемантических элементов: и — Ничего не говорит о его содержании.

      Поддержка браузеров

      Да Да Да Да Да

      Семантические элементы HTML5 поддерживаются во всех современных браузерах.

      Кроме того, вы можете «выучить» как обращаються старые браузеры с «неизвестными элементами».

      Новые семантические элементы в HTML5

      Многие веб-сайты содержат код HTML как: для обозначения навигации, верхнего и нижнего колонтитулов.

      HTML5 предлагает новые семантические элементы для определения различных частей веб-страницы:

      HTML5

      Элемент определяет раздел в документе.

      Согласно документации HTML5 W3C: «section — это тематическая группа контента, обычно с заголовком.»

      Домашняя страница обычно разделяется на разделы для введения, содержания и контактной информации.

      Пример

      WWF

      Всемирный Фонд природы (WWF).

      HTML5

      Элемент задает независимое, автономное содержимое.

      Статья должна иметь смысл сама по себе и ее можно читать независимо от остальной части веб-сайта.

      Примеры того, где можно использовать элемент :

      • Сообщения форумов
      • Блог
      • Газетная статья

      Пример

      Что делает WWF?

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

      Вложить в или наоборот?

      Элемент задает независимое, автономное содержимое.

      Элемент определяет раздел в документе.

      Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет, мы не можем!

      Итак, в интернете вы найдете страницы HTML с элементами содержащих elements и элементами содержащих элемент .

      Вы также найдете страницы с элементами содержащих элемент , и элемент содержащий элементы .

      Пример для газеты: Спорт в спорте section, может иметь техническое section в каждом .

      HTML5

      Элемент задает заголовок документа или раздела.

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

      Можно использовать несколько элементов в одном документе.

      В следующем примере определяется заголовок статьи:

      Пример

      Что делает WWF?

      Миссия WWF:

      Миссия WWF — остановить деградацию естественной среды нашей планеты ,
      постройть будущее, в котором люди будут жить в гармонии с природой.

      HTML5

      Элемент задает нижний колонтитул для документа или раздела.

      Элемент должен содержать информацию о содержащем его элементе.

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

      Можно использовать несколько элементов в одном документе.

      Пример

      HTML5 /h2>

      Элемент определяет набор навигационных ссылок.

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

      Пример

      HTML5

      Элемент определяет некоторое содержимое aside из контента, в который он помещен (например, боковая панель).

      Содержимое должно быть связано с окружающим контентом.

      Пример

      Моя семья, посетили центр Epcot этим летом.

      HTML5 и

      Цель подписи к рисунку — добавить визуальное объяснение к изображению.

      В HTML5 изображение и заголовок можно сгруппировать в элементе :

      Пример

      Пульпит Рок

      Рис. 1. — Прекестулен, Норвегия.

      Элемент определяет изображение, элемент определяет заголовок.

      Почему семантические элементы?

      В HTML4 разработчики использовали собственные имена id/class для стилизации элементов: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav и т. д.

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

      Новые элементы HTML5 ( ), станет легче выполнить.

      Согласно W3C, семантический веб: «Позволяет совместно и повторно использовать данные между приложениями, предприятиями и сообществами.»

      Семантические элементы в HTML5

      Ниже приведен алфавитный список новых семантических элементов в HTML5.

      Ссылка к нашему полному Справочнику HTML5.

      Тег Описание
      Определение статьи
      Определяет содержимое aside из содержимого страницы
      Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
      Определяет заголовок для элемента
      Указывает автономный контент, например иллюстрации, диаграммы, фотографии, списки кодов и т. д.
      Определяет нижний колонтитул для документа или раздела
      Задает заголовок для документа или раздела
      Определяет основное содержание документа
      Определяет маркированный / выделенный текст
      Определяет ссылки навигации
      Определяет раздел в документе
      Определяет видимый заголовок элемента
      Определяет дату/время

      Семантический HTML¶

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

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

      В этой серии статей мы рассмотрели еще не так много элементов HTML, но даже без знания HTML следующие два фрагмента кода показывают, как семантическая разметка может придать содержимому контекст. В обоих случаях вместо ipsum lorem используется подсчет слов для экономии прокрутки — используйте свое воображение, чтобы превратить «тридцать слов» в 30 слов:

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

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
      div> span>Three wordsspan> div> a>one worda> a>one worda> a>one worda> a>one worda> div> div> div> div> div>five wordsdiv> div> div> div>three wordsdiv> div>forty-six wordsdiv> div>forty-four wordsdiv> div> div> div>seven wordsdiv> div>sixty-eight wordsdiv> div>forty-four wordsdiv> div> div> div> span>five wordsspan> div> 

      Понимаете ли вы, к чему относятся эти слова? Не совсем.

      Давайте перепишем этот код с использованием семантических элементов:

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
      header> h1>Three wordsh1> nav> a>one worda> a>one worda> a>one worda> a>one worda> nav> header> main> header> h1>five wordsh1> header> section> h2>three wordsh2> p>forty-six wordsp> p>forty-four wordsp> section> section> h2>seven wordsh2> p>sixty-eight wordsp> p>forty-four wordsp> section> main> footer> p>five wordsp> footer> 

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

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

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

      Объектная модель доступности (AOM)¶

      По мере разбора полученного содержимого браузер строит объектную модель документа (DOM) и объектную модель CSS (CSSOM). Затем он также строит дерево доступности. Вспомогательные устройства, такие как программы чтения с экрана, используют AOM для анализа и интерпретации содержимого. DOM — это дерево всех узлов документа. AOM — это как бы семантическая версия DOM.

      Давайте сравним, как обе эти структуры документов отображаются в панели доступности Firefox:

      Несемантическая разметка Семантическая разметка

      Первый фрагмент кода. Список узлов, все из которых являются ссылками или текстовыми литералами.

      Список узлов, все из которых являются ссылками или текстовыми литералами.

      Второй фрагмент кода. Список узлов с четкими обозначениями.

      Список узлов с четкими обозначениями.

      Обратите внимание, что и являются ориентирами с ролями banner и contentinfo соответственно, когда они не вложены в другие ориентиры. В AOM Chrome это показано следующим образом:

      Несемантическая разметка Семантическая разметка

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

      Все текстовые узлы отображаются как статический текст.

      Второй фрагмент кода. Все текстовые узлы имеют описания.

      Все текстовые узлы имеют описания.

      Если посмотреть на инструменты разработчика Chrome, то можно заметить существенную разницу между объектной моделью доступности при использовании семантических элементов и без них.

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

      Атрибут role ¶

      Атрибут role описывает роль элемента в контексте документа. Атрибут role является глобальным атрибутом, т.е. он действителен для всех элементов, определяемых спецификацией ARIA, а не спецификацией WHATWG HTML, где определено практически все остальное в этой серии.

      Семантические элементы имеют неявную роль, которая зависит от контекста. Как мы видели на скриншоте инструментов разработчика доступности Firefox, элементы верхнего уровня , , и являются ориентирами, а , вложенный в , — разделом. На скриншоте Chrome эти элементы перечислены ARIA roles: — это main , — это navigation , а , поскольку он являлся нижним колонтитулом документа, — это contentinfo . Когда является заголовком документа, роль по умолчанию — banner , что определяет раздел как глобальный заголовок сайта. Когда или вложены в элемент секционирования, они не являются ролью landmark . Это видно на скриншотах обоих инструментов разработки.

      Имена ролей элементов важны при построении АОМ. Семантика элемента, или «роль», важна для вспомогательных технологий и, в некоторых случаях, для поисковых систем. Пользователи вспомогательных технологий полагаются на семантику, чтобы ориентироваться в содержимом и понимать его смысл. Роль элемента позволяет пользователю быстро получить доступ к искомому контенту и, что, возможно, более важно, роль информирует пользователя программы чтения с экрана о том, как взаимодействовать с интерактивным элементом, когда он находится в фокусе внимания.

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

      С помощью атрибута role можно присвоить любому элементу роль, в том числе и отличную от той, которую подразумевает тег. Например, имеет неявную роль button . С помощью role=»button» можно превратить любой элемент семантически в кнопку:

      Click Me

      .

      Хотя добавление к элементу role=»button» информирует читателей экрана о том, что этот элемент является кнопкой, это не меняет ни внешнего вида, ни функциональности элемента. Элемент button предоставляет множество возможностей, не требуя от пользователя никакой работы. Элемент button автоматически добавляется в последовательность упорядочивания вкладок документа, то есть по умолчанию он является фокусом клавиатуры. Клавиши Enter и Space активизируют кнопку. Кнопки также имеют все методы и свойства, предоставляемые им интерфейсом HTMLButtonElement. Если вы не используете семантическую кнопку для своей кнопки, то вам придется программировать все эти свойства заново. Гораздо проще просто использовать .

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

      1 2 3 4 5 6 7 8 9
      div role="banner"> span role="heading" aria-level="1">Three wordsspan> div role="navigation"> a>one worda> a>one worda> a>one worda> a>one worda> div> div> 

      While the role attribute can be used to add semantics to any element, you should instead use elements with the implicit role you need.

      Семантические элементы¶

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

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

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

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

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

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