HTML5 теги которые редко используются

В этой статье Вы увидите; 8 тегов HTML, которые также можно использовать в содержании веб-сайта/приложения как и семантические теги HTML. HTML5 теги, которые Вы редко используете, могут помочь Вам, с экономить время в написании кода и повысить качество веб-страниц.

Элемент HTML5 <meter>

Если когда нибудь, Вам потребуется отобразить на веб-странице числовые значения чего либо. Это может быть что угодно;  результаты измерений,  свободное пространство жесткого диска и т.д… Для этого в HTML5 введен новый элемент, называется он <meter>

Элемент <meter> имеет несколько атрибутов. Наиболее распространенные из них: value , min , и max . Первый используется, чтобы указать размер, а два других используются для указания диапазона.  Вот неплохой пример с использованием элемента  <meter> термометр HTML5 .

Если Вам нужно показать, сколько свободного места на  жестком диске, общий объемом которого 750Gb, код можно написать так:



Свободно <meter value="300" min="0" max="750">300Gb из 750Gb</meter>


Элемент HTML5 <progress>

Веб-разработчики всегда создавали иконки процесса загрузки, чтобы дать понять пользователю что вызов приложения обрабатывается. Сначала для этого применяли изображение GIF скрипты JS, Ajax . Теперь, для процесса загрузки веб-разработчики используют тег HTML5 который называется <progress> . Пример использования тега HTML5 <progress> для процесса загрузки с помощью CSS3 анимации.

Тег <progress> имеет два атрибута:

  1. value — свойство загрузки
  2. max — максимальное значение

Если значение не достигнуто максимального значения, value может быть в пределах диапазона от 0 до 1. Чтобы показать индикатор выполнения задач на 50%, Вы можете написать:



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


Или по-другому:



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


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

Элементы HTML5 <cite> и <q>

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

В HTML5 существует тег <q> для того что бы в тексте выделить цитату, и тег <cite> чтобы указать источник цитаты. Отметим, что до недавнего времени тег <cite> можно было использовать только, чтобы указать название работы (книги, статьи, фильма и т.п.), но не человека. Но, теперь мы можем использовать его (со ссылкой) и для цитаты человека. Тег <cite> позволяет нам указать ссылку на источник цитаты.

Для примера, предположим, что мы хотим привести известную цитату философа Конфуций (моя любимая фраза).

В HTML, мы должны написать:



Как сказал китайский мыслитель и философ <cite href=
http://pixelcom.crimea.ua/"ссылка на источник цитаты">Конфуций</cite>:
<q>Единственная настоящая ошибка - не исправлять своих прошлых ошибок.</q>


Элементы HTML5 <kbd> и <samp>

Если ты Tech Writer (Технический писатель), и часто обсуждаешь инструменты и методы, которые требуют использование терминала или команды shell, и, Вам также нужно видеть результат этих команд. Для этой ситуация подходят теги <kbd> и <samp> . Которые отображают пользователю, ввод с клавиатуры. Эти элементы хорошо работают с известным элементом pre .

Пример использования этих элементов, используемые в спецификации:



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


Элемент HTML <small>

Элемент HTML5 <small> был только для презентации, использовался для написания слов, со шрифтом меньшего размера. В HTML5 элемент <small> имеет некоторое смысловое значение. Теперь элемент <small> представляет собой текст для печати, как ограничения, правовые ограничения, или авторские права.

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



Эту запись подготовил для вас Виктор Клим <small> © 2014</small>


Элемент HTML5 <dfn>

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

Чтобы использовать тег <dfn> , нужно написать:



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


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



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


Заключение

В этой статье мы рассмотрели несколько тегов HTML, которые редакторы веб-сайтов используют очень редко. Я предлагаю вам ознакомиться с полным списком тегов HTML. Таким образом, вы сможете обновить свои знания элементов, которые помогут вам повысить качество вашей веб-страницы.

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

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

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