5 HTML элементов которые вы не знаете

Раньше я рассматривал плюсы HTML5. Новые элементы, такие как <header>, <footer>, <nav> и <main> сделали структуру документа семантической и «значимой». Данные элементы помогают поисковым роботам лучше понимать структуру документа. Но HTML элементов очень много, и, возможно, некоторые вы могли не заметить.

5 HTML элементов которые вы не знаете

1. Элемент <samp>

Этот элемент используется для вывода результата какого-либо скрипта. Элемент был введен еще в HTML3. Ниже вы можете увидеть пример использования данного тега:

1

<p>Результат выполнения скрипта <samp>ЗДЕСЬ РЕЗУЛЬТАТ</samp> вы увидите в теге samp.</p>

Тег поддерживает даже Internet Explorer 5. Он отображает текст в моноширинном шрифте как теги <pre> и <code>

2. Элемент <kbd>

Тег используется для того, чтобы задать текст который набирается на клавиатуре или названия клавиш:

1

<p>Нажмите <kbd>ENTER</kbd> для создания нового аккаунта.</p>

По умолчанию данный тег также имеет моноширинный шрифт.

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

1
2
3
4
5
6
7
8

kbd {
    border: 1px solid #333;  
    background: linear-gradient(#aaa 0%, #555 100%);
    color: #fff;  
    padding: 3px 8px;  
    border-radius: 3px;  
    box-shadow: 0px 2px 0px 0px #111;
}

3. Элемент <var>

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

1

<p>Переменная  <var>y</var> равна 30.</p>

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

4. Элемент <dfn>

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

1

<p>Слово <dfn>инновация</dfn> происходит от латинского inovatis (in - в, novus - новый) и в переводе означает «обновление, новинку, изменение».</p>

И в браузере выглядит это так — обычный курсив:

5. Элемент <mark>

Тег <mark> это новый элемент, который был введен в HTML5:

1

<p>В <mark>этом месте</mark> я хочу заострить ваше внимание!</p>

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

Вывод

Я думаю данная статья была полезна для вас и вы узнали что-то новое. Обязательно примените это на практике, чтобы закрепить полученные знания.

Успехов!

С Уважением, Юрий Немец

Источник: http://www.hongkiat.com/blog/html-tag-that-you-probably-dont-know/