Вы знаете эти 8 HTML5 тегов?

Вы знаете эти 8 HTML5 тегов?

От автора: как веб-разработчик вы возможно пытаетесь выжать по максимуму из тегов во время создания нового сайта. И скорее всего вы уже хорошо знаете некоторые из основных HTML5 тегов article, header и footer. Однако вы можете не знать некоторые из менее распространенных тегов.

Некоторые из этих тегов совершенно новые или же изменили назначение из спецификации HTML4. Теги, изменившие свое назначение, могут выглядеть похоже, но им было присвоено новое значение. Теперь их можно применять в совершенно других случаях. Мы пройдемся по каждому тегу, посмотрим, что сказано в спецификации, и рассмотрим примеры их использования. Поехали!

Немного про интерпретацию

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

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

Контекстное выделение с помощью mark

В спецификации mark говорится, что этот тег должен использоваться для обозначения релевантности или привлечения внимания. Что такое релевантность сложно объяснить. Теги и текст релевантны, когда мы что-то делаем на сайте и они нам полезны именно в этот момент (или могут понадобиться в будущем).

К примеру, если вы искали сайт по запросу «jQuery», и вам выпало несколько статей, то результаты поиска можно обернуть тегом mark. Цель тега mark это сказать браузеру «Эй, вот эта штука на сайте подходит под то, что ты сейчас делаешь».

Практические примеры

Тег mark можно использовать для выделения релевантного контента. Чтобы проиллюстрировать пример, рассмотрим следующий сценарий: Мы открыли страницу «Самые дешевые туры». На странице расположена сетка из туров, отсортированных по цене. Туры расставлены по увеличению цены: сверху от самых дешевых и вниз к самым дорогим.

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

<section class="deal-list">
  <article>
    <h2>Vanuatu Cruise</h2>
    <p><mark>$499</mark>- 5 Nights</p>
    <p>A relaxing cruise around the southern most 
    parts of Vanuatu</p>
  </article>
  <article>
    <h2>Fiji Resort Getaway</h2>
    <p><mark>$649</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet and 
    entertainment</p>
  </article>
  <article>
    <h2>Pacific Island Hiking</h2>
    <p>$1199 - 5 Nights</p>
    <p>Hike your way though several pacific islands 
    on this exercise focused holiday</p>
  </article>
</section>

У первых двух результатов цена (которая нам важна) обернута в тег mark. А третий тур, более дорогой, не подсвечен, так как он не релевантен в отличие от двух первых.

Лучшие практики и основные аспекты

Люди в большей своей массе думают, что с помощью этого тега можно быстро что-то выделить, но его назначение не в этом. Его нельзя использовать просто для стилизации, для этого есть другой тег span. Не используйте этот тег для выделения важности текста или чтобы подчеркнуть силу – для этого есть тег strong. Используйте mark, когда хотите показать что-то релевантное конкретному пользователю. Заметка по поводу доступности – подсветка mark отображается в браузере в режиме высокой контрастности Windows.

Уменьшаем важность с помощью small

Вы, скорее всего, раньше уже использовали тег small. Он делает точно то, о чем вы подумали – уменьшает текст. Браузер может уменьшить текст с помощью тега small, но на самом деле это, скорее, побочный продукт данного элемента, а не семантическое значение.

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

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

Практические примеры

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

<footer>
  <small>
    Designed and developed by Simon Codrington.
  </small>
  <small>
    &copy; 2016 My Company - All rights reserved
  </small>
</footer>

Тег small даже можно использовать внутри обычного контента для выделения менее важной его части. К примеру, в списке товаров возле цены продукта можно добавить подпись «без налога»:

<section>
  <article>
    <h3>Woolen Llama Print Jumper</h3>
    <em>$65.99</em><small> - Excludes tax</small>
    <p>
      A warm, woolly jumper made from 100% llamas.
      You will love the warmth.
    </p>
    <button>Add to cart</button>
  </article>
</section>

В общем, если вы хотите уменьшить важность чего-либо, используйте тег small. Не используйте его для простого уменьшения размера.

Лучшие практики и основные аспекты

Нельзя понизить важность или выделение контента, если к нему применены теги strong или em. Тег small изменит визуальную составляющую элемента (в зависимости от браузера), но не затронет семантику.

Цитирование с помощью q и blockquote

Вы скорее всего используете стилизованные div или span для выделения цитат, но лучше использовать q или blockquote. Оба тега предназначены для внешнего цитирования (когда вы что-то цитируете), однако принцип использования у них отличается.

По спецификации тег q нужно использовать для выделения «короткой строчной цитаты» в тексте. А тег blockquote используется для больших кусков текста. На практике же тег q используется для маленьких цитат, а blockquote для всех остальных. Помните, что теги нужно использовать только для цитат или ресурсов. Данные теги нельзя использовать для стилизации (для этого есть span).

Практические примеры

