Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.
<abbr title="HyperText Markup Language">HTML</abbr> был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.
abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - формальный язык описания внешнего вида документа (веб-страницы).</p>
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
<address>
Автор статьи: <a href="mailto:ivan@mail.com">Иван Иванов</a><br />
Официальный сайт: <a href="http://example.com" target="_blank" rel="noopener noreferrer">Example.com</a><br />
Адрес: некоторое царство, некоторое государство
<address>
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
Для определения аудио-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type).
Текст между <audio> и </audio> отображается только в случае, когда браузер не поддерживает элемент audio.
В настоящее время поддерживается три формата аудио: MP3, WAV и OGG.
Атрибуты:
<audio controls>
Ваш браузер не поддерживает элемент "audio".
</audio>
<!-- или -->
<audio src="music.mp3" preload="metadata" controls muted loop>Ваш браузер не поддерживает элемент "audio".</audio>
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Для определения видео-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type).
Текст между <video> и </video> отображается только в случае, когда браузер не поддерживает элемент video.
В настоящее время поддерживается три формата видео: MP4, WebM и OGG.
Атрибуты:
<video width="320" height="240" controls>
Ваш браузер не поддерживает элемент "видео".
</video>
<!-- или -->
<!-- Такой вариант может использоваться для воспроизведения видео в качестве фона страницы -->
<video src="movie.mp4" autoplay muted loop>Ваш браузер не поддерживает элемент "видео".</video>
DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video.
Тег base определяет основной путь (URL) и/или цель (target) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
<head>
<base href="http://example.com/" target="_blank">
</head>
<body>
<header>
<nav>
<!-- http://example.com/product.html -->
<a href="product.html">Продукт</a>
</nav>
</header>
<main>
<!-- http://example.com/images/happy_face.png -->
<img src="images/happy_face.png" alt="" />
</main>
<footer>
<nav>
<!-- http://example.com/contacts.html -->
<a href="contacts.html">Контакты</a>
</nav>
</footer>
</body>
Тег blockquote определяет раздел страницы, заимствованный из другого источника. Источник указывается в атрибуте cite.
<blockquote cite="https://ru.wikipedia.org/wiki/JavaScript">
JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
</blockquote>
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
<p>Для более глубокого изучения JavaScript советую взглянуть на <cite>"Вы не знаете JS"</cite> Кайла Симпсона.</p>
Тег code используется для определения части компьютерного кода:
<p>HTML-тег `button` определяет кликабельную кнопку.</p>
<p>CSS-свойство `background-color` определяет цвет фона элемента.</p>
Для форматирования блока кода code часто используется совместно с тегом pre:
<pre>
`
const name = prompt('Как Вас зовут?')
if (name?.trim()) alert(`Привет, ${name}!`)
else console.info('Пользователь пожелал остаться неизвестным')
`
</pre>
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать "автозавершение" для элемента input: при установке фокуса на такое поле пользователь видит выпадающий список.
Атрибут id тега datalist должен совпадать с атрибутом list тега input.
<!-- Атрибут `for` тега `label` должен совпадать с атрибутом `id` тега `input` -->
<label for="browser">Выберите Ваш браузер из списка:</label>
<input list="browsers" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt, определяющим понятие или термин, и dd, определяющим описание термина.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
<dl>
<dt>Кофе</dt>
<dd>Черный горячий напиток</dd>
<dt>Молоко</dt>
<dd>Белый холодный напиток</dd>
</dl>
Тег details определяет раскрывающийся список с дополнительной информацией. Он часто используется для создания интерактивных виджетов, которые можно открывать и закрывать без использования JavaScript. В открытом состоянии он расширяется и показывает скрытый контент.
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Для отображения заголовка details используется тег summary.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector('[open]')).
<details>
<summary>Заголовок - видимая часть элемента "details"</summary>
<p>Скрытый контент - дополнительная информация</p>
</details>
Тег dialog определяет диалоговое окно. Он используется для создания "попапов" и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
Индикатором активного состояния dialog является атрибут open.
<dialog open>Открытое диалоговое окно</dialog>
Для управления объектом Dialog с помощью JavaScript используются такие методы как show(), close() и showModal(), а также свойство open.
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
Для добавление подписи к figure используется тег figcaption.
<figure>
<img src="v8-compiler-pipeline.png" alt="V8 compiler pipeline" style="width:100%">
<figcaption>Рис. 1 - Процесс компиляции кода "движком" JavaScript V8.</figcaption>
</figure>
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Для обеспечения доступности совместно с meter рекомендуется использовать тег label.
Атрибуты:
<label for="disk_d">Использование диска "D":</label>
<meter id="disk_d" min="0" max="100" value="60">60%</meter>
Так можно записать уровень заряда батареи вашего устройства в значение meter:
// <meter id="meter" max="100"></meter>
if ('getBattery' in navigator) {
navigator.getBattery()
.then(({ level }) => {
meter.value = level * 100
})
}
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Для обеспечения доступности совместно с progress рекомендуется использовать тег label.
Атрибуты:
<label for="file">Процесс загрузки:</label>
<progress id="file" max="100" value="32">32%</progress>
Так можно реализовать десятисекундный таймер:
// <progress id="progress" value="0" max="10"></progress>
const timerId = setInterval(() => {
progress.value += 1
if (progress.value === progress.max) {
progress.remove()
clearInterval(timerId)
}
}, 1000)
Тег output используется для представления результата вычислений.
Атрибуты:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="25" />
+
<input type="number" id="b" value="50" />
=
<output name="x" for="a b">75</output>
</form>
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
Элемент picture содержит два тега: один или более source и один img.
Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source.
Путь к изображению указывается в атрибуте srcset, а медиа-запрос — в атрибуте media.
<picture>
\<source media="(min-width:768px)" srcset="big.jpg"/>
\<source media="(min-width:480px)" srcset="small.jpg"/>
<img src="default.jpg" alt="" style="width:auto;"/>
</picture>
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Контент внутри template может быть отрендерен с помощью JavaScript.
<template>
<h1>Заголовок</h1>
<p>И какой-то текст</p>
</template>
<button id="button">Это не кнопка</button>
((body, { content }) => {
button.onclick = () => {
body.append(content.cloneNode(true))
}
})(document.body, document.querySelector('template'))
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
<p>Некоторые люди искренне верили в то, что в <time datetime="2000-01-01 00:01">полночь 2000 года</time> наступит конец света, но, как видите, свет продолжается. Возможно, он закончится в <time datetime="3000-01-01 00:01">полночь 3000 года</time>, но это не точно</p>
Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript. Он может использоваться как в теге head, так и в теге body. В первом случае noscript может содержать только такие теги как link, style и meta.
<script>
document.write('Одни дивы да спаны... Где семантика?')
</script>
<noscript>Пожалуйста, включите JavaScript</noscript>
<body>
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</nav>
<img src="images/logo.png" alt="" />
</header>
<aside>
<h2>Aside Title</h2>
<p>Aside Content</p>
</aside>
<main>
<article>
<h2>Atricle Title</h2>
<section>
<h3>Section Title</h3>
<p>Section Content</p>
</section>
</article>
<div>
<section>
<h2>Section2 Title</h2>
<p>Section2 Content</p>
</section>
<section>
<p>Section3 Content</p>
</section>
</div>
</main>
<footer>
<nav>
<ol>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ol>
</nav>
<div>
<p>Block text & <span>inline text</span></p>
</div>
</footer>
</body>
<p>
Текст может быть
<b>полужирным</b>,
<strong>полужирным и "важным"</strong>,
<i>"наклонным"</i>,
<em>наклонным и важным</em>,
<small>маленьким</small>,
<del>удаленным из документа</del>,
<ins>вставленным в документ</ins>,
<u>подчеркнутым</u>
<s>неправильным</s>.
Он может представлять собой
<q>короткую цитату</q>,
<kbd>ввод с клавиатуры</kbd>,
<samp>вывод программы</samp>.
Текст может находиться
<sup>над строкой</sup> и
<sub>под ней</sub>.
Наконец, он может быть <mark>помеченным</mark>.
Длинныйтекстможноразделять<wbr />внужномместе.
Его можно переносить<br />на новую строку и разделять<hr />горизонтальной чертой.
</p>
Символ / означает или.
<form
action="URL"
autocomplete="on / off"
enctype=""
id="form"
method="GET / POST"
name="form"
novalidate
>
<fieldset>
<legend>Title</legend>
<label for="first_name">Имя:</label>
<input type="text" id="first_name">
<label>Фамилия:
<input type="text">
</label>
</fieldset>
<select
autofocus
disabled
form="form"
multiple
name="select"
required
size="10"
>
<optgroup label="Group1">
<option
value="option1"
disabled
label="option1"
></option>
<option value="option2" selected></option>
</optgroup>
<optgroup label="Group2" disabled>
<option value="option3"></option>
</optgroup>
<option value="option4"></option>
</select>
<textarea
autofocus
cols="30"
disabled
form="form"
maxlength="50"
name="textarea"
placeholder="Введите текст..."
readonly
required
rows="10"
wrap="hard / soft"
></textarea>
<button
type="submit"
autofocus
disabled
form="form"
formaction="URL"
formenctype=""
formmethod="GET / POST"
formnovalidate
name="submit"
>
Кнопка для отправки формы
</button>
<button type="reset">Кнопка для сброса формы (очистки полей для ввода данных)</button>
<button type="button">Просто кнопка</button>
</form>
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (значение по умолчанию)
<input type="time">
<input type="url">
<input type="week">
Атрибуты:
Пример валидации адреса электронной почты и пароля:
<form>
<input
type="email"
id="email"
name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
required
/>
<input
type="password"
id="password"
name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Пароль не может быть меньше 8 символов и должен содержать одну цифру, одну прописную (заглавную) букву и одну строчкую букву"
required
/>
<input type="submit" />
</form>
<table>
<caption>
Table Title
</caption>
<colgroup>
<col span="2" />
<col />
</colgroup>
<thead>
<tr>
<th
abbr="H1"
colspan="2"
rowspan="2"
scope="col / colgroup / row / rowgroup"
>
Heading1
</th>
<th>Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</tfoot>
</table>
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Мы рассмотрели почти все существующие HTML-теги. С полным списком можно ознакомиться здесь или здесь. Во многих публикациях упоминаются теги map и area, но с их использованием сопряжено несколько проблем (сложность реализации карты, зависимость областей от координат и т.д.), поэтому я оставил их без внимания. Также существуют такие теги, как svg и canvas, предназначенные для работы с графикой, но для рассказа о каждом из них требуется отдельная статья (и даже не одна).
Источник статьи: https://habr.com/ru/company/macloud/blog/555400/
abbr
Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.
<abbr title="HyperText Markup Language">HTML</abbr> был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.
abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - формальный язык описания внешнего вида документа (веб-страницы).</p>
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
<address>
Автор статьи: <a href="mailto:ivan@mail.com">Иван Иванов</a><br />
Официальный сайт: <a href="http://example.com" target="_blank" rel="noopener noreferrer">Example.com</a><br />
Адрес: некоторое царство, некоторое государство
<address>
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
Для определения аудио-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type).
Текст между <audio> и </audio> отображается только в случае, когда браузер не поддерживает элемент audio.
В настоящее время поддерживается три формата аудио: MP3, WAV и OGG.
Атрибуты:
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления (без этого атрибута элемент audio, скорее всего, не будет отображаться на странице)
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay)
- preload — определяет, должен ли аудио-контент загружаться после загрузки страницы. Возможные значения: auto, metadata, none. Значение none не позволит работать с аудио с помощью JavaScript
- src — путь к аудиофайлу
<audio controls>
Ваш браузер не поддерживает элемент "audio".
</audio>
<!-- или -->
<audio src="music.mp3" preload="metadata" controls muted loop>Ваш браузер не поддерживает элемент "audio".</audio>
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Для определения видео-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type).
Текст между <video> и </video> отображается только в случае, когда браузер не поддерживает элемент video.
В настоящее время поддерживается три формата видео: MP4, WebM и OGG.
Атрибуты:
- autoplay — автовоспроизведение (блокируется большинством браузеров)
- controls — панель управления
- loop — определяет, что воспроизведение, после завершения, начнется сначала
- muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay)
- preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto, metadata, none. Значение none не позволит работать с видео с помощью JavaScript
- src — путь к видеофайлу
- poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
- width — ширина элемента в пикселях
- height — высота элемента в пикселях
<video width="320" height="240" controls>
Ваш браузер не поддерживает элемент "видео".
</video>
<!-- или -->
<!-- Такой вариант может использоваться для воспроизведения видео в качестве фона страницы -->
<video src="movie.mp4" autoplay muted loop>Ваш браузер не поддерживает элемент "видео".</video>
DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video.
base
Тег base определяет основной путь (URL) и/или цель (target) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
- href — основной путь
- target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank, _parent, _self и _top
<head>
<base href="http://example.com/" target="_blank">
</head>
<body>
<header>
<nav>
<!-- http://example.com/product.html -->
<a href="product.html">Продукт</a>
</nav>
</header>
<main>
<!-- http://example.com/images/happy_face.png -->
<img src="images/happy_face.png" alt="" />
</main>
<footer>
<nav>
<!-- http://example.com/contacts.html -->
<a href="contacts.html">Контакты</a>
</nav>
</footer>
</body>
blockquote и cite
Тег blockquote определяет раздел страницы, заимствованный из другого источника. Источник указывается в атрибуте cite.
<blockquote cite="https://ru.wikipedia.org/wiki/JavaScript">
JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
</blockquote>
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
<p>Для более глубокого изучения JavaScript советую взглянуть на <cite>"Вы не знаете JS"</cite> Кайла Симпсона.</p>
code
Тег code используется для определения части компьютерного кода:
<p>HTML-тег `button` определяет кликабельную кнопку.</p>
<p>CSS-свойство `background-color` определяет цвет фона элемента.</p>
Для форматирования блока кода code часто используется совместно с тегом pre:
<pre>
`
const name = prompt('Как Вас зовут?')
if (name?.trim()) alert(`Привет, ${name}!`)
else console.info('Пользователь пожелал остаться неизвестным')
`
</pre>
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать "автозавершение" для элемента input: при установке фокуса на такое поле пользователь видит выпадающий список.
Атрибут id тега datalist должен совпадать с атрибутом list тега input.
<!-- Атрибут `for` тега `label` должен совпадать с атрибутом `id` тега `input` -->
<label for="browser">Выберите Ваш браузер из списка:</label>
<input list="browsers" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
dl, dt и dd
Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt, определяющим понятие или термин, и dd, определяющим описание термина.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
<dl>
<dt>Кофе</dt>
<dd>Черный горячий напиток</dd>
<dt>Молоко</dt>
<dd>Белый холодный напиток</dd>
</dl>
details
Тег details определяет раскрывающийся список с дополнительной информацией. Он часто используется для создания интерактивных виджетов, которые можно открывать и закрывать без использования JavaScript. В открытом состоянии он расширяется и показывает скрытый контент.
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Для отображения заголовка details используется тег summary.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector('[open]')).
<details>
<summary>Заголовок - видимая часть элемента "details"</summary>
<p>Скрытый контент - дополнительная информация</p>
</details>
dialog
Тег dialog определяет диалоговое окно. Он используется для создания "попапов" и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
Индикатором активного состояния dialog является атрибут open.
<dialog open>Открытое диалоговое окно</dialog>
Для управления объектом Dialog с помощью JavaScript используются такие методы как show(), close() и showModal(), а также свойство open.
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
Для добавление подписи к figure используется тег figcaption.
<figure>
<img src="v8-compiler-pipeline.png" alt="V8 compiler pipeline" style="width:100%">
<figcaption>Рис. 1 - Процесс компиляции кода "движком" JavaScript V8.</figcaption>
</figure>
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Для обеспечения доступности совместно с meter рекомендуется использовать тег label.
Атрибуты:
- value — текущее числовое значение между min и max
- min — нижняя числовая граница диапазона
- max — верхняя числовая граница диапазона
- low — верхняя числовая граница нижнего предела диапазона. Должна быть больше min, но меньше high и max
- high — нижняя числовая граница верхнего предела диапазона
- optimum — оптимальное числовое значение между min и max. Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если optimum находится между min и low, значит, предпочтительным является нижний диапазон
- form — определяет элемент form, с которым связан meter
<label for="disk_d">Использование диска "D":</label>
<meter id="disk_d" min="0" max="100" value="60">60%</meter>
Так можно записать уровень заряда батареи вашего устройства в значение meter:
// <meter id="meter" max="100"></meter>
if ('getBattery' in navigator) {
navigator.getBattery()
.then(({ level }) => {
meter.value = level * 100
})
}
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Для обеспечения доступности совместно с progress рекомендуется использовать тег label.
Атрибуты:
- max — максимальное значение. По умолчанию равняется 1
- value — текущее значение
<label for="file">Процесс загрузки:</label>
<progress id="file" max="100" value="32">32%</progress>
Так можно реализовать десятисекундный таймер:
// <progress id="progress" value="0" max="10"></progress>
const timerId = setInterval(() => {
progress.value += 1
if (progress.value === progress.max) {
progress.remove()
clearInterval(timerId)
}
}, 1000)
output
Тег output используется для представления результата вычислений.
Атрибуты:
- for — определяет связь между результатом и элементами, используемыми для его выичсления
- form — определяет элемент form, которому принадлежит output
- name — название элемента output
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="25" />
+
<input type="number" id="b" value="50" />
=
<output name="x" for="a b">75</output>
</form>
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
Элемент picture содержит два тега: один или более source и один img.
Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source.
Путь к изображению указывается в атрибуте srcset, а медиа-запрос — в атрибуте media.
<picture>
\<source media="(min-width:768px)" srcset="big.jpg"/>
\<source media="(min-width:480px)" srcset="small.jpg"/>
<img src="default.jpg" alt="" style="width:auto;"/>
</picture>
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Контент внутри template может быть отрендерен с помощью JavaScript.
<template>
<h1>Заголовок</h1>
<p>И какой-то текст</p>
</template>
<button id="button">Это не кнопка</button>
((body, { content }) => {
button.onclick = () => {
body.append(content.cloneNode(true))
}
})(document.body, document.querySelector('template'))
time
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
<p>Некоторые люди искренне верили в то, что в <time datetime="2000-01-01 00:01">полночь 2000 года</time> наступит конец света, но, как видите, свет продолжается. Возможно, он закончится в <time datetime="3000-01-01 00:01">полночь 3000 года</time>, но это не точно</p>
noscript
Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript. Он может использоваться как в теге head, так и в теге body. В первом случае noscript может содержать только такие теги как link, style и meta.
<script>
document.write('Одни дивы да спаны... Где семантика?')
</script>
<noscript>Пожалуйста, включите JavaScript</noscript>
Другие теги в форме шпагралок
Семантическое "секционирование" страницы
<body>
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</nav>
<img src="images/logo.png" alt="" />
</header>
<aside>
<h2>Aside Title</h2>
<p>Aside Content</p>
</aside>
<main>
<article>
<h2>Atricle Title</h2>
<section>
<h3>Section Title</h3>
<p>Section Content</p>
</section>
</article>
<div>
<section>
<h2>Section2 Title</h2>
<p>Section2 Content</p>
</section>
<section>
<p>Section3 Content</p>
</section>
</div>
</main>
<footer>
<nav>
<ol>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ol>
</nav>
<div>
<p>Block text & <span>inline text</span></p>
</div>
</footer>
</body>
Стилизация текста
<p>
Текст может быть
<b>полужирным</b>,
<strong>полужирным и "важным"</strong>,
<i>"наклонным"</i>,
<em>наклонным и важным</em>,
<small>маленьким</small>,
<del>удаленным из документа</del>,
<ins>вставленным в документ</ins>,
<u>подчеркнутым</u>
<s>неправильным</s>.
Он может представлять собой
<q>короткую цитату</q>,
<kbd>ввод с клавиатуры</kbd>,
<samp>вывод программы</samp>.
Текст может находиться
<sup>над строкой</sup> и
<sub>под ней</sub>.
Наконец, он может быть <mark>помеченным</mark>.
Длинныйтекстможноразделять<wbr />внужномместе.
Его можно переносить<br />на новую строку и разделять<hr />горизонтальной чертой.
</p>
Форма
Символ / означает или.
<form
action="URL"
autocomplete="on / off"
enctype=""
id="form"
method="GET / POST"
name="form"
novalidate
>
<fieldset>
<legend>Title</legend>
<label for="first_name">Имя:</label>
<input type="text" id="first_name">
<label>Фамилия:
<input type="text">
</label>
</fieldset>
<select
autofocus
disabled
form="form"
multiple
name="select"
required
size="10"
>
<optgroup label="Group1">
<option
value="option1"
disabled
label="option1"
></option>
<option value="option2" selected></option>
</optgroup>
<optgroup label="Group2" disabled>
<option value="option3"></option>
</optgroup>
<option value="option4"></option>
</select>
<textarea
autofocus
cols="30"
disabled
form="form"
maxlength="50"
name="textarea"
placeholder="Введите текст..."
readonly
required
rows="10"
wrap="hard / soft"
></textarea>
<button
type="submit"
autofocus
disabled
form="form"
formaction="URL"
formenctype=""
formmethod="GET / POST"
formnovalidate
name="submit"
>
Кнопка для отправки формы
</button>
<button type="reset">Кнопка для сброса формы (очистки полей для ввода данных)</button>
<button type="button">Просто кнопка</button>
</form>
Поля для ввода данных
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (значение по умолчанию)
<input type="time">
<input type="url">
<input type="week">
Атрибуты:
- accept — MIME-тип принимаемых файлов (только для type="file"). Значения: расширение, например, .png, audio/*, video/*, image/*, медиа тип, например, json
- alt — подпись
- autocomplete — on / off
- autofocus
- checked — только для type="checked" или type="radio"
- disabled
- form
- formaction — только для type="submit" или type="image"
- formenctype — только для type="submit" или type="image". Значения: application/x-www-form-urlencoded, multipart/form-data, text/plain
- formmethod — только для type="submit" или type="image" (get / post)
- formnovalidate — отключает проверку элементов формы
- formtarget — определяет, где отображается ответ, полученный после отправки формы (только для type="submit" или type="image"). Значения: _blank, _self, _parent, _top, название фрейма
- height — высота в пикселях (только для type="image")
- list
- max — максимальное значение (число или дата)
- maxlength — максимальная длина строки (количество символов)
- min — минимальное значение (число или дата)
- minlength — минимальная длина строки (количество символов)
- multiple — позволяет пользователю выбирать несколько значений или отправлять несколько файлов
- name
- pattern — регулярное выражение для проверки значения поля
- placeholder
- readonly
- required
- size — количество символов, определяющее ширину поля
- src — путь к изображению, используемому в качестве кнопки для отправки формы (только для type="image")
- step — интервал (шаг) между min и max
- type
- value
- width — ширина поля в пикселях (только для type="image")
Пример валидации адреса электронной почты и пароля:
<form>
<input
type="email"
id="email"
name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
required
/>
<input
type="password"
id="password"
name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Пароль не может быть меньше 8 символов и должен содержать одну цифру, одну прописную (заглавную) букву и одну строчкую букву"
required
/>
<input type="submit" />
</form>
Таблица
<table>
<caption>
Table Title
</caption>
<colgroup>
<col span="2" />
<col />
</colgroup>
<thead>
<tr>
<th
abbr="H1"
colspan="2"
rowspan="2"
scope="col / colgroup / row / rowgroup"
>
Heading1
</th>
<th>Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</tfoot>
</table>
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Мы рассмотрели почти все существующие HTML-теги. С полным списком можно ознакомиться здесь или здесь. Во многих публикациях упоминаются теги map и area, но с их использованием сопряжено несколько проблем (сложность реализации карты, зависимость областей от координат и т.д.), поэтому я оставил их без внимания. Также существуют такие теги, как svg и canvas, предназначенные для работы с графикой, но для рассказа о каждом из них требуется отдельная статья (и даже не одна).
Источник статьи: https://habr.com/ru/company/macloud/blog/555400/