20 элементов HTML, улучшающих семантику текста


20 элементов HTML, улучшающих семантику текста

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

Термин “семантика” связан с пониманием языка. Если что-то более семантично — по определению, оно несёт больший смысл. Семантичный HTML — это разметка, которая более эффективна как средство коммуникации, так как она лучше передаёт намерения.

Семантичный HTML передаёт больше смысла

Рассмотрим в качестве примера разницу между элементами <div> и <header>. Первый описывает общую группу блочного содержимого в HTML документе, тогда как второй конкретизирует, что данный блок несёт в себе вводное содержимое, и возможно включает в себя элементы навигации.

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

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

Элемент <s>

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

Элемент <s> не должен использоваться для указания правок в документе, вроде удалённого текста. Элемент <s> перечёркивает текст по умолчанию.

Элементы <ins> и <del>

Элементы <ins> и <del> работают в паре, с их помощью можно описать места вставок и удалений в документе. Каждый элемент поддерживает два атрибута. Атрибут cite хранит URL, ведущий к разъяснению изменения. Атрибут datetime указывает, когда было произведено изменение.

По умолчанию содержимое тега <del> будет выводиться перечёркнутым, тогда как содержимое текста <ins> помечается подчёркиванием.

Элемент <cite>

Кроме атрибутов cite у вышеперечисленных тегов <ins> и <del>, элемент <cite> является самостоятельным тегом, представляющим отсылку на чью-то работу или статью, книгу, комикс, рисунок, стих, песню, видеоролик или подобное.

Содержимое элемента <cite> должно быть названием работы, на которую ссылается этот элемент, имя автора или художника, или URI на соответствующую работу.

Элемент <q>

Назначение — представление короткой цитаты, идущей в тексте, и не вынесенной в отдельный блок. Элемент <q> включает в себя и пунктуацию (кавычки), и атрибут cite для указания ссылки. Важно помнить, что элемент <q> предназначен для цитат, идущих в тексте, тогда как элемент <blockquote> больше подходит для больших, обособленных цитат.

Элементы <abbr> и <dfn>

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

В приведённом примере браузеры, поисковые роботы и люди, глядя на разметку распознают, что “Internet Corporation for Assigned Names and Numbers” — это определяемая фраза, а “ICANN” — это акроним к этой фразе. Также, согласно стандарту, параграф, список или раздел, включающий тег <dfn> также должны включать и связанное определение.

Элемент <code>

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

Элемент <code> также может быть использован в совокупности с элементом <pre>, для выделения блоков кода.

Элемент <samp>

Используется для определения примера вывода компьютерной системы или приложения. Содержимое тега <samp> должно быть текстом, получаемым при каком-либо взаимодействии с компьютером.

Элемент <kbd>

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

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

Элемент <var>

Элемент <var> представляет переменную в контексте математического выражения или программного кода.

Элемент <data>

Этот HTML, элемент, наряду с атрибутом value, ассоциирует некое содержимое с машинно-читаемым переводом этого содержимого. Элемент <data> предназначен для использования в сочетании со скриптами.

Вот очень простой пример, указывается числовое представление слова “одиннадцать”.

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

Элемент <time>

Похожий на элемент <data>, элемент <time> может быть использован для указания машинно-читаемой информации о дате и времени.

Элементы <ruby>, <rt> и <rp>

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

Элемент <ruby> в HTML — это способ добавить Ruby-аннотацию. Зачастую такие подсказки к произношению отображаются в виде надстрочного текста над соответствующим символом.

Элемент <ruby> часто используется вместе с элементом <rt>, который описывает произношение единичного символа в виде Ryby-аннотации, и элементом <rp>, описывает запасную пунктуацию для браузеров, не поддерживающих Ruby аннотации.

У рабочей группы, занимающейся развитием веб-технологий, основанных на гипертекстовых приложениях (WHATWG), есть несколько великолепных примеров Ruby-аннотаций, включая и следующий:

Чтобы лучше понять пример, рассмотрим первую аннотацию:

При правильном отображении, символы после тега <rt> (??), будут отображены над символом ?.

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

В данном примере браузеры, которые не поддерживают Ruby-аннотации, отобразят произношение символа в скобках, ?(?? )

Элементы <sup> и <sub>

Представляющие надстрочное и подстрочное написание элементы <sup> и <sub> обозначают “типографские соглашения”, и не должны использоваться просто как копия соответствующих CSS правил.

Возможно, наиболее распространённый пример использования этих тегов — французские сокращения, в которых обычно используются надстрочное начертание. Конкретно, французское слово compagnie (компания), зачастую представляется следующим сокращением: Cie

Элемент <mark>

Если бы в HTML был инструмент, подсвечивающий текст жёлтым цветом — это был бы элемент <mark>. Этот тег подсвечивает содержимое, указывая на его особое значение в определённом контексте. Например, если кто-то хочет выделить ключевое слово в разделе, которое подходит под поисковой запрос, то было бы разумным воспользоваться тегом <mark>. В нижеприведённом примере искали слово “audio”.

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

Элемент <wbr>

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

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

В США, например, гавайское имя углохвостого спинорога состоит из 21 буквы: humuhumunukunuku?pua?a. С помощью тега <wbr> мы можем подсказать браузеру, как разбить слово на соответствующие слоги.

Заключение

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

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

Были ли вам полезны эти элементы? Поделитесь своими мыслями в комментариях.

Данный урок подготовлен для вас командой сайта ruseller.com

Previous 45+ бесплатных материалов для веб дизайнеров за август 2016
Next OpenCart 2.1.x — бесплатный templatemonster шаблон

Suggested Posts

Карта сайта для WordPress без плагинов — советы, правила, инструкция

Модуль OpenCart — Массовое редактирование товаров

Как написать robots.txt для WordPress

Модальные окна с размытым фоном на CSS3

Простые ползунки для публикаций с отражением

Создание выпадающего мега меню на CSS3