В современном Вебе в слово семантика вкладывают очень много. Но что означает семантика? Почему она так важна?
Семантический HTML передает смысл документа, определяя не столько визуальное отображение текста, сколько его суть. Хорошая семантическая разметка помогает людям и поисковым системам лучше понимать содержание и контекст.
Семантическая разметка значительно более удобочитаема для скрин-ридеров, полезна для SEO. Такая разметка уменьшает количество необходимого кода, делает код более понятным для людей, которым приходится с ним работать.
Отлично, раз семантика это так прекрасно, то как её использовать? Один из лучших вариантов делать разметку правильно – заменять привычные элементы на более выразительные.
<q>
Как и его блочный собрат <blockquote>, тег <q> применяется для создания цитат.
Почему просто не использовать кавычки? Кавычки не всегда означают цитату. Иногда они используются для акцентирования, иронии или обозначения имени или названия. В этих случаях использование кавычек полностью уместно. Однако, если Вы цитируете кого-либо, тег <q> недвусмысленно подчеркнет это.
<i> и <b>
В старые добрые времена теги <i> и <b> использовали для обозначения наклонного и жирного текста. Когда идея отделения семантики контента от его представления стала набирать обороты, теги <i> и <b> попали в немилость, т.к. указывали способ отображения текста, вместо того, чтобы передавать его смысл. Им на смену пришли <em> и <strong>, обозначавшие, соответственно, акцентированный и сильно акцентированный текст.
С приходом HTML5 <i> и <b> приобрели новый семантический смысл. Тег <i> применяется для фрагментов, имеющих отдаленное отношение к контексту. Он полезен для обозначения, например, мыслей или технических терминов. Тег <b> подходит для придания тексту стилистического отличия без изменения семантического смысла.
<abbr>
Тег <abbr> используется для аббревиатур! Он действительно удобен, когда в документе много аббревиатур. Тег имеет необязательный атрибут title, который может содержать расшифровку аббревиатуры.
<abbr title="laugh out loud">lol</abbr> <abbr title="I don't know">idk</abbr> <abbr title="got to go">g2g</abbr> <abbr title="talk to you later">ttyl</abbr>
<time>
Рассмотрим типичную проблему локализации: даты. В США 5 октября 2013 записывается 10/05/13, в Великобритании 05/10/13, в Нидерландах 05-10-13, в Южной Африке 2013/10/05, а в России 05.10.13. При всех возможных вариантах поисковому роботу трудно корректно прочесть дату.
Тег <time> дает возможность записывать даты в понятном для роботов формате. Пример выше можно записать так <time datetime=»2013-10-05″>10/05/13</time>. Таким образом, HTML-парсер может безошибочно определить время вне зависимости от форматирования. Также тег <time> позволяет записать время в 24-часовом формате: <time datetime=»2013-10-05 22:00″>10/05/13 at 10 PM</time> .
<mark>
Когда-нибудь делали так?
<p> Вокруг одного из циферблатов <span class="highlighted">часов Зиммера</span> движется самая медленная стрелка в мире — её полный оборот будет длиться 25 800 лет, что соответствует периоду прецессии земной оси… </p>
Что ж, больше не придется. HTML5 ввёл новый элемент <mark>, предназначенный для выделения текста, который в дальнейшем может появляться в ином контексте.
<input>
Да, <input>. Вы, возможно, использовали <input type=»text»> , <input type=»submit»> и может даже <input type=»hidden»>, а как же все остальные? В HTML5 появились новые типы:
- tel
- number
- range
- date
- time
- search
- color
Всё бы хорошо, но убедитесь, что браузеры, под которые вы разрабатываете, поддерживают новые типы. Некоторые из них до сих пор не поддерживаются всеми основными браузерами.
Заключение
HTML становится всё более семантичным с каждым днём. Использование этих элементов позволяет писать более чистую и понятную разметку. Чтобы узнать больше, можете ознакомиться с Периодической таблицей элементов, документацией Mozilla или спецификацией W3C, если вы уже матёрый девелопер 🙂 Успехов!
Оригинальная статья: http://davidwalsh.name/8-html-elements