Лучшие бесплатные шаблоны сайтов!

11 августа 2020 г.

Небольшая подборка редко используемых HTML5-элементов

Привет друзья! Сегодня хотелось бы поговорить о HTML5-элементах, которых делают работу поисковых машин быстрее и позволяют с легкостью считывать структуру документов. А именно про footer, header, aside, main и другие. Спецификация HTML очень велика, и поэтому не мудрено выпустить какие-то полезные элементы из виду. Дальше, мы расскажем вам о 5 HTML-элементах, о которых вы могли не знать.

Элемент переменной var

Variable Element, элемент переменной или просто var представляет собой символ переменной, как уже можно догадаться из названия. Он станет незаменимым помощником в написании статей и руководств, в которых используются математические уравнения.

<code>var <var>y</var> = Math.sqrt;</code>

Этот код является обернутым уравнением, которое реализовано в коде javascript.

 

Элемент отметки mark

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

Элемент образца samp

С помощью элемент samp, вы сможете делать выписки из программы, скрипта или компьютерной системы. Он был представлен еще в версии HTML3 и подойдет для создания технических руководств и мануалов. Например, следующий код позволяет устранить ошибку в терминале:

 

Написав dir в терминале вы получите <samp>command not found: dir</samp>.

Без исключения все браузеры поддерживают этот элемент и отображают его при помощи шрифта Monospace.

Элемент определения dfn

Этот элемент чаще всего используется для выделения в тексте определений и терминов. Приведем пример использования данного элемента на куске текста из Википедии:

 

<dfn>Хлебные крошки</dfn> или <dfn>навигационная цепочка</dfn> это средство помощи пользователю в понимании навигации. Они позволяют пользователю точно определить в любой момент времени, где именно он находится на сайте.  Термин происходит из популярной сказки про Гензель и Гретель.

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

Элемент ввода с клавиатуры kbd

 

А этот HTML-элемент, позволяет определить пользовательский ввод. Обычно он, как и элемент samp используется в связанных с компьютерной и технической тематикой статьях, и также использует шрифт Monospace.

Например, если вы хотите обратить внимание пользователей на то, что для ввода в поле необходимо использовать определенные символы, обернуть текст можно так:

To confirm deletion of your account, type <kbd>DELETE</kbd>.

Также, элемент kbd можно использовать для представления клавиш:

 

Press <kbd>Enter</kbd> to create a new line.

Помимо этого, к элементу kbd можно применять дополнительную стилизацию. Вы можете добавить, к примеру, класс button-input для кнопки приложения или клавиши:

 

.button-input {

border: 1px solid #333;

background: linear-gradient(#aaa 0%, #555 100%); /* W3C */

color: #fff;

padding: 3px 8px;

border-radius: 3px;

box-shadow: 0px 2px 0px 0px #111;

}

Теперь элемент будет похож на кнопку:

Кнопка с помощью HTML

 

 

В завершении хочется сказать, что оборачивание текста в современные и семантические элементы является более эффективным, чем использование div или span. Семантическая разметка лучше читается браузерами.

Эта запись размещена в категории Интернет и помечена как . Сохраните адресс страницы.
Copyright © 2011-2020 - Бесплатные шаблоны сайтов Правила пользования Политика конфиденциальности