Как разработчик внешнего вида, вы, несомненно, постоянно используете HTML и, вероятно, чувствуете, что в нем больше нет неизвестных. Тем не менее, способ его развития (в частности, с появлением HTML5) может иногда удивлять вас. В этой статье я покажу вам 10 HTML-тегов, которые вы, возможно, не используете или, возможно, даже еще не знаете, которые помогают повысить семантику и удобство обслуживания ваших веб-страниц.
1. <метр>
В какой-то момент нам может понадобиться выразить меру на веб-странице. Это может быть что угодно, от результата экзамена до использования диска. HTML5 представил новый элемент под названием <meter> который представляет скалярное измерение в известном диапазоне или дробное значение.
Исходя из определения этого элемента в спецификации, <meter> не годится для измерения чего-то вроде внешней температуры — потому что у него нет фиксированного диапазона (вы можете определить это, но это произвольно). Этот элемент имеет несколько атрибутов. Наиболее распространенными из них являются: value , min и max . Первый используется для указания меры, а два других используются для указания диапазона. Итак, если вы хотите указать, что на жестком диске 500 ГБ занято 300 ГБ, вы можете написать:
<meter value="300" min="0" max="500">300Gb of 500Gb</meter> occupied.
2. <прогресс>
С незапамятных времен разработчики создавали виджеты, чтобы уведомлять пользователей о ходе загрузки или задачи. Сегодня для этого есть собственный тег 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 который позволяет нам указать ссылку на источник цитаты.
Теперь для примера, скажем, мы хотим привести известную цитату из Ezra Pound (моя любимая цитата). Используя HTML, мы написали бы:
We should fight for our rights because, as <cite>Ezra Pound</cite> said, <q>If a man isn't willing to take some risk for his opinions, either his opinions are no good or he's no good.</q>
5. <pre>
Элемент <pre> позволяет нам отображать предварительно отформатированный текст так, как он выглядит в источнике. Это означает, что несколько символов пробела не будут объединены в один (изменяя способ, которым браузеры обрабатывают пробелы по умолчанию). Этот тег идеально подходит для отображения фрагмента кода, поскольку он помогает сохранить отступы. Например, на странице у нас может быть что-то вроде этого:
<pre><code> function sayHello(name) { for (var i = 0; i < 3; i++) { console.log('Hi ' + name + '!'); } } sayHello('Aurelio'); </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. <маленький>
До HTML5 элемент <small> был только презентационным и использовался для написания слов меньшим шрифтом. В HTML5 <small> имеет некоторое семантическое значение. Теперь элемент <small> представляет текст, часто встречающийся мелким шрифтом, такой как заявления об отказе, предостережения, юридические ограничения или авторские права. Пример его использования показан ниже:
9. <вывод>
Тег <output> представляет результат вычисления. Его основной атрибут — for , который содержит список разделенных пробелами идентификаторов элементов, которые были включены в расчет или которые иным образом повлияли на расчет. Этот элемент именно то, что вам нужно, если у вас есть веб-сайт, который предлагает что-то вроде цен на автомобили или страхования жизни.
Чтобы увидеть это в действии, представьте, что на веб-сайте вашей компании есть виджет, где пользователи могут указывать сумму, которая будет инвестироваться в вашу компанию в обмен на определенный процент в обмен на ежегодный доход. Исходя из этой ситуации, у вас может быть форма с использованием элемента 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>
10. <dfn> (глазурь на торте)
Прежде чем говорить об этом элементе, я хочу признаться в чем-то. Когда я решил написать эту статью, я начал думать о том, какие теги включить. Когда я добрался до 9-го тега в моем списке, я подумал, что было бы неплохо добавить что-то особенное в качестве заключения. Итак, я решил просмотреть список тегов HTML5 и вот моя реакция .
Теперь, когда вы знаете, как я наткнулся на <dfn> , мы можем перейти к описанию этого тега. Элемент dfn позволяет нам определить термин. В своей простейшей форме он содержит термин, который вы хотите определить, а затем оберните его абзацем, группой списка описаний или разделом, содержащим определение. Чтобы понять концепцию, допустим, что мы пишем страницу, где описываем HTML, и мы хотим ее определить. Для этого с помощью <dfn> мы можем написать:
<dfn>HTML</dfn> is the primary language for marking up web content.
В данном случае мы определили термин HTML , который является аббревиатурой. Итак, мы могли бы улучшить нашу разметку, написав:
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the primary language for marking up web content.
Чтобы выбрать, какой термин определен, стандарт определяет список приоритетов, состоящий из 3 пунктов. Приоритет отдается любому значению, указанному в атрибуте title тега <dfn> . Затем мы имеем то, что определено в дочернем элементе abbr элемента dfn (как показано во втором примере) Последний приоритет относится к тексту элемента dfn (как показано в первом примере).
В заключение
В этой статье мы обсудили ряд тегов HTML, которые используются реже и часто забываются. Я предлагаю вам прочитать полный список тегов HTML, доступных время от времени. Таким образом, вы освежите свои знания о семантических элементах и, возможно, вы найдете сюрприз на этом пути (как я сделал с <dfn> ).