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

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

Но спецификации HTML огромны. Если вы посетите W3.org там, где находится документация, вы найдете сотни страниц, подробно описывающих каждый элемент. В этом смысле, возможно, есть несколько элементов HTML, которые вы пропустили, и к ним относятся:

Рекомендуемое чтение: получение местоположения пользователя с помощью API геолокации HTML5

1. Пример элемента

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

Если вы введете dir в Terminal, он выведет команда не найдена: dir,

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

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

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

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

Чтобы подтвердить удаление вашей учетной записи, введите УДАЛЯТЬ,

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

Нажмите Войти создать новую линию.

Но при использовании вместе с элементом семпла он может представлять ввод, который осуществляется через экран приложения, такой как кнопки или меню. Вот один пример:

щелчок Согласен продолжать.

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

… правильное горячее слово Google на самом деле не отключено в зависимости от региона
и может быть легко включен всего за два шага.

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

Мы можем добавить класс, например, кнопочный ввод, если он представляет клавиатуру или кнопку приложения.

Затем в CSS мы помещаем следующие правила стиля.

.button-input {
граница: 1px solid # 333;
фон: линейный градиент (#aaa 0%, # 555 100%); / * W3C * /
цвет: #fff;
обивка: 3px 8px;
радиус границы: 3 пикселя;
тень от рамки: 0px 2px 0px 0px # 111;
}

Это заставит это выглядеть как фактическая кнопка.

3. Переменный элемент

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

var y = Math.sqrt(16);

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

4. Определение элемента

Определение элемента или dfn используется для выделения жаргона или конкретного термина, который особенно используется в сообществе или отрасли. Например, индустрия веб-разработки полна жаргона, который может быть не очень известен за пределами отрасли.

А ниже приведен пример, в котором мы используем элемент dfn для переноса слова Breadcrumb; мы взяли следующее предложение Википедия,

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

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

5. Марк Элемент

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

Для получения дополнительной информации вы можете перейти к его документации, Семантический уровень текста – элемент Mark, где вы можете увидеть некоторые подробные примеры использования.

Последняя мысль

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