10 почти наверняка не применяемых вами тэгов HTML

Дата публикации: 2014-02-14

От автора: Несомненно, в качестве разработчика пользовательского интерфейса вы постоянно пользуетесь HTML и, может быть, думаете, что в нем для вас не осталось ничего неизведанного. Тем не менее, его развитие (особенно при наступлении эры HTML5) иногда способно удивлять. В этой статье я покажу вам 10 тэгов HTML, которыми вы, может быть, не пользуетесь, и даже не знаете, как они помогают улучшить семантику и сопровождаемость ваших веб-страниц.

meter

Рано или поздно вам может понадобиться внедрить в страницу единицу измерения. Это может оказаться все, что угодно – от результатов экзамена до коэффициента загрузки диска. HTML5 знакомит нас с новым элементом под названием meter, представляющим скалярное измерение в известном диапазоне или дробную величину.

Как определяет этот элемент спецификация, meter не подходит для измерения чего-либо вроде внешней температуры — потому что у него отсутствует постоянный диапазон (его можно задать, но он случаен). У этого элемента есть несколько атрибутов. Самые обычные: value, min и max. Первый применяется для обозначения единицы измерения, тогда как два остальных используются для определения диапазона. Так, если нужно обозначить, что у жесткого диска вместимостью 500Gb, а занято 300Gb, то можно написать:

<meter value="300" min="0" max="500">300Gb of 500Gb</meter> occupied.

1	<meter value="300" min="0" max="500">300Gb of 500Gb</meter> occupied.

progress

С незапамятных времен разработчики создавали виджеты для уведомления пользователей о ходе загрузки или выполнения задания. Сейчас для этого есть «родной» тэг HTML5 с названием progress. У него два атрибута: value (для определения состояния выполнения) и max (для обозначения максимально достижимого значения). Если значение max не установлено, предполагается диапазон от 0 до 1 и значение может колебаться между ними. Так, чтобы показать индикатор выполнения задания на 50%, можно написать:

<progress value="50" max="100">50%</progress>

1	<progress value="50" max="100">50%</progress>

Или эквивалент:

<progress value="0.5">50%</progress>

1	<progress value="0.5">50%</progress>

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

cite и q

При написании текстов нам часто требуется процитировать книгу, статью или чье-то высказывание. На бумаге мы обычно пользуемся двойными кавычками (“…”) для определения границ цитирования вместе с предлогами из или согласно, определяющими, кого мы цитируем или из какого источника взята цитата.

Для обозначения цитаты в HTML5 есть q, а источника — cite. Обратите внимание, что до последнего времени cite можно было использовать только для обозначения названия работы (книги, статьи, фильма и т.д.), но не автора. Однако этот недостаток устранен, и теперь его можно также использовать для цитирования людей. У тэга q есть атрибут с названием cite, который дает возможность обозначать ссылку на источник цитаты.

Теперь для примера давайте предположим, что нам нужно сослаться на знаменитую цитату Эзры Паунда (Ezra Pound) (мою любимую). С помощью HTML мы написали бы:

Мы должны бороться за свои права, потому что, как сказал <cite>Эзра Паунд</cite>,
<q>Если человек не собирается рисковать за свои убеждения, то либо его убеждения ничего не стоят, либо он сам – нестоящий человек.</q>

1 2	Мы должны бороться за свои права, потому что, как сказал <cite>Эзра Паунд</cite>, <q>Если человек не собирается рисковать за свои убеждения, то либо его убеждения ничего не стоят, либо он сам – нестоящий человек.</q>

pre

Элемент pre дает возможность показать предварительно форматированный текст таким, каким он появляется в источнике. Это означает, что множество символов пробела не свернутся в один (меняя при этом метод по умолчанию, которым браузеры обрабатывают пробелы). Этот тэг идеален, когда вам нужно показать фрагмент кода, так как сохраняет отступы. Например, у вас на странице может быть нечто вроде этого:

<pre><code>
function sayHello(name) {
    for (var i = 0; i < 3; i++) {
        console.log('Hi ' + name + '!');
    }
}
 
sayHello('Aurelio');

