24.06.14, 22:40
0 комментарий
  Разное

5 HTML-элементов, о которых вы, возможно, не слышали

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

Однако HTML-спецификация очень объемна! Если вы откроете W3.org, где располагается документация, то обнаружите сотни страниц документации, где по-отдельности расписан каждый элемент. Ввиду этого, может быть такое, что вы упустили из виду какие-нибудь полезные HTML-элементы.

1. Элемент образца (Sample Element)

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

If you type dir in Terminal, it will output <samp>command not found: dir</samp>.


Все браузеры, включая IE5, поддерживают данный элемент, в котором текст будет отображаться с использованием шрифта Monospace (как это можно видеть в случае с использованием ‘code’ и ‘pre’).

5 HTML-элементов, о которых вы, возможно, не слышали


2. Элемент ввода с клавиатуры (Keyboard Input)

Элемент ввода с клавиатуры или kbd – это тот элемент, который позволяет определить пользовательский ввод. Подобно элементу samp, kbd зачастую используется в технических или связанных с компьютерами статьях.

Предположим, вы хотите проинструктировать читателей в о том, что в поле ввода в приложении нужно вводить определенные символы. Вы можете обернуть текст при помощи kbd следующим образом:

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


kbd также можно использовать для представления клавиш клавиатуры.

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


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

Click <kbd><samp>Agree</samp></kbd> to proceed.


Даже несмотря на то, что элемент kbd описывают как элемент ввода с клавиатуры, мы также можем использовать его и с другими типами ввода, будь то голосовое управление или что-то вроде этого. Если вы создаете руководства или мануалы при помощи Siri, Google Voice или Cortana, которые позволяют нам возаимодействовать с нашим устройством при помощи голосовых команд, то оболочу для голосового управления следует реализовать следующим образом:

...the <kbd>Ok Google</kbd> hotword isn't actually disabled according to region 
and can be easily enabled in just two steps.


Подобно samp, kbd также использует шрифт Monospace.

Предложения по стилизации

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

Мы можем добавить класс, к примеру, button-input, если элемент должен представлять клавишу клавиатуры или кнопку приложения.

Таким образом, в CSS-код нужно поместить следующие правила:

.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;
}


Это сделает элемент похожим на кнопку.

5 HTML-элементов, о которых вы, возможно, не слышали


3. Элемент переменной (Variable Element)

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

<code>var <var>y</var> = Math.sqrt(16);</code>


В вышеприведенном примере мы оборачиваем уравнение в элемент code, так как уравнение реализовано в коде javascript. Мы оборачиваем только тот символ переменной в элемент var.

4. Элемент определения (Defining Element)

Элемент определения или dfn используется для выделения выражений или определенных терминов, которые используются в сообществе или в конкретной сфере. Индустрия веб-разработки, к примеру, полна жаргонизмов, которые вряд ли будут понятны людям из обычной жизни.

И ниже приведен пример, где мы используем элемент dfn для того, чтобы обернуть слово breadcrumb (пер. – «хлебные крошки»; прим. авт. – определенный тип меню навигации). Здесь мы берем определенное предложение из ресурса Wikipedia.

<dfn>Breadcrumbs</dfn> or <dfn>breadcrumb trail</dfn> is a navigation aid 
used in user interfaces. It allows users to keep track of their locations within programs or documents. 
The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.


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

5 HTML-элементов, о которых вы, возможно, не слышали


5. Элемент отметки (Mark Element)

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

5 HTML-элементов, о которых вы, возможно, не слышали


Более того, вы можете перейти к документации, Text Level Semantic - Mark Element, где можно видеть несколько практических примеров применения.

В завершение

Вместо применения случайных элементов вроде div или span, гораздо лучше оборачивать ваш контент в современные и более семантические элементы, которые лучше читаются браузерами. Будь то приложение, бот или электронная читалка, - все они гораздо лучше справляются с семантической разметкой. Надеемся, что данная статья будет для вас отличной отправной точкой!

Напишите своё мнение