Главная

8 HTML элементов, которые вы не используете (а следовало бы)

2013-12-03 в 14:16, admin, рубрики: html, html5, Веб-разработка, переводы, семантическая разметка, метки: html5, семантическая разметка

Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

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

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

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

<q>

Подобно своему блочному двоюродному брату <blockquote>, тег <q> используется для обозначения цитирования.

Почему же просто не использовать кавычки? Кавычки не всегда подразумевают цитирование. Иногда они используются для смыслового выделения, иронии или обозначения названия чего-либо — и в этом контексте, они используются правильно. Однако, если вы цитируете что-то, <q> явно выражает ваше намерение.

<i> и <b>

В старые добрые времена, теги <i> и <b> обозначали текст выделенный, соответственно, курсивом и жирным шрифтом. Когда же идея об отделении семантики от представления стала набирать обороты, к этим тегом стали относиться с подозрением. Их заменили на теги <em> и <strong>, обозначающие соответственно эмфазис и сильный эмфазис.

В HTML5, наконец, эти теги получили отличную семантическую интерпретацию. Тегом <i> помечается текст, у которого отличается тон или настроение. Это полезно, например, для описания мыслей или технических терминов. Тег <b> помечает текст, который стилистически отличается от обычного текста, но не имеет какого-либо выделенного семантического значения. Чем это отличается от использования <span>? Ключ в том, что <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, в Южной Африке это 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>
  Three hundred pages of boring, useless text. <span class="highlight">The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff…
</p>

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

<input>

Да, <input>. Вы, вероятно, используете <input type=«text»>, <input type=«submit»>, может быть даже <input type=«hidden»>, а вы когда-нибудь использовали другие типы? В HTML5 <input> может использовать с целой кучей новых типов:

email
tel
number
range
date
time
search
color

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

<menu>

Вы когда-нибудь делали меню из ненумерованного списка?

<ul class="menu-toolbar">
  <li class="new">New</li>
  <li class="open">Open</li>
  <li class="save">Save</li>
  <li class="quit">Quit</li>
</ul>

Больше так не делайте! Для этого есть <menu>, который представляет собой неупорядоченый список команд. У этого тега есть атрибут type, который может принимать значения: popup или toolbar.

<menu type="toolbar">
  <li class="new">New</li>
  <li class="open">Open</li>
  <li class="save">Save</li>
  <li class="quit">Quit</li>
</menu>

Бонус

Большинство фронтенд-разработчиков используют   при написании HTML, но многие не знают его истинного значения. Неразрывный пробел не разрывает строку. Это означает, что если два слова соединены неразрывным пробелом, они всегда будут вместе на одной строке. Иногда это очень важно. Вот несколько примеров:

Единицы измерения: 12 m/s
Время: 8 PM
Имена собственные: Dairy Queen

Так же существует неразрывный дефис (‑), для аналогичных целей.

В заключение

HTML день ото дня становится все более и более семантическим. Использование всех этих элементов — неплохой старт для написания более доступной понятной разметки. Для более полной картины гляньте Periodic Table of the Elements, Mozilla Developer Network documentation ну или если вы чувствуете себя совсем уверено — W3C's HTML specification. Наслаждайтесь!

От переводчика: оригинал — davidwalsh.name/8-html-elements

Автор: bestbomberman

Источник