5 устаревших фишек в HTML5

28-го октября 2014 года HTML5 официально стал рекомендацией W3C. Это конечно, не новая тема, и многие разработчики знают об особенностях HTML5: семантике, доступности, всевозможных API, и так далее.

Тем не менее, в процессе эволюции стандарта, были добавлены некоторые элементы, атрибуты и API-интерфейсы, а затем изменены или вовсе устранены. Именно поэтому в нашей области так трудно идти в ногу со всеми новостями и обновлениями. Многие из Вас, возможно, не успели уследить за тем какие фишки HTML5 были признаны устаревшими или удалены. В этой статье мы рассмотрим основную пятёрку.

Устаревший и Нежелательный

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

Спецификация HTML 4.01 определяет нежелательные элементы (deprecated), как то, что Вы не должны использовать, но что до сих пор поддерживается браузерами. В свою очередь, устаревшие элементы - это то, что занесено в список только в исторических целях и не поддерживается браузерами.

Спецификация HTML5 даёт новое определение. Термин нежелательный (deprecated) уже не используется, а у терминаустаревший (obsolete) новый смысл. В частности, термин, устаревший, можно применить к элементам или атрибутам, в следствии использования которых возникают предупреждения. Хотя данные элементы не рекомендуемы, вполне возможно, что браузеры будут их поддерживать в течение длительного времени, в соответствии с принципом обратной совместимости. Примерами устаревших особенностей являются атрибут border элемента img и атрибут name элемента a.

Ещё один пример разницы этих терминов в HTML 4.01 и HTML5: элемент font является нежелательным в HTML 4.01, и устарел в HTML5.

Учитывая это, давайте обсудим основную пятёрку устаревших элементов.

1. Элемент hgroup

Спецификация определяет hgroup, как элемент, используемый для группировки набора из одного или нескольких элементов h1-h6, например, названий разделов и сопутствующих подзаголовков.

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

Я был поклонником этого элемента, с тех пор, как о нём узнал, но, к сожалению, в апреле 2013 г. он был удален из спецификации консорциума W3C.

Пример его использования приведен ниже:

<article>
   <hgroup>
      <h1>5 deprecated features of HTML5</h1>
      <h2>Sometimes specifications are changed
      and you need to refactor your code</h2>
   </hgroup>
   <p>In this article we'll discuss...</p>
</article>

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

<article>
   <h1>
       5 deprecated features of HTML5
       <span>Sometimes specifications are changed
       and you need to refactor your code</span>
   </h1>
   <p>In this article we'll discuss...</p>
</article>

Другие возможные варианты можно найти в спецификации HTML5.1.

Теперь, с учетом выше-сказанного, хоть это и странно, но WHATWG версия спецификации по-прежнему включаетhgroup.

2. Атрибут pubdate

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

Пример использования показан ниже:

<article>
  <h1>The title of my article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc laoreet luctus rhoncus.</p>
  <footer>
    <p>Published on <time datetime="2014-10-25" pubdate>October the 25th, 2014</time></p>
  </footer>
</article>

В этом случае, 25 октября 2014 будет датой публикации контента внутри элемента article.

К сожалению, pubdate был удален из спецификации. Тем не менее, Вы можете по-прежнему указать данную информацию с помощью схемы BlogPosting и его значения datePublished, как показано в следующем примере:

<article itemscope itemType="http://schema.org/BlogPosting">
  <h1 itemprop="headline">The title of my article</h1>
  <p itemprop="articleBody">Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc laoreet luctus rhoncus.</p>

  <footer>
    <p>Published on <time datetime="2014-10-25" itemprop="datePublished">October the 25th, 2014</time></p>
  </footer>
</article>

3. Атрибут scoped

Атрибут scoped - это ещё один флаг, предназначен для использования в элементе style, что позволяет указать, что CSS внутри атрибута style ограничен в применении к содержанию внутри родительского элемента.

Его цели: добавление стилей, которые необходимы только для ограниченного набора элементов на странице, или добавление пользовательских стилей в wiki или CMS.

Scoped также предназначен, для того, чтобы сделать содержание "портативным", чтобы Вы могли взять весь фрагмент HTML из одного документа, и поместить его в новый документ (возможно с помощью JavaScript).

Пример его использования приведён ниже:

<article>
  <h1>The title of my article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Nunc laoreet luctus rhoncus.</p>
  <section>
    <style scoped>
      p {
         color: red;
      }
    </style>
    <h2>Another title</h2>
    <p>This paragraph will be red.</p>
  </section>
</article>

В то время, поддержка scoped была убрана из Chrome, но он, по прежнему, поддерживается в Firefox.

4. Элемент command

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

Пример его использования, взятый со страницы MDN, показан ниже:

<command type="command" label="Save"
         icon="icons/save.png" onclick="save()">

5. Элемент center

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

В HTML5, этот элемент считается устаревшим из-за его презентационной натуры.

Вывод

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

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