1. Элемент образца (Sample Element)
Элемент образца или samp позволяет нам делать выписки из компьютерной системы, программы или скрипта. И элемент этот был представлен еще в HTML3! Этот элемент отлично подходит для технических руководств или мануалов. Нижеприведенный пример отлично демонстрирует нам, как мы можем представить ошибку, возникшую в терминале.
If you type dir in Terminal, it will output command not found: dir.Все браузеры, включая IE5, поддерживают данный элемент, в котором текст будет отображаться с использованием шрифта Monospace (как это можно видеть в случае с использованием ‘code’ и ‘pre’). 
2. Элемент ввода с клавиатуры (Keyboard Input)
Элемент ввода с клавиатуры или kbd – это тот элемент, который позволяет определить пользовательский ввод. Подобно элементу samp, kbd зачастую используется в технических или связанных с компьютерами статьях.Предположим, вы хотите проинструктировать читателей в о том, что в поле ввода в приложении нужно вводить определенные символы. Вы можете обернуть текст при помощи kbd следующим образом:
To confirm deletion of your account, type DELETE.kbd также можно использовать для представления клавиш клавиатуры.
Press Enter to create a new line.Однако если использовать его вместе с элементом samp, он способен представить элемент ввода в виде кнопок или меню, управление которыми происходит посредством окна приложения. Давайте рассмотрим пример:
Click Agree to proceed.Даже несмотря на то, что элемент kbd описывают как элемент ввода с клавиатуры, мы также можем использовать его и с другими типами ввода, будь то голосовое управление или что-то вроде этого. Если вы создаете руководства или мануалы при помощи Siri, Google Voice или Cortana, которые позволяют нам возаимодействовать с нашим устройством при помощи голосовых команд, то оболочу для голосового управления следует реализовать следующим образом:
...the Ok Google 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;
}Это сделает элемент похожим на кнопку. 
3. Элемент переменной (Variable Element)
Элемент переменной или var, как понятно из названия, представляет символ переменной. Этот элемент может отлично подойти для написания руководств и статей, в которых использутся математические уравнения:
var y = Math.sqrt(16);В вышеприведенном примере мы оборачиваем уравнение в элемент code, так как уравнение реализовано в коде javascript. Мы оборачиваем только тот символ переменной в элемент var.
4. Элемент определения (Defining Element)
Элемент определения или dfn используется для выделения выражений или определенных терминов, которые используются в сообществе или в конкретной сфере. Индустрия веб-разработки, к примеру, полна жаргонизмов, которые вряд ли будут понятны людям из обычной жизни.И ниже приведен пример, где мы используем элемент dfn для того, чтобы обернуть слово breadcrumb (пер. – «хлебные крошки»; прим. авт. – определенный тип меню навигации). Здесь мы берем определенное предложение из ресурса Wikipedia.
Breadcrumbs or breadcrumb trail 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. Элемент отметки (Mark Element)
Элемент mark был представлен как часть спецификации HTML5. Вкратце, он используется для выделения текста, на который вы хотели бы обратить внимание посетителей. По умолчанию, браузеры отображают этот элемент с использованием яркой флуоресцентной подсветки, как можно видеть на примере ниже. 
Более того, вы можете перейти к документации, Text Level Semantic — Mark Element, где можно видеть несколько практических примеров применения.
В завершение
Вместо применения случайных элементов вроде div или span, гораздо лучше оборачивать ваш контент в современные и более семантические элементы, которые лучше читаются браузерами. Будь то приложение, бот или электронная читалка, — все они гораздо лучше справляются с семантической разметкой. Надеемся, что данная статья будет для вас отличной отправной точкой!