function sayHello(name) {

for (var i = 0; i < 3; i++) {

console.log('Hi ' + name + '!');

}

sayHello('Aurelio');

kbd и samp

Если вы – технический автор, то часто обсуждаете инструменты и методики, требующие применения терминала или командной строки. Вполне возможно, что вам понадобится показать результат таких команд. Эта ситуация идеально подходит для kbd и samp. Первый представляет пользовательский ввод данных, но не ограничивается вводом с клавиатуры. Последний представляет образец вывода программы или компьютерной системы. Эти элементы хорошо работают с представленным выше элементом pre. Пример их использования, аналогичный приведенному в спецификации, следующий:

<samp><span>jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com
<span class="prompt">jdoe@demo:~$</span> _</samp>

<samp><span>jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>

Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com

small

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

Эта статья представлена вам Aurelio De Rosa <small>Copyright © 2014</small>

1	Эта статья представлена вам Aurelio De Rosa <small>Copyright © 2014</small>

output

Тэг output представляет результат вычисления. Его основной атрибут — for, содержащий список отделенных пробелами ID элементов, задействованных в вычислении, или воздействующих на него иным образом. Этот элемент – именно то, что требуется вебсайту, предлагающему что-нибудь вроде стоимости автомобилей или расценок на страхование жизни.

Чтобы увидеть его в действии, представьте, что на сайте вашей компании имеется виджет, где пользователи могут определить количество инвестиций в вашу компанию взамен на определенный ежегодный процент. В подобной ситуации можно сделать форму с помощью элемента output, как показано ниже:

<form id="form-calculation">
    
  <label for="amount">Amount:</label> <input id="amount" type="number"/>
  <label for="percentage">Percentage:</label>
  <input id="percentage" type="number">
 
  <label for="years">Years:</label>
  <input id="years" type="number">
 
  <input type="submit" value="Submit">
 
  <label for="total">Total:</label>
  <output id="total" for="amount percentage years"></output>
</form>
<script>
function calculateTotal(amount, percentage, years) {
   for(var i = 0; i < years; i++) {
      amount += amount * percentage / 100;
   }
 
   return amount;
}
document.getElementById('form-calculation').addEventListener('submit', function(event) {
      event.preventDefault();
 
      document.getElementById('total').textContent = calculateTotal(
         Number(document.getElementById('amount').value),
         Number(document.getElementById('percentage').value),
         Number(document.getElementById('years').value)
      );
   },
   false
);
</script>

<label for="amount">Amount:</label> <input id="amount" type="number"/>

<label for="percentage">Percentage:</label>

<label for="years">Years:</label>

<label for="total">Total:</label>

</form>

function calculateTotal(amount, percentage, years) {

for(var i = 0; i < years; i++) {

amount += amount * percentage / 100;

}

return amount;

}

document.getElementById('form-calculation').addEventListener('submit', function(event) {

event.preventDefault();

document.getElementById('total').textContent = calculateTotal(

Number(document.getElementById('amount').value),

Number(document.getElementById('percentage').value),

Number(document.getElementById('years').value)

);

false

);

</script>

dfn (На десерт)

Перед обсуждением этого элемента хочу кое в чем вам признаться. Решив написать эту статью, я начал думать, какие стоит включить в нее тэги. Дойдя до 9-го пункта своего списка, я решил, что было бы неплохо добавить под конец что-нибудь особенное. Поэтому просмотрел список тэгов HTML5 и вот вам моя реакция.

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

<dfn>HTML</dfn> это основной язык разметки веб-контента.

1	<dfn>HTML</dfn> это основной язык разметки веб-контента.

В данном случае мы дали определение термину HTML, который является аббревиатурой. Можно расширить разметку, написав:

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> это основной язык разметки веб-контента.

1	<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> это основной язык разметки веб-контента.

Чтобы выбрать, чем является определяемый термин, стандарт устанавливает приоритетный список из трех пунктов. Приоритет отдается тому, что определяется в атрибуте title тэга dfn. Затем идет то, что определяется в элементе abbr, дочернем dfn (как видно из второго примера). Последний приоритет отдается тексту элемента dfn (показано в первом примере).

В заключение

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

Автор: Aurelio De Rosa

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

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

Метки: HTML5