Рассмотрим, как можно использовать оба тега. Если у вас есть маленькая цитата, используйте q:

<div class="big-banner">
  <h2>Try our latest sandwich!</h2>
  <p>Come and try our latest, biggest and tastiest
  sandwich. John Smith told us <q>he hasn't eaten 
  anything as good in his whole life!</q></p>
</div>

Если цитата больше или более сложная, ее можно обернуть тегом blockquote:

<div class="motivational-quote">
  <blockquote 
    cite="http://bit.ly/1pbvjsL">
      Infuse your life with action.
      Don't wait for it to happen.
      Make it happen. Make your own
      future. Make your own hope.
      Make your own love. And
      whatever your beliefs, honor 
      your creator, not by passively 
      waiting for grace to come down 
      from upon high, but by doing 
      what you can to make grace 
      happen... yourself, right now,
      right down here on Earth.
    <cite>Bradley Whitford - Author</cite>
  </blockquote>
</div>

В примере выше длинную цитату мы положили в тег blockquote и использовали атрибут cite (ссылка на ресурс) и тег cite (описание ресурса).

Лучшие практики и основные аспекты

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

Вставка, удаление и исправление с помощью ins, del, и s

Теги ins, del и s полезны, когда вы работаете с контентом, который был изменен или же было изменена его релевантность. Тег ins применяется к тексту, который был недавно добавлен в документ – новый контент. Данный тег можно использовать для выделения добавленного текста или для выделения текста, чья релевантность была изменена.

Тег del применяется к удаленному из документа тексту – удаленный контент. Даже если вы выделяете удаленный контент, он все еще существует в документе в виде записи о том, что было удалено.

У этих двух тегов есть необязательный атрибут cite, который используется для добавления ссылки, где объясняются все изменения. Также есть атрибут datetime, где указывается, когда были произведены изменения. Дата должна быть задана в виде строки времени, которую, к сожалению, не так просто понять. Можно схитрить и воспользоваться timestamp generator.
Эти атрибуты полезны, если вы хотите указать контекст добавления или удаления чего-либо. Увидеть их можно в логах обновлений и списке изменений, где автор перечисляет все изменения и подробности.

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

Практические примеры

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

<h2>Latest Changes</h2>
<p>Outlined below are the latest changes</p>
<h3>Version 1.X branch</h3>
<ins 
  cite="http://www.johnsmithsblog/changes/1-0-1.html" 
  timestamp="2012-08-09T15:15:00+00:00">
    Version 1.0.1 - August 2012
</ins>
<br/>
<ins 
  cite="http://www.johnsmithsblog/changes/1-0-2.html" 
  timestamp="2012-11-15T06:15:00+00:00">
    Version 1.0.2 - November 2012
</ins>
<br/>
<h3>Version 2.X branch</h3>
<ins 
  cite="http://www.johnsmithsblog/changes/2-0-0.html" 
  timestamp="2013-01-17T02:50:00+00:00">
    Version 2.0.0 - January 2013
</ins>
<br/>

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

<ul class="to-do-list">
  <li>
    <del datetime="2015-12-03T13:21:32+00:00">
      Pick up the groceries
    </del>
  </li>
  <li>
    <del datetime="2015-12-03T15:15:00+00:00">
      Collect the kids from school
    </del>
  </li>
  <li>
    Cook dinner
  </li>
  <li>
    Work on fancy side projects
  </li>
</ul>

Видно, что две задачи выполнены, и они были вычеркнуты с помощью тега del. Так мы показываем пользователю и браузеру, что контент больше не существует. Обоим пунктам был добавлен атрибут datetime , с помощью которого записывается дата выполнения задач. Тег s лучше всего использовать, когда контент был удален а затем обновлен, к примеру, во время редактирования документа:

<article class="news-item">
  <h1>WordPress 4.4 Updates</h1>
  <section class="summary" aria-label="Summary">
    WordPress 4.4 (code-named 
      <s cite="https://codex.wordpress.org/Version_4.4">
        Bobby Brown
      </s> Clifford Brown) was released 
      to the public on the 8th of December 2015.
  </section>
  <section class="main-content" aria-label="Main Content">
    <p>There were several changes in V4.4 
    including the following</p>
    <ul>
      <li>
        New default theme - 
        <s>Twenty Fifteen</s> 
        Twenty Sixteen
      </li>
      <li>
        Responsive image support (image elements 
        in the content now support display based 
        rendering)
      </li>
      <li>
        Additional embed object support such as 
        Cloudup, Reddit Comments etc
      </li>
    </ul>
  </section>
</article>

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

Упорядочивание вариантов с помощью optgroup

Тег – один из самых старых, но как ни странно разработчики о нем очень часто забывают. optgroup используется внутри тега select для создания категорий элементов списка options. Если у вас десятки или сотни опций в поле select, очень удобно было бы распределить их по категориям.

