Не все теги HTML одинаковы.

Как интерфейсный разработчик, вы, несомненно, постоянно используете HTML и, вероятно, чувствуете, что в нем больше нет ничего неизвестного. Тем не менее, его развитие (в частности, с появлением HTML5) временами может вас удивить.

Я покажу вам 10 тегов HTML, которые вы, возможно, не используете или даже не знаете, которые помогают улучшить семантику и удобство обслуживания ваших веб-страниц.

Основные семантические теги HTML, такие как <header>, <footer> и <nav>, почти не требуют пояснений. Но есть множество новых HTML-тегов, которые нам также необходимо использовать.

1 раз

Этот тег позволяет отображать на ваших веб-страницах машиночитаемую дату и / или время.

Поскольку вы можете просто размещать дату и время на странице, вы можете задаться вопросом, зачем вам вообще использовать временную метку. Простой ответ заключается в том, что, хотя вы можете отображать дату и время на своей странице различными способами, бывают случаи, когда вы можете захотеть, чтобы браузер четко понимал, что такое дата и / или время. Используя атрибут datetime тега <time>, вы можете убедиться, что ясно, что дата и / или время представлены. Что еще более важно, используя сценарии или другое кодирование, вы можете получить доступ к этому машиночитаемому формату и использовать его для вычислений и многого другого.

Тег <time> и его атрибут datetime поддерживаются всеми основными браузерами, включая Google Chrome 6.0+, Internet Explorer / Edge 9.0+, Safari 5.0+ Firefox 4.0+ и Opera 11.1+.

<p>Our party is going to be <time datetime="2018-08-11 17:00">the eleventh of August at 5:00pm</time></p>
Preview
Our party is going to be the eleventh of August at 5:00pm

2- DataList

<datalist>tag обеспечивает интерфейс автозаполнения для <input>elements. Каждый список содержит набор <option> элементов, имеющих связанное значение. При связывании с <input> с использованием атрибута «список» он может предоставлять раскрывающийся список или даже отображать предложения по мере ввода пользователем.

<label for="tutorial_choice">Tutorials: </label>
  <input list="tutorial_types" name="tutorial_choice" id="tutorial_choice">

  <datalist id="tutorial_types">
    <option value="HTML">
    <option value="CSS">
    <option value="SQL">
  </datalist>

Предварительный просмотр

3- Шаблон

<template> используется для хранения фрагментов кода HTML, которые можно клонировать и вставлять в документ HTML.

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

Браузер обрабатывает содержимое <template>element при загрузке страницы, чтобы убедиться, что код действителен.

Шаблоны могут быть размещены где угодно внутри <head>, <body> или <frameset> и могут содержать любой тип контента, который разрешен в этих элементах.

<template>tag - новый элемент в HTML5.

Все в <template>element анализируется как обычный HTML. Однако есть исключения:

  • Он не отображается.
  • <script>tags в нем не работают.
  • <style>tags в нем не оцениваются.
  • Внешние ресурсы не отображаются.
  • Содержимое этого элемента не считается документом. Если на главной странице используется document.getElementById () или querySelector (), дочерние узлы шаблона не будут возвращены.
<template id="myTemplate">
<p>Template content</p> 
</template>     
<div id="normalContent"> 
  <p>First paragraph</p>  
</div>     
<!-- JavaScript function clones the template and adds it to the document. -->
    <button onclick="useTemplate();">Show content</button>     <script>
function useTemplate() {
var myTemplate = document.getElementById('myTemplate');               normalContent = document.getElementById('normalContent');           clonedTemplate = myTemplate.content.cloneNode(true);           normalContent.appendChild(clonedTemplate);} 
</script>

Предварительный просмотр

4- OptGroup

<optgroup>tag - отличный способ добавить небольшое определение между группами параметров внутри поля выбора. Например, если вам нужно сгруппировать списки фильмов по времени, это будет выглядеть так:

<label for="showtimes">Showtimes</label>
<select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select>

Предварительный просмотр

5- ‹abbr›

<abbr>tag используется вместе с атрибутом заголовка, чтобы связать полнотекстовое объяснение с аббревиатурой или акронимом. Посетители веб-сайта не видят текст в атрибуте title, но браузеры, поисковые системы и вспомогательные технологии используют эту информацию.

<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.

Предварительный просмотр

6- Sup

Тег <sup> используется для идентификации текста, который должен располагаться в верхнем индексе относительно окружающего текста.

<p>This text contains <sup>superscript</sup> text.</p>

Предварительный просмотр

7- Ins & Del

<ins>tag подчеркивает то, что было добавлено в документ, а <del>tag показывает, что было убрано с зачеркиванием.

John <del>likes</del> <ins>LOVES</ins> his new iPod.

Предварительный просмотр

8- Прогресс

<progress>tag отображает ход выполнения задачи.

Он имеет два атрибута: value (для указания состояния выполнения) и max (для указания максимального достижимого значения). Если значение max не задано, предполагается диапазон от 0 до 1, а value может быть любым числом с плавающей запятой в этом диапазоне. Итак, чтобы показать индикатор выполнения задачи, выполненной на 50%, вы можете написать:

<progress value="50" max="100">50%</progress>
Or equivalently:
<progress value="0.5">50%</progress>

Предварительный просмотр

9- Pre

Тег <pre> позволяет нам отображать предварительно отформатированный текст в том виде, в котором он представлен в исходном тексте. Это означает, что несколько символов пробела не будут свернуты в один (изменение способа обработки пробелов браузерами по умолчанию). Этот тег идеален, когда вам нужно показать фрагмент кода, потому что он помогает сохранить отступы. Например, на странице у нас может быть что-то вроде этого:

<pre><code>
function sayHello(name) {
for (var i = 0; i &lt; 3; i++) {
console.log('Hi ' + name + '!');
}
}
sayHello('Aurelio');
</code></pre>

Предварительный просмотр

10- Подробности

<details>tag создает виджет раскрытия информации, в котором информация видна только тогда, когда виджет переключен в «открытое» состояние. Сводка или метка могут быть предоставлены с помощью элемента <summary>.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Предварительный просмотр

Надеюсь, вы расширите свои знания с помощью этих HTML-тегов.

Если я пропустил важные HTML-теги, не стесняйтесь вносить предложения ❤