HTML Tools
UKENRU

HTML — Справочник

35 элементов. Смотрите также справочник атрибутов.

Документ

<head>

Тег <head>

Назначение тега <head>: контейнер для метаданных, title, стилей и скриптов.

 <title>

Тег <title>

Назначение тега <title>: название вкладки браузера, заголовок в результатах поиска.

 <body>

Тег <body>

Назначение тега <body>: контейнер всего видимого содержимого страницы.

Метаданные

<meta>

Тег <meta>

charset, name/content, property и http-equiv в теге <meta> с примерами.

 <link>

Тег <link>

Атрибуты rel, href и as тега <link>: стили, favicon, preload.

Структура

<header>

Тег <header>

Назначение тега <header>: вступное содержимое для страницы или секции (логотип, навигация, заголовок).

 <footer>

Тег <footer>

Назначение тега <footer>: завершающее содержимое страницы или секции (копирайт, ссылки, контакты).

 <nav>

Тег <nav>

Назначение тега <nav>: группировка основных навигационных ссылок страницы.

 <main>

Тег <main>

Назначение тега <main>: уникальное основное содержимое страницы, без повторяющихся элементов.

 <section>

Тег <section>

Назначение тега <section>: группировка тематически связанного содержимого, обычно со своим заголовком.

 <article>

Тег <article>

Назначение тега <article>: самодостаточный блок содержимого (статья, комментарий, карточка товара).

 <aside>

Тег <aside>

Назначение тега <aside>: контент, косвенно связанный с основным (сайдбар, ссылки, реклама).

Текст

<ul>

Тег <ul>

Назначение тега <ul>: список элементов без порядка, каждый пункт — <li>.

 <ol>

Тег <ol>

Атрибуты start, reversed, type тега <ol> для нумерованных списков.

 <li>

Тег <li>

Атрибут value тега <li> внутри нумерованного списка.

 <div>

Тег <div>

Назначение тега <div>: контейнер без собственного семантического значения, для CSS-стилизации и группировки.

Инлайн-семантика

<a>

Тег <a>

Атрибуты href, target, rel и download тега <a> с примерами использования.

 <span>

Тег <span>

Назначение тега <span>: инлайн-контейнер без семантики, для стилизации части текста.

 <strong>

Тег <strong>

Семантическая (не только визуальная) важность текста через тег <strong>.

 <em>

Тег <em>

Семантический акцент (stress emphasis) на части текста через тег <em>.

 <code>

Тег <code>

Обозначение инлайнового фрагмента кода тегом <code>.

Медиа

<img>

Тег <img>

Атрибуты src, alt, loading и srcset тега <img> с примерами.

 <picture>

Тег <picture>

Использование <picture> с несколькими source для art direction и форматов изображений.

 <video>

Тег <video>

Атрибуты controls, autoplay, loop, muted, poster тега <video>.

Встроенный контент

<iframe>

Тег <iframe>

Атрибуты src, sandbox и allow тега <iframe> с пояснением безопасности.

Таблицы

<table>

Тег <table>

Структура таблицы: thead, tbody, tr, th, td. Пример и практические нюансы.

Формы

<form>

Тег <form>

Атрибуты action, method и enctype тега <form> с примером.

 <input>

Тег <input>

Типы и атрибуты тега <input>: type, name, value, required, pattern.

 <button>

Тег <button>

Атрибут type тега <button>: submit, button, reset. Разница и примеры.

 <label>

Тег <label>

Атрибут for тега <label> для связи подписи с input.

 <select>

Тег <select>

Атрибуты multiple, size, required тега <select> с опциями option.

 <textarea>

Тег <textarea>

Атрибуты rows, cols, maxlength тега <textarea> для многострочного текста.

Интерактивные

<details>

Тег <details>

Атрибут open тега <details> и связь с summary для нативного аккордеона.

 <summary>

Тег <summary>

Назначение тега <summary>: кликабельный заголовок для раскрытия details.

Скрипты

<script>

Тег <script>

Атрибуты src, type, async, defer тега <script> и разница между ними.