10 тэгов HTML, которые вы, вероятно, не используете
Как фронт-энд разработчик, вы, несомненно, постоянно используете язык HTML и, возможно, уверены, что вам о нём известно всё.
Тем не менее, то, как он изменился (особенно с внедрением HTML5), может сильно вас удивить.
В этой статье я покажу вам 10 тэгов HTML, которые вы, скорее всего, не используете, или даже не знаете о них. В то же время, они могут помочь вам улучшить семантику и упростить поддержку ваших веб-страниц.
1. <meter>
В некоторых случаях нам необходимо представить некоторую меру на веб-странице. Она может быть любой, от результата экзамена до использования дискового пространства.
В HTML5 введён новый элемент <meter>, который представляет собой скалярное измерение в пределах известного диапазона или дробное значение.
Согласно этому определению, элемент <meter> не подходит для обозначения, например, уличной температуры, потому что она не имеет фиксированного диапазона (вы можете его определить, но он будет произвольным).
Этот элемент имеет несколько атрибутов.
Наиболее часто используемые: value, min и max. Первый используется для обозначения меры, два других – для диапазона.
Поэтому, если вы хотите обозначить, что жёсткий диск размером в 500Гб заполнен на 300Гб, вы можете написать:
<meter value="300" min="0" max="500">300Гб из 500Гб</meter>.2. <progress>
С незапамятных времён разработчики создавали виджеты, чтобы уведомить пользователя о прогрессе в загрузке файла или в выполнении некоторой задачи.
Сегодня для этого существует специальный тэг HTML5, который называется <progress>. У него есть два атрибута: value (чтобы обозначить текущий прогресс) и max (чтобы обозначить значение, которого необходимо достигнуть).
Если значение max не задано, по умолчанию подразумевается диапазон от 0 до 1 и значение value может быть любым дробным числом в этом диапазоне.
Поэтому, чтобы создать полоску прогресса задания, выполненного на 50%, вы можете написать:
<progress value="50" max="100">50%</progress>Или аналогично:
<progress value="0.5">50%</progress>Текст внутри элемента используется для обратной совместимости с устаревшими браузерами. Обычно этот элемент используется не в статичном варианте, а с подключением JavaScript или CSS анимации, чтобы проиллюстрировать непрерывный процесс.
3 и 4. <cite> и <q>
При написании какого-то текста, нам часто требуется цитировать книги, статьи или людей. В рукописном варианте мы обычно используем двойные кавычки (“…”) для выделения цитаты и сноски, чтобы обозначить, кого или какой источник мы цитируем.
В HTML5 появились тэги <q> для обозначения цитат и <cite> для обозначения источника. Заметьте, что до недавнего времени тэг <cite> мог быть использован только для обозначения названия работы (книги, статьи, фильма и т.д.), а не автора.
Однако он был доработан, и теперь мы можем «цитировать» и людей. Тэг <q> имеет атрибут cite, который позволяет нам указать ссылку на источник цитаты.
Итак, например, мы хотим процитировать знаменитую цитату Эзры Паунда (мою любимую цитату).
Используя код HTML, мы напишем так:
Мы должны бороться за свои права, потому что, как когда-то сказал <cite>Эзра Паунд</cite>, <q>Если человек не готов идти на риск, чтобы отстоять свою позицию, тогда либо эта позиция недостаточно хороша, либо недостаточно хорош человек.</q>5. <pre>
Элемент позволяет выводить на экран заранее отформатированный текст так, как он представлен в источнике. То есть несколько пробелов не будут заменены одним (это меняет обычный способ обработки пробелов браузером).
Этот тэг идеален, когда вам требуется вывести блок кода, так как он помогает сохранять отступы.
Например, мы можем написать что-нибудь вроде:
<pre><code>
function sayHello(name) {
for (var i = 0; i > 3; i++) {
console.log('Привет, ' + name + '!');
}
}
sayHello('Аурелио');
</code></pre>6 и 7. <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>8. <small>
До HTML5 элемент <small> использовался только в презентационных целях, чтобы представить текст, написанный более мелким шрифтом. В HTML5 тэг <small> приобрёл некоторое семантическое значение.
Теперь элемент <small> представляет мелкий текст, которым обычно печатаются различные разъяснения ответственности, предостережения, правовые ограничения или информация об авторских правах.
Пример использования этого тега приведён ниже:
Эта статья написана Аурелио Де Роса <small>Все права защищены © 2014</small>9. <output>
Тэг <output> представляет собой результат вычислений. Главный его атрибут – for, который содержит список значений ID элементов, участвующих в вычислениях.
Этот элемент – то, что вам нужно, когда вы хотите сделать страницу с расчётом стоимости покупки или страховых расценок.
Чтобы увидеть элемент output в действии, представьте, что у вас есть страница веб-сайта вашей компании, где пользователь может указать сумму инвестиций в вашу компанию в обмен на некоторый ежегодный процент возврата инвестиций.
Для этого вы можете использовать форму с элементом output, код которой приведён ниже:
<form id="form-calculation">
<label for="amount">Сумма:</label> <input id="amount" type="number"/>
<label for="percentage">Процент:</label>
<input id="percentage" type="number">
<label for="years">Кол-во лет:</label>
<input id="years" type="number">
<input type="submit" value="Отправить">
<label for="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>10. (Глазурь на торте)
Перед тем, как перейти к этому элементу, я должен кое-в-чём признаться. Когда я решил написать эту статью, я начал думать, какие тэги в неё включить. Когда я добрался до 9го тэга в моём списке, я подумал, что неплохо бы было включить что-то особенное в качестве заключения.
Теперь, когда вы знаете, что я случайно наткнулся на тэг <dfn>, мы можем перейти к его описанию. Элемент dfn позволяет нам определить некоторое понятие.
В его простейшей форме, он содержит понятие, которому вы хотите дать определение, заключённое в параграф, список описаний или секцию, содержащую определение. Чтобы понять концепцию, допустим, что мы создаём страницу с описанием языка HTML и хотим дать ему определение.
Чтобы это сделать с помощью тэга <dfn>, мы можем написать:
<dfn>HTML</dfn> - это основной язык, использующийся для создания веб-страниц.В этом случае мы определили понятие HTML, которое является аббревиатурой. Поэтому мы можем усовершенствовать нашу разметку, написав:
<dfn><abbr title="HyperText Markup Language (Язык Разметки ГиперТекста)">HTML</abbr></dfn> - это основной язык, использующийся для создания веб-страниц.Для выбора определяемого понятия стандартом предусмотрен порядок из трех пунктов. Сначала приоритет отдаётся значению атрибута title тэга <dfn>.
Затем тому, что определено в элементе abbr, который является потомком dfn (как показано во втором примере). И наименьшим приоритетом обладает текст элемента dfn (как показано в первом примере).
Заключение
В этой статье мы обсудили несколько тэгов HTML, которые редко используются и о которых часто забывают. Я советую вам перечитывать полный список доступных тэгов HTML время от времени.
Так вы будете обновлять ваши знания о семантических элементах и, возможно, откроете для себя несколько сюрпризов (как я открыл для себя тэг <dfn>).