| Тег | Описание |
|---|---|
| <!—…—> | Определяет комментарий |
| <!DOCTYPE> | Определяет тип документа |
| <a> | Определяет гиперссылку |
| <abbr> | Определяет абревиатуру или акроним |
| <acronym> | Не поддерживается в HTML5. Используйте <abbr> вместо этого. Определяет акроним |
| <address> | Определяет контактную информацию автора / владельца документа |
| <applet> | Не поддерживается в HTML5. Используйте <embed> или <object> вместо этого. Определяет встроенный аплет |
| <area> | Определяет область внутри карты изображения |
| <article> | Определяет статью |
| <aside> | Определяет содержание, кроме содержания страницы (в стороне) |
| <audio> | Определяет звуковой контент |
| <b> | Определяет жирный текст |
| <base> | Указывает базовый URL-адрес / цель для всех относительных URL-адресов документа |
| <basefont> | Не поддерживается в HTML5. Используйте CSS вместо этого. Отпределяет цвет, размер и шрифт по умолчанию для всего текста документа |
| <bdi> | Изолирует часть текста, который может быть отформатирован в другом направлении от иного текста за его пределами |
| <bdo> | Переопределяет текущее направление текста |
| <big> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет увеличенный текст |
| <blockquote> | Определяет раздел, который цитируется с другого источника |
| <body> | Определяет тело документа |
| <br> | Определяет разрыв строки |
| <button> | Определяет кнопку, которую можно нажимать |
| <canvas> | Используется для рисования на лету, с помощью сценариев (обычно на JavaScript) |
| <caption> | Определяет подпись к таблице |
| <center> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет центрирование текста |
| <cite> | Определяет название произведения при цитировании из него |
| <code> | Определяет фрагмент компьютерного кода |
| <col> | Указывает свойства столбцов для каждого столбца в элементе <colgroup> |
| <colgroup> | Определяет группу с одного или нескольких столбцов в таблице для форматирования |
| <data> | Связывает заданный контент с машиночитаемым переводом |
| <datalist> | Определяет список предварительно определённых параметров управления вводом |
| <dd> | Определяет описание / значение термина в списке описания |
| <del> | Определяет удалённый с документа текст |
| <details> | Определяет дополнительные детали, которые пользователь может просматривать или прятать |
| <dfn> | Задаёт термин, для которого будет дано определение (definition) |
| <dialog> | Определяет диалоговый бокс или окно |
| <dir> | Не поддерживается в HTML5. Используйте <ul> вместо этого. Определяет список каталогов |
| <div> | Определяет раздел (блочный) в документе |
| <dl> | Определяет список описаний |
| <dt> | Определяет термин / имя в списке описания |
| <em> | Определяет семантически подчёркнутый текст (empharized) |
| <embed> | Определяет контейнер для внешнего (не HTML) приложения |
| <fieldset> | Группы связанных элементов в форме |
| <figcaption> | Определяет заголовок для элемента <figure> |
| <figure> | Определяет автономное содержание |
| <font> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет шрифт, цвет и размер текста |
| <footer> | Определяет нижний колонтитул (футер) для документа или раздела |
| <form> | Определяет HTML форму для ввода пользователем |
| <frame> | Не поддерживается в HTML5. Определяет окно (фрейм) в наборе фреймов |
| <frameset> | Не поддерживается в HTML5. Определяет набор фреймов |
| <h2> to <h6> | Определяет HTML заголовки |
| <head> | Определяет информацию о документе |
| <header> | Определяет заголовок для документа или раздела |
| <hr> | Определяет тематическую смену контента |
| <html> | Определяет корень HTML-документа |
| <i> | Определяет часть текста альтернативным голосом или настроением |
| <iframe> | Определяет встроенный фрейм |
| <img> | Определяет изображение |
| <input> | Определяет элемент управления вводом |
| <ins> | Определяет текст, который был вставлен в документ |
| <kbd> | Определяет ввод с клавиатуры |
| <label> | Определяет метку для элемента <input> |
| <legend> | Определяет заголовок для элемента <fieldset> |
| <li> | Определяет элемент списка |
| <link> | Определяет взаимосвязь между документом и внешним ресурсом (обычно используется для ссылки на внешние таблицы стилей) |
| <main> | Определяет основное содержание документа |
| <map> | Определяет карту изображения на стороне клиента |
| <mark> | Определяет помеченный (маркированный) / выделенный текст |
| <meta> | Определяет метаданные HTML документа |
| <meter> | Определяет скалярное измерение в пределах известного диапазона (датчик) |
| <nav> | Определяет навигационные ссылки (навигация по сайту) |
| <noframes> | Не поддерживается в HTML5. Определяет альтернативное содержание для пользователей, которые не поддерживают фреймы |
| <noscript> | Определяет альтернативное содержание для пользователей, которые не поддерживают скрипты на стороне клиента |
| <object> | Определяет встроенный объект |
| <ol> | Определяет упорядоченный (нумерованный) список |
| <optgroup> | Определяет группу соответствующих параметров в выпадающем списке (выпадающем меню) |
| <option> | Определяет параметр в выпадающем списке |
| <output> | Определяет результат расчёт (калькуляции) |
| <p> | Определяет параграф (абзац) |
| <param> | Определяет параметр для объекта |
| <picture> | Определяет контейнер для нескольких ресурсов изображения |
| <pre> | Определяет предварительно отформатированный текст |
| <progress> | Представляет ход выполнения задания |
| <q> | Определяет короткую цитату |
| <rp> | Определяет, что показывать в браузерах, которые не поддерживают ruby аннотации |
| <rt> | Определяет пояснения / произношение символов (для восточноазиатской типографики) |
| <ruby> | Определяет аннотацию ruby (для восточноазиатской типографики) |
| <s> | Определяет текст, который больше не является правильным |
| <samp> | Определяет исходные данные с компьютерной программы |
| <script> | Определяет скрипт на стороне клиента |
| <section> | Определяет раздел (секцию) в документе |
| <select> | Определяет выпадающий список |
| <small> | Определяет меньший текст |
| <source> | Определяет несколько медиа-ресурсов для медиа-элементов (<video> и <audio>) |
| <span> | Определяет раздел (строчный) в документе |
| <strike> | Не поддерживается в HTML5. Используйте <del> или <s> вместо этого. Определяет перечеркнутый текст |
| <strong> | Определяет семантически важный текст |
| <style> | Определяет информацию о стиле в документе |
| <sub> | Определяет подстрчный текст (нижний индекс) |
| <summary> | Определяет видимый заголовок для элемента <details> |
| <sup> | Определяет надстрочный текст (верхний индекс) |
| <svg> | Определяет контейнер для графики SVG |
| <table> | Определяет таблицу |
| <tbody> | Группирует содержание тела в таблице |
| <td> | Определяет клетку (ячейку) в таблице |
| <template> | Определяет шаблон |
| <textarea> | Определяет многострочный элемент управления вводом (текстовая область) |
| <tfoot> | Группирует содержание нижнего колонтитула в таблице |
| <th> | Определяет ячейку заголовка в таблице |
| <thead> | Группирует содержание заголовка в таблице |
| <time> | Определяет дату / время |
| <title> | Определяет заголовок документа |
| <tr> | Определяет строку в таблице |
| <track> | Определяет текстовые дорожки для медиа-элементов (<video> и <audio>) |
| <tt> | Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет текст телетайпа |
| <u> | Определяет текст, который должен быть стилистически отличным от обычного текста |
| <ul> | Определяет неупорядоченный (ненумерованный) список |
| <var> | Определяет переменную |
| <video> | Определяет видео или фильм |
| <wbr> | Определяет возможный разрыв строки |
Интересные HTML5 теги
Со времен как я изучал HTML прошло много времени. По ходу дела удается знакомится с чем-то новым. В этой заметке хочу записать некоторые новые HTML 5 теги, которые могут пригодится в разработке, и о которых не многие знают.
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.
Компания Boosta.
<datalist>
Создает список вариантов, которые можно выбирать при наборе в текстовом поле. Позволяет создать текстовое поле с подсказками для заполнения.
Можно сказать, что <datalist> объединяет в себе поля input[type=text] и select: можно ввести свой вариант в текстовое поле, или можно выбрать из вариант из предложенных.
Примеры
#1 Выведем текстовое поле с подсказками для заполнения.
<datalist> связывается с текстовым полем через id. Его значение должно совпадать со значением атрибута list тега <input>.
В <datalist> нельзя как в <select> передать разные значение и название выбираемого поля. Например: <option value="safari">Safari</option>.
<input list="browsers" name="browser"> <datalist> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
меню
<meter>
Измерения чего-либо (метр, метраж). Выводит указанное значение в указанном диапазоне.
Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.
Синтаксис
<meter value="0.5">Резервный Текст</meter>
- value(число) (обязательный)
- Значение. Можно указывать дробные значение, например 0.5.
- min(число)
- Задает минимально возможное значение.
По умолчанию: 0 - max(число)
- Задает максимально возможное значение.
По умолчанию: 1 - low(число)
- Определяет предел, при достижении которого значение считается низким.
- high(число)
- Определяет предел, при достижении которого значение считается высоким.
- optimum(число)
- Определяет наилучшее или оптимальное значение.
- form(строка)
- ID формы, к которой принадлежит этот тег.
Примеры
#1 Температура
Температура воды: <meter value="0" low="10" max="100" high="60">Низкая</meter> <meter value="30" low="10" max="100" high="60">Нормальная</meter> <meter value="80" low="10" max="100" high="60">Горячая</meter> <meter value="100" max="100">Кипяток</meter>
Температура воды: НизкаяНормальнаяГорячаяКипяток
#2 Используемое пространство
<label for="disk_c">Disk usage C:</label> <meter value="2" min="0" max="10">2 out of 10</meter><br> <label for="disk_d">Disk usage D:</label> <meter value="0.8" high="0.7">80%</meter>
Disk usage C: 2 out of 10
Disk usage D: 80%
меню
<progress>
Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.
Синтаксис
<progress value="25" max="100">Резервный Текст</progress>
- value(число) (обязательный)
- Текущее значение прогресса.
- max(число)
- Максимальное значение прогресса.
По умолчанию: 1
Примеры
#1 Покажем прогресс бар
Идет загрузка, ждите: <progress max="100" value="25">Загружено на <b>25</b>%</progress>
Идет загрузка, ждите: Загружено на 25%
#2 Покажем прогресс бар
<label for="file">Downloading progress:</label> <progress value="32" max="100"> 32% </progress>
Downloading progress: 32%
#3 Стилизация
Что такое семантическая вёрстка и зачем она нужна — Блог HTML Academy
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <divnav»></div>. Или вот такой код. Смотрите и сразу понятно, что тут и зачем.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<header>
<!— Шапка сайта —>
</header>
<main>
<!— Основное содержимое страницы —>
</main>
<footer>
<!— Подвал сайта —>
</footer>
</body>
</html>Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
<article>
- Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
- Особенности: желателен заголовок внутри.
- Типовые ошибки: путают с тегами
<section>и<div>.
<section>
- Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
- Особенности: желателен заголовок внутри.
- Типовые ошибки: путают с тегами
<article>и<div>.
<aside>
- Значение: побочный, косвенный для страницы контент.
- Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
- Типовые ошибки: считать
<aside>тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.
<nav>
- Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
- Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в
<nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен<footer>сам по себе. - Типовые ошибки: многие считают, что в
<nav>может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.
<header>
- Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
- Особенности: этих элементов может быть несколько на странице.
- Типовые ошибки: использовать только как шапку сайта.
<main>
- Значение: основное, не повторяющееся на других страницах, содержание страницы.
- Особенности: должен быть один на странице, исходя из определения.
- Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).
<footer>
- Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
- Особенности: этих элементов может быть несколько на странице. Тег
<footer>не обязан находиться в конце раздела. - Типовые ошибки: использовать только как подвал сайта.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
- Крупные смысловые блоки на каждой странице сайта. Теги:
<header>, <main>, <footer>. - Крупные смысловые разделы в блоках. Теги:
<nav>, <section>, <article>, <aside>. - Заголовок всего документа и заголовки смысловых разделов. Теги:
<h2>-<h6>. - Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
- Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.
Создание семантической разметки по макету
Навык, без которого фронтенд-разработчикам ну просто никуда.
Изучить
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
- Получилось найти самый подходящий смысловой тег — использовать его.
- Для потоковых контейнеров —
<div>. - Для мелких фразовых элементов (слово или фраза) —
<span>.
Правило для определения <article>, <section> и <div>:
- Можете дать имя разделу и вынести этот раздел на другой сайт? —
<article> - Можете дать имя разделу, но вынести на другой сайт не можете? —
<section> - Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —
<div>
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
- Тег
<blockquote>должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом. - Тег
<ul>тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег<ul>можно вкладывать только теги<li>и ничего больше. - Тег
<p>использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.
Семантика текста | ||
| <a></a> | Создаёт гипертекстовые ссылки. | inline |
| <em></em> | Выделяет важные фрагменты текста курсивом. | inline |
| <strong></strong> | Выделяет полужирным важный текст. | inline |
| <small></small> | Отображает текст шрифтом меньшего размера. | inline |
| <s></s> | Перечёркивает неактуальный текст. | inline |
| <cite></cite> | Используется для указания источника цитирования. Отображается курсивом. | inline |
| <q></q> | Краткая цитата. | inline |
| <dfn></dfn> | Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина. | inline |
| <abbr> | Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title. | none |
| <ruby></ruby> | Контейнер для Восточно-Азиатских символов и их расшифровки. | inline |
| <rb></rb> | Обертка для аннотации. | inline |
| <rp></rp> | Тег для скобок вокруг символов. | none |
| <rt></rt> | Расшифровка символов. | block |
| <rtc></rtc> | Обертка для дополнительной аннотации. | inline |
| <data></data> | Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега. | inline |
| <time></time> | Дата / время документа или статьи. | inline |
| <code></code> | Представляет фрагмент программного кода, отображается шрифтом семейства monospace. | inline |
| <var></var> | Выделяет переменные из программ. | inline |
| <samp></samp> | Результат выполнения сценария. | inline |
| <kbd></kbd> | Текст, вводимый пользователем с клавиатуры. | inline |
| <sub></sub> | Подстрочное написание символов. | inline |
| <sup></sup> | Надстрочное написание символов. | inline |
| <i></i> | Выделяет текст курсивом без акцента. | inline |
| <b></b> | Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. | inline |
| <u></u> | Выделяет отрывок текста подчёркиванием, без дополнительного акцента. | inline |
| <mark></mark> | Выделяет фрагменты текста желтым фоном. | inline |
| <bdi></bdi> | Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста. | inline |
| <bdo></bdo> | Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста. | inline |
| <span></span> | Контейнер для строчных элементов. | inline |
| <br> | Перенос текста на новую строку. | none |
| <wbr> | Возможное место разрыва длинной строки. | none |
Семантические теги HTML5, которые вы должны использовать
11 марта 2020 HTML
Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта.
Основные семантические теги HTML, такие как <header>, <footer> и <nav>, почти не требуют пояснений. Но есть множество новых HTML-тегов, которые веб-разработчики также должны использовать. Здесь я собрал восемь HTML-тегов, которыми вы должны начать пользоваться прямо сейчас, и кратко объясню, как их следует использовать. Кроме того, здесь вы найдете описание ещё пяти HTML-тегов, которые необходимо немедленно заменить, если вы всё ещё используете их.
01. <picture>
Тег <picture> аналогичен тегу <img>, но элемент <picture> обеспечивает гибкость, позволяя использовать вложенные элементы <source> в которых содержатся разные форматы одного и того же изображения. Изображения можно адаптировать на основе медиазапроса или поддержки типа изображения. Говоря простыми словами, тег выводит то изображение, которое подходит для конкретного устройства или браузера. Например, он может вывести изображение WebP в браузерах, которые поддерживают более новый формат изображений.
<picture> <!-- Вывод изображения в зависимости от разрешения экрана и поддержки формата --> <source srcset="/img/img1024.png" type="image/webp" media="(max-width: 1024px)"> <source srcset="/img/img1280.png" type="image/png" media="(max-width: 1280px)"> <source srcset="/img/img1920.jpg" type="image/jpg" media="(max-width: 1920px)"> </picture>
02. <datalist>
Тег <datalist> предоставляет интерфейс автозаполнения для элементов <input>. Каждый список содержит набор элементов <option>, имеющих соответствующее значение. При связывании с <input> с помощью атрибута «list» он может предоставить раскрывающийся список или даже отображать предложения в качестве пользовательских типов.
В приведенном ниже примере при вводе города в поле <input>, пользователю будут предложены варианты городов для автозаполнения:
<input list="city"> <datalist> <option value="Москва"></option> <option value="Санкт-Петербург"></option> <option value="Нижний Новгород"></option> </datalist>
03. <dl>
Тег <dl> — это элемент, который служит контейнером для создания глоссария. Внутри него содержится термин (<dt>) и его определение (<dd>).
<dl> <dt>Термин 1</dt> <dd>Определение 1</dd> <dt>Термин 2</dt> <dd>Определение 2</dd> </dl>
04. <details>
Используя тег <details> вместе с <summary>, мы можем достичь эффекта аккордеона без JavaScript, например страницу вопрос-ответ (FAQ). Нажатие на <summary> выведет остальную часть текста.
<details>
<summary>Вопрос</summary>
Текст ответа
</details>05. <dfn>
Сложные термины или сокращения в тексте часто нуждаются в определении. Термин, заключенный в тег <dfn>, будет определяться текстом, который его окружает.
06. <figure>
Используется для группировки изображений, а с помощью тега <figcaption> можно добавить подписи к ним.
<figure>
<img src="/img/img.jpg" alt="" />
<figcaption>Описание изображения</figcaption>
</figure>07. <code>
Выделяет программный код в тексте. Для больших блоков кода можно объединить с тегом <pre>.
08. <time>
Часто в тексте значения времени записываются по-разному. Помечая эти значения тегом <time>, поисковые системы могут быстро извлечь эту информацию. Используйте атрибут «datetime», чтобы указать определенное время в более удобном для машин формате.
<time>11-03-2020</time> <time datetime="2020-03-11T10:23:11+03:00">11-03-2020</time>
5 HTML-тегов, которых нужно избегать
В спецификации HTML есть много унаследованных тегов, которые все еще можно использовать, и они все еще будут работать, но обычно существует лучшая альтернатива. И, если есть лучший вариант, то вам действительно нужно его использовать.
Существует также проблема поддержки браузеров. Некоторые теги больше не будут поддерживаться и это может быть незаметно при рассмотрении дизайна страницы. Лучше их заменить.
Ниже рассмотрим пять тегов, которые точно не должны находиться внутри HTML-кода страницы. Если вы обнаружите какие-либо из них в своем коде замените их.
01. <font>
Исторически, тег <font> использовался для стилизации блока текста, теперь лучше всего ориентироваться и стилизовать текст с помощью CSS. Согласно Advanced Web Ranking, почти 6,5 миллионов веб-сайтов по-прежнему используют этот тег, несмотря на то, что он устарел уже много лет назад.
В сочетании с <menu> тег <menuitem> будет предоставлять параметры и действия для выполнения внутри контекстных пунктов меню. На данный момент это удалено из спецификации, так как тег так и не стал поддерживаться во многих в браузерах.
03. <big>
Тег <big> увеличил бы размер текста, находящийся внутри него на один уровень. Его сопутствующий <small> все еще является допустимым HTML, но теперь имеет более определенное семантическое значение, относящееся к мелкому шрифту.
04. <center>
Ранее тег <center> был единственным способом централизации как блочного, так и встроенного содержимого, но теперь он заменен на text-align: center в CSS, который выполняет ту же работу.
05. <marquee>
Тег <marquee> позволял тексту внутри тега перемещаться по экрану, как новостная лента. Ранее эта функция была популярна, но была классифицирована как устаревшая в пользу CSS-анимации.
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Поделиться:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Как конвертировать HTML в Word на JavaScript
Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее
Сохранение данных в форме после обновления страницы
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Использование drag and drop на HTML5
Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, — это drag ‘n’ drop (перетаскивание). Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые Читать далее
Прижать футер с помощью Flexbox
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
Захват изображения с камеры с помощью HTML5
С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type=»file»/>. Media Capture переопределяет поле для отправки файла если к нему добавить Читать далее
Коды специальных символов HTML и символы юникода (unicode)
В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее
Семантические теги HTML5: что это такое и как их использовать!
Опубликовано: 2020-06-05
Что такое семантический HTML5?
Если вы немного знакомы с HTML, вы будете знать, что теги HTML (в основном) используются для форматирования содержимого — эти теги сообщают браузеру, как отображать содержимое на странице. Они не указывают, какой тип контента они содержат или какую роль играет на странице.
Семантический HTML5 устраняет этот недостаток, определяя конкретные теги, чтобы четко указать, какую роль играет контент, который содержат эти теги. Эта явная информация помогает роботам / сканерам, таким как Google и Bing, лучше понимать, какой контент важен, какой является вспомогательным, какой предназначен для навигации и т. Д.
Добавляя семантические HTML-теги на свои страницы, вы предоставляете дополнительную информацию, которая помогает Google и Bing понять роли и относительную важность различных частей вашей страницы.
Это руководство предполагает базовое понимание того, как добавлять HTML на страницу. Если все это становится немного ошеломляющим, было бы полезно отступить и взглянуть на вводное руководство по HTML.
Примеры:
теги div и span. Несемантический / общий.
Это примеры несемантических элементов HTML. Они служат только в качестве держателей, чтобы сообщить браузеру, как должен отображаться контент. Они не дают никакой информации о роли, которую контент, который они содержат, играет на странице.
Примеры семантических тегов.
Это смысловые элементы. Для программ чтения с экрана и роботов поисковых систем каждый элемент определяет роль содержимого, содержащегося в их тегах.
Зачем мне использовать семантические теги HTML5?
Для зрячих пользователей, когда страница хорошо оформлена визуально, легко идентифицировать различные части веб-страницы с первого взгляда. Заголовки, меню и (надеюсь) основное содержимое сразу визуально видны. А теперь представьте, что вы слепы.
Боты (пауки) Google и Bing если не слепые, то серьезно ослабляют зрение. Им феноменально трудно увидеть и понять визуальные подсказки — им нужна ваша помощь.
Если вы сможете успешно сообщить Google и Bing, какая часть страницы является заголовком, а какая нижним колонтитулом, а какая предназначена для навигации, они будут вам благодарны. Что наиболее важно, говоря им, какой контент является наиболее важным, вы даете им четкую инструкцию по определению приоритетов этого контента.
Для слепых или слабовидящих пользователей, которые полагаются на средства чтения с экрана для устного описания того, что находится на странице, правильное использование семантических элементов HTML5 позволит программам чтения с экрана более точно передавать ваш контент, делая визуальное слышимым. Крайне важно использовать эту новую версию HTML, чтобы вы могли сделать свой контент доступным для всех возможных посетителей сайта.
Вот наша страничка.
Семантический HTML5 — одна из тех, казалось бы, мелких деталей, которая затрагивает самую суть индексации, которую часто недооценивают. Точно реализованный семантический HTML5 дает большую помощь алгоритмам индексации, используемым роботами Googlebot и Bingbot. Это дает им лучшее понимание (и уверенность в их понимании) вашего контента, что помогает им лучше индексировать ваш контент, что, в свою очередь, помогает вашим усилиям по SEO.
Ввод в поисковую систему
Фабрис Канель из Bing заявил в своем выступлении в моем подкасте, что это так — страницы с правильно реализованным семантическим HTML5 имеют преимущество в SEO перед теми, которые этого не делают. Мартин Сплитт из Google подтвердил это на саммите SEJ в июне 2020 года.
Когда роботы Googlebot и Bingbot сохраняют просканированные страницы в своем индексе, они добавляют обширный уровень аннотаций. Это тот аннотативный слой, который используют алгоритмы ранжирования для поиска и извлечения контента с отдельных веб-страниц. Более подробные и точные аннотации улучшают поиск и увеличивают шансы того, что любой конкретный фрагмент контента будет рассмотрен алгоритмами для ранжирования.
Итак, правильное использование семантического HTML5 дает вашему контенту преимущество в процессе отбора, который лежит в основе ранжирования. Это увеличивает шансы на то, что алгоритмы ранжирования выберут ваш контент в качестве кандидата на первое место.
Некоторые из семантических тем HTML5, которые мы рассмотрим
- Структура семантических тегов HTML5
- Примеры семантического HTML5
- Более сложные примеры
- Использование разделов и статей:
- Связанные в сторону
- Косвенно связанный в сторону
- Полезные советы
- Раздел против статьи
- Вложенные элементы
- Чего не делать
- Следующие шаги?
- Три столпа оптимизации системы ответов
Структура семантических тегов HTML5
Примеры семантических тегов HTML включают <nav>, <footer> и <section>. Можно использовать гораздо больше семантических тегов HTML5 (например, <blockquote> и <em>), но в этой статье я рассматриваю только те семантические теги HTML, которые вам понадобятся для разделения содержимого страницы на его основные части.
Следующие теги HTML5 можно использовать вместо тегов <div>, чтобы разбить содержимое страницы на определенные части, каждая из которых выполняет определенную роль. Как вы понимаете, роботам вроде Googlebot и Bingbot это нравится.
Семантические теги HTML5, которые мы будем использовать в этой статье.
Вы увидите примеры позже, но их краткий обзор будет следующим:
Элемент заголовка — элемент <header> определяет контент, который следует рассматривать как вводную информацию страницы или раздела.
Элемент Nav — все ссылки главного меню навигации будут помещены в тег <nav>. Но подменю навигации в другом месте страницы также могут получить его.
Основной тег — в теге <main> должно быть тело страницы, а не боковые панели и основная навигация. Их должно быть только по одному на странице.
Элемент article — элемент <article> определяет автономный контент, который может стоять независимо от страницы или сайта, на котором он находится. Например, сообщение в блоге.
Элемент раздела — использование <section> — это способ группировки близлежащего содержимого схожей темы. Тег раздела отличается от тега статьи, потому что он не обязательно самодостаточен.
Элемент Aside — элемент <aside> определяет менее важный контент. Он часто используется для боковых панелей — областей, которые добавляют дополнительную, но не жизненно важную информацию.
Элемент нижнего колонтитула — вы должны использовать <нижний колонтитул> в основании страницы или раздела. Он может включать контактную информацию и некоторые элементы навигации по сайту.
Это четкое разграничение и явное присвоение ролей каждой части контента делает страницу более понятной и упрощает ее правильное индексирование для Google и Bing.
NB Поскольку все эти теги ведут себя точно так же, как теги <div>; они могут просто заменить существующие <div> на странице, не затрагивая макет. Во многих случаях реализация семантического HTML5 может быть такой же простой, как найти правильную пару <div> и </div> и заменить их.
Подтверждение от Bing
Ткань Канел, руководитель группы Bingbot, подтвердила, что семантический HTML5 им очень помогает в невероятно содержательном интервью для моего подкаста «Обнаружение, сканирование, извлечение и индексирование в Bing».
Примеры семантического HTML5
Супер простой семантический пример HTML5:
Здесь мы просто определили, какую роль играет каждая часть страницы. Когда вы начинаете применять HTML5, это безопасное место для начала — заголовок, навигация, основной, нижний колонтитул.
Супер простой пример с самыми важными элементами: header, footer, nav и main.
Лучше иметь суперпростую реализацию, которая на 100% правильна, чем сложная реализация, которая неверна.
Неточная реализация посылает противоречивые и сбивающие с толку сигналы, которые только усугубят ситуацию, а не улучшат ее.
Простая и правильная реализация — это уже большой шаг вперед в вашем общении с Google и Bing. Не будьте слишком амбициозными; ошибетесь, и вы можете создать больше проблем, чем решить!
Более сложные примеры HTML5
Использование разделов и статей:
Здесь мы создали иерархию в нашем основном содержании. Это всеобъемлющая статья, которая определяет центральное содержание в пределах основного тега. Это дает обзор темы этой части страницы. В этой статье у нас есть несколько подтем, которые развивают основную тему, которая определяется вложенными разделами.
Обратите внимание, что дизайн (оранжевые блоки) не используется для определения семантических областей страницы.
Обратите внимание, что дизайн (оранжевые блоки) не используется для определения семантических областей страницы. Это дизайн страницы — для людей. Это выглядит немного запутанным, но хорошо показывает, что HTML макета дизайна и семантический HTML5 имеют разные роли.
В реальном мире семантическая разметка часто следует макету больше, чем в этом примере. Общее правило: раздел является частью чего-то еще. Статья — это отдельная вещь.
Также обратите внимание, что здесь я добавил раздел навигации в нижний колонтитул. Логически, как и заголовок, нижний колонтитул содержит элементы навигации.
Связанные в сторону
Здесь мы добавили две части непосредственно связанного контента к основной статье контента. Используя asides, мы указываем, что связанный контент (aside) является необязательным. Основной раздел контента может быть показан без отступов и при этом понятен.
Косвенно связанный в сторону
Сторона не обязательно должна быть боковой панелью рядом с основным контентом. Его также можно использовать для блоков под основным контентом, содержащих заголовок, текст и ссылку на другую страницу.
Наша последняя версия страницы размечена тегами HTML5.
Здесь мы определили некоторый контент, косвенно связанный со страницей за пределами основной статьи контента. С помощью этой правильной реализации семантического HTML5 мы указываем, что содержимое в стороне не имеет прямого отношения к основной статье.
Важно отметить, что мы явно определили большое количество некритического контента, который можно безопасно исключить из рассмотрения алгоритмами ранжирования. Это означает, что они могут сосредоточиться на важном контенте в этом теге <article>. Мы просто значительно упростили работу алгоритма индексации и алгоритмов ранжирования.
Структурирования веб-страницы с помощью семантического HTML5 достаточно для большинства потребностей, и это уже дает конкурентное преимущество в SEO.
Полезные советы
Раздел против статьи
Об этом много говорят. Нет фиксированных правил для разделов и статей, и их реализация довольно гибкая. Они более или менее одинаковы и в большинстве случаев могут использоваться взаимозаменяемо.
Самое главное — быть логичным и последовательным на всем сайте; Роботу Googlebot и Bingbot НЕОБХОДИМО согласованность.
Личный совет : я обнаружил, что вложение разделов внутри статьи с контентом логично как для машины, так и для человека (разработчику будет легче читать HTML-код).
Вложенные элементы
Элементы могут вкладывать другие элементы. Например, статья может иметь свой собственный <header>, <footer>, <h2> (как показано выше) и даже <nav> (якорные ссылки — хороший пример). Я не приводил иллюстрацию этого «супервнестирования», и тому есть причина …
Редко, когда какая-либо веб-страница требует такого подробного структурно-семантического HTML5. Если страница становится сложной для организации, то она, вероятно, не будет хорошо работать в SEO, и вы почти наверняка захотите разделить контент на несколько страниц.
Как упоминалось выше, для целей SEO вам следует сконцентрироваться на предоставлении страницы с прочной и простой структурой.
Чего НЕЛЬЗЯ делать с HTML5
Просто предупреждение — я видел много сайтов, использующих визуальный дизайн в качестве руководства для реализации HTML5. Как видно выше, семантический HTML5 предназначен не для этого.
Семантический HTML5 не для дизайна.
Этот (на удивление типичный) пример просто дублирует визуальный макет. Что еще хуже, чем бессмысленно, это означает, что страница содержит 4 разные темы, а не одну тему и 3 подтемы.
Явное предоставление вводящей в заблуждение информации роботам Googlebot и Bingbot отрицательно повлияет на их понимание и снизит полноту и точность их аннотаций, что затруднит поиск вашего контента с помощью алгоритмов ранжирования (см. Выше).
Помогите Googlebot и Bingbot, и они вам помогут 🙂
Следующие шаги?
Семантический HTML5 — это невероятно мощный способ сообщить роботам Googlebot и Bingbot роль, которую играет каждая часть вашей страницы. И когда у них есть точное понимание этого, они могут более точно аннотировать ваш контент при его сохранении.
Что, возможно, не кажется большим делом. Но богатые и точные аннотации ботов — это то, что делает контент легко доступным для каждого алгоритма ранжирования: основная синяя ссылка, избранный фрагмент, люди также спрашивают, изображения, видео и т. Д.
Какую бы функцию SERP вы ни выбрали, семантический HTML5 дает вам трамплин для конкуренции.
Три столпа оптимизации системы ответов
Понимание
Понимание — это один из трех столпов долгосрочной стратегии SEO, которая приведет к успеху в мире, где нам нужно будет оптимизировать для работы с механизмами ответов. Если вы хотите, чтобы машина понимала, вам нужно общаться четко и эффективно. Семантический HTML5 — одно из очень эффективных средств в вашем распоряжении для эффективного взаимодействия с этими машинами. Структурированная разметка схемы — другое. Вот статья об этом.
Достоверность
Второй столп — это доверие. Вы также можете сделать множество вещей, чтобы повысить свой авторитет. EAT — это центральный столп здесь. Посмотрите этот веб-семинар, чтобы узнать об этом больше.
Возможность доставки
Третий столп — это доставляемость. Если Google не может доставить ваш контент своим пользователям или если он считает, что ваш сайт не будет доставлять контент так, как ожидают его пользователи, то он никогда не будет предлагать ваш контент в качестве ответа на вопрос пользователя (или решения их проблемы).
Понимание + надежность + эффективность = выигрышная стратегия.
Коммуникация + надежность + доставляемость
Все SEO (и AEO) сводятся к общению, надежности и доставляемости. Я буду продолжать регулярно писать здесь, на SEMrush, о методах улучшения вашего общения, вашего доверия и доставляемости вашего контента с помощью Google и Bing (кстати, Bing скоро вернется).
Пожалуйста, поделитесь своими мыслями об этой статье в разделе комментариев ниже, но также не стесняйтесь задавать свои вопросы о коммуникации, надежности и доставляемости в SEO; ваши вопросы помогут определить приоритеты того, о чем я должен писать.
В заключение: напоминание о хорошей семантической разметке HTML5 для SEO
Структура, роли, относительная важность и иерархия — это вещи, которые люди часто понимают инстинктивно из дизайна / макета. Правильное использование правильных семантических HTML-тегов вместо <div> просто упрощает то же понимание для машин.
Получите бесплатную 7-дневную пробную версию
Начните работать над своей видимостью в Интернете
Присоединяйтесь бесплатно →
Присоединяйтесь бесплатно →
| Тег | Краткое описание |
|---|---|
| <comment> | Определяет комментарий |
| <DOCTYPE> | Определяет тип документа |
| <a> | Определяет гиперссылки |
| <abbr> | Определяет аббревиатуру |
| <acronym> | Не поддерживается. Определяет акроним |
| <address> | Определяет элемент с адресом |
| <applet> | Не поддерживается. Определяет апплет |
| <area> | Определяет область внутри изображения карты |
| <article> | Определяет статью |
| <aside> | Определяет контент в стороне от основного контента страницы |
| <audio> | Определяет аудио контент |
| <b> | Определяет жирный текст |
| <base> | Определяет базовый URL для всех относительных ссылок на странице |
| <basefont> | Не поддерживается. Используетя вместо CSS для задания шрифта |
| <bdo> | Определяет направление отображения текста |
| <big> | Не поддерживается. Определяет большой текст |
| <blockquote> | Определяет длинную цитату |
| <body> | Определяет элемент тела документа |
| <br> | Вставка одного разрыва строки |
| <button> | Определяет кнопку |
| <canvas> | Определяет графики |
| <caption> | Определяет заголовок (подпись) таблицы |
| <center> | Не поддерживается. Определяет текст по центру |
| <cite> | Определяет цитату или сноску на материал |
| <code> | Определяет, что текст является программным кодом |
| <col> | Определяет атрибуты для столбцов таблицы |
| <colgroup> | Определяет групп столбцов таблицы |
| <command> | Определяет командную кнопку |
| <datagrid> | Определяет данные в упорядоченный список |
| <datalist> | Определяет выпадающий список |
| <datatemplate> | Определяет шаблон данных |
| <dd> | Определяет описание определения |
| <del> | Определяет удаленный текст |
| <details> | Определяет детали элемента |
| <dialog> | Определяет диалог (разговор) |
| <dir> | Не поддерживается. Определяет список директорий |
| <div> | Определяет секцию (блок) в документе |
| <dfn> | Определяет определение термина |
| <dl> | Определяет список определений |
| <dt> | Определяет определение термина в списке |
| <em> | Определяет выделенный текст |
| <embed> | Определяет внешний интерактивный контент или плагин |
| <eventsource> | Определяет цель события, отправляемого по серверу |
| <fieldset> | Определяет сгруппированный набор полей формы |
| <figure> | Определяет группу медиа-контента, и их подписи |
| <font> | Устаревший. Определяет шрифт текста, размер и цвет |
| <footer> | Определяет нижний колонтитул для раздела или страницы |
| <form> | Определяет форму |
| <frame> | Не поддерживается. Определяет фрейм |
| <frameset> | Не поддерживается. Определяет набор фреймов |
| <h2> по <h6> | Определяет заголовок с 1 по 6 заголовок |
| <head> | Определяет информацию о документе |
| <header> | Определяет область заголовка раздела или страницы |
| <hr> | Определяет горизонтальную линию |
| <html> | Определяет html документ |
| <i> | Определяет курсив |
| <iframe> | Определяет встроенный фрейм |
| <img> | Определяет изображение |
| <input> | Определяет поле ввода |
| <ins> | Определяет вставленный (обновленный) текст |
| <isindex> | Не поддерживается. Определяет поисковый индекс в документе |
| <kbd> | Определяет текст, набранный на клавиатуре |
| <label> | Определяет метку для элемента формы |
| <legend> | Определяет заголовок группы элементов формы |
| <li> | Определяет элемент списка |
| <link> | Определяет ссылку на ресурс |
| <mark> | Определяет выделенный текст |
| <map> | Определяет изображение карты |
| <menu> | Определяет список меню |
| <meta> | Определяет мета-информацию |
| <meter> | Определяет измерения в течение заранее определенного диапазона |
| <nav> | Определяет навигационные ссылки |
| <nest> | Определяет вложенную точку в шаблоне данных |
| <noframes> | Не поддерживается. Определяет секцию, не поддерживающую фрейм |
| <noscript> | Определяет секцию, не поддерживающую сценарий (скрипт) |
| <object> | Определяет внедренный объект |
| <ol> | Определяет упорядоченный список |
| <optgroup> | Определяет группу вариантов в раскрывающемся списке |
| <option> | Определяет вариант в раскрывающемся списке |
| <output> | Определяет некоторые виды результата |
| <p> | Определяет параграф (абзац) |
| <param> | Определяет параметр для объекта |
| <pre> | Определяет выровненный (форматированный) текст |
| <progress> | Определяет ход выполнения задачи любого рода |
| <q> | Определяет краткую цитату |
| <rule> | Определяет правила для обновления шаблонов |
| <s> | Не поддерживается. Определяет зачеркнутый текст |
| <samp> | Определяет образец программного кода |
| <script> | Определяет сценарий (скрипт) |
| <section> | Определяет раздел (секцию) |
| <select> | Определяет список для выбора |
| <small> | Определяет мелкий текст |
| <source> | Определяет медиа-ресурсы |
| <span> | Определяет раздел в документе |
| <strike> | Не поддерживается. Определяет зачеркнутый текст |
| <strong> | Определяет выделенный жирный текст |
| <style> | Определяет определение стиля |
| <sub> | Определяет индексным текст |
| <sup> | Определяет надстрочным текст |
| <table> | Определяет таблицу |
| <tbody> | Определяет тело таблицы |
| <td> | Определяет ячейку таблицы |
| <textarea> | Определяет область ввода текста |
| <tfoot> | Определяет колонтитул таблицы |
| <th> | Определяет заголовок ячейки таблицы |
| <thead> | Определяет заголовок таблицы |
| <time> | Определяет дату/время |
| <title> | Определяет название документа |
| <tr> | Определяет строку таблицы |
| <tt> | Не поддерживается. Определяет телетайп текст |
| <u> | Не поддерживается. Определяет подчеркнутый текст |
| <ul> | Определяет неупорядоченный список |
| <var> | Определяет переменную |
| <video> | Определяет видео |
| <xmp> | Не поддерживается. Определяет выровненный текст |
HTML5 тег статьи — Tutorial Republic
Тема: Справочник по тегам HTML5 Назад | След.
Описание
Элемент
В следующей таблице приведены контекст использования и история версий этого тега.
| Размещение: | Блок |
|---|---|
| Содержание: | Блок, встроенный и текстовый |
| Начальный / конечный тег: | Начальный тег: требуется , Конечный тег: требуется |
| Версия: | Новое в HTML5 |
Синтаксис
Базовый синтаксис тега
HTML / XHTML: <статья>…
Пример ниже показывает действие тега
<статья>
Введение в HTML
HTML - это язык разметки, который используется для создания веб-страниц.
Атрибуты, специфичные для тегов
Тег
Глобальные атрибуты
Как и все другие теги HTML, тег
Атрибуты событий
Тег
Совместимость с браузером
Тег
Базовая поддержка —
|
Дополнительная литература
См. Руководство по форматированию текста HTML.
Связанные теги: <адрес> .
| Тег | Описание |
|---|---|
| Этот элемент используется для определения независимой части содержимого в документе, которым может быть блог, журнал или газетная статья. | |
| Указывает, что статья немного связана с остальной частью всей страницы. | |
| Используется для воспроизведения аудиофайла в формате HTML. | |
| bdi означает двунаправленную изоляцию. Он изолирует часть текста, отформатированного в другое направление извне текстового документа. | |
| Используется для рисования холста. | |
| <данные> | Предоставляет машиночитаемую версию своих данных. |
| Предоставляет функцию автозаполнения для текстового поля. | |
| <подробности> | Указывает дополнительную информацию или элементы управления, необходимые пользователю. |
| Определяет окно или диалоговое окно. | |
| Он используется для определения заголовка для элемента | |
| Он определяет автономный контент, такой как фотографии, диаграммы и т. Д. | |
| Он определяет нижний колонтитул для раздела. | |
| Определяет заголовок для раздела. | |
| Определяет основное содержание документа. | |
| Определяет отмеченное или выделенное содержимое. | |
| Он определяет команду, которую пользователь может вызвать из всплывающего меню. | |
| <метр> | Используется для измерения скалярного значения в заданном диапазоне. |
| Используется для определения ссылки навигации в документе. | |
| Указывает ход выполнения задачи. | |
| Определяет, что показывать в браузере, не поддерживающем рубиновую аннотацию. | |
| Определяет объяснение / произношение символов. | |
| Определяет рубиновую аннотацию вместе с | |
| <раздел> | Определяет раздел в документе. |
| | Определяет видимый заголовок для элемента |
| Используется для отображения фигур. | |
| <время> | Используется для определения даты / времени. |
| <видео> | Используется для воспроизведения видео файла в формате HTML. |
| | Определяет возможный разрыв строки. |