Тег optgroup должен быть внутри select и у него должно быть два атрибута: label – название, которое видно, когда список раскрыт, и атрибут disabled, который нужен, когда в списке нельзя выбрать ни один из элементов. Сам тег optgroup нельзя выбрать и стилизовать (по крайней мере, чтобы это было кроссбраузерно).

Практические примеры

optgroup отлично работает в любом случае, когда используется тег select. К примеру, рассмотрим список цен на компьютеры в интернет-магазине.

<label for="comp-price-filter">
  Select the price range of your next computer
</label>
<select 
  class="price-filter" 
  name="comp-price-filter" 
  id="comp-price-filter">
  <optgroup label="Low End">
    <option value="100-300">$100 - $300</option>
    <option value="301-500">$301 - $500</option>
    <option value="501-700">$501 - $700</option>
  </optgroup>
  <optgroup label="Middle Range">
    <option value="701-1200">$701 - $1200</option>
    <option value="1201-1600">$1201 - $1600</option>
  </optgroup>
  <optgroup label="High End">
    <option value="1600-2500">$1600 - $2500</option>
    <option value="2501-3200">$2501 - $3200</option>
  </optgroup>
</select>

Ниже приведен пример с атрибутом disabled, когда нельзя выбрать ни один из пунктов категории (но людей это не сильно остановит, они могут просто удалить его из верстки, так что не особо полагайтесь на него). В примере ниже вы не сможете выбрать пункты в разделе «West Coast – Australia».

<label for="vacation-dest">Vacation Destinations</label>
<select name="vaction-dest" id="vacation-dest">
  <optgroup label="East Coast - Australia">
    <option value="NSW">
      New South Wales
    </option>
    <option value="QLD">
      Queensland
    </option>
    <option value="TAS">
      Tasmania
    </option>
    <option value="ACT">
      Australian Capital Territory
    </option>
    <option value="VIC">
      Victoria
    </option>
  </optgroup>
  <optgroup disabled label="West Coast - Australia">
    <option value="WA">
      Western Australia
    </option>
    <option value="NT">
      Northern Territory
    </option>
    <option value="SA">
      South Australia
    </option>
  </optgroup>
</select>

Предварительно заданные опции с помощью datalist

Одна из самых крутых вещей у тега select, как и у radio / checkbox инпут типов это то, что он ограничивает количество возможных предварительно заданных опций пользователями.

Теперь для различных input’ов можно использовать тег datalist для создания подходящего списка опций. В разных браузерах данный компонент выглядит немного по-разному, но везде он отображается в виде маленькой стрелки выпадающего списка справа от поля, которая показывает, что у данного элемента есть опции. При нажатии на данный пункт обычно выпадают опции. Пользователь может начать вбивать название, и если есть подходящие опции, то они покажутся снизу (К примеру, в поле с опцией Chrome вы пишите «Chr», тогда «Chrome» отобразится снизу). Элемент еще в стадии разработки, но уже работает.

Практические примеры

Если вы хотите создать список URL, которые пользователь может выбрать, можно создать datalist и связать его с вашим полем input:

<label for="favourite-sites">
  Select your favorite website!
</label>
<input 
  type="url" 
  name="favourite-sites" 
  id="favourite-sites" 
  list="site-list"/>
<datalist id="site-list">
  <option value="http://www.google.com.au">
  <option value="http://www.reddit.com">
  <option value="http://www.sitepoint.com">
</datalist>

Заметки и основные аспекты

Тег datalist будет выполнять проверку на основе атрибута type тега input. К примеру, если вы выбрали type=»email» и привязали datalist к тегу, то опции должны соответствовать типу email. Тег использует умную обработку, которая облегчит вам контроль за значениями.

Тег datalist достаточно хорошо поддерживается в браузерах, однако Apple решили вовсе отказаться от него (и в десктопной версии и в iOS). Microsoft поддерживает данный тег с IE10 и далее (в мобильном IE поддержка отсутствует). Если поддержка отсутствует, элементы input вернутся в нормальный режим.

Небольшое предупреждение – данный компонент немного забагованный. К примеру, если пометить input атрибутом required и не вбить значение, форма не будет отправляться пока не будет выбрано значение (как и ожидается). Но если вы вручную вобьете значение (даже если оно неверно) и отправите форму, это не вызовет ошибку – просто ничего не произойдет.

Заключение

Надеюсь, вы узнали про один или два полезных тега из этой статьи и теперь можете использовать их в своих будущих сайтах! В общем и целом, семантика данных элементов понятна. Некоторые будут настаивать, что элемент Х нужно использовать способом Z, чтобы это было «правильно». Некоторые из тегов еще в разработке и в будущем вам придется искать наилучшее для них применение.

Мы всегда очень интересуемся тегом input, и если вы знаете какие-то полезные редко используемые теги, мы бы хотели узнать, как вы их используете.

Автор: Simon Codrington

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree