С именем Аллаха Милостивого.

Справочник HTML тегов

Это краткая справка по тегам HTML5.

Содержание

Структура документа

<!DOCTYPE>

Описание: Объявляет тип документа HTML5

Пример: <!DOCTYPE html>

<html>

Описание: Корневой элемент HTML-документа

Пример: <html lang="ru">...</html>

<head>

Описание: Контейнер для метаданных документа

Пример: <head>...</head>

<body>

Описание: Содержимое документа, видимое пользователю

Пример: <body>...</body>

<title>

Описание: Заголовок страницы (отображается во вкладке браузера)

Пример: <title>Моя страница</title>

<base>

Описание: Базовый URL для всех относительных ссылок

Пример 1: <base href="https://almuslim.net/rus/it/html/" target="_blank">

Пример 2: <base href="https://almuslim.net/">

См. подробное описание и примеры

Текстовые теги

<h1> - <h6>

Описание: Заголовки разных уровней (h1 - самый важный, h6 - наименее важный)

Пример: <h1>Главный заголовок</h1>

<p>

Описание: Параграф текста

Пример: <p>Это абзац текста</p>

<br>

Описание: Перенос строки

Пример: Текст<br>Новая строка

<hr>

Описание: Горизонтальная разделительная линия

Пример: <hr>

<pre>

Описание: Предварительно отформатированный текст (сохраняет пробелы и переносы)

Пример: <pre> Текст с пробелами</pre>

<blockquote>

Описание: Длинная цитата

Пример: <blockquote>Цитата</blockquote>

<q>

Описание: Короткая цитата (автоматически добавляет кавычки)

Пример: <q>Короткая цитата</q>

<cite>

Описание: Название произведения (книги, фильма и т.д.)

Пример: <cite>Война и мир</cite>

<code>

Описание: Фрагмент компьютерного кода

Пример: <code>print("Hello")</code>

<kbd>

Описание: Клавиатурный ввод

Пример: Нажмите <kbd>Ctrl</kbd> + <kbd>C</kbd>

<samp>

Описание: Пример вывода программы

Пример: <samp>Ошибка 404</samp>

<var>

Описание: Переменная в математическом выражении или коде

Пример: <var>x</var> + <var>y</var> = 10

<abbr>

Описание: Аббревиатура

Пример: <abbr title="Гипертекстовый язык разметки">HTML</abbr>

<address>

Описание: Контактная информация автора документа

Пример: <address>Email: test@example.com</address>

<time>

Описание: Дата и время

Пример: <time datetime="2024-01-01">1 января 2024</time>

<mark>

Описание: Выделенный текст (маркер)

Пример: <mark>Выделенный текст</mark>

<small>

Описание: Текст меньшего размера (обычно для примечаний)

Пример: <small>Мелкий текст</small>

<sub>

Описание: Подстрочный текст

Пример: H<sub>2</sub>O

<sup>

Описание: Надстрочный текст

Пример: 10<sup>2</sup>

Форматирование текста

<b>

Описание: Жирный текст (без семантического значения)

Пример: <b>Жирный текст</b>

<strong>

Описание: Важный текст (жирный, с семантическим значением)

Пример: <strong>Важный текст</strong>

<i>

Описание: Курсив (без семантического значения)

Пример: <i>Курсив</i>

<em>

Описание: Выделенный текст (курсив, с семантическим значением)

Пример: <em>Акцент</em>

<u>

Описание: Подчёркнутый текст

Пример: <u>Подчёркнутый</u>

<s>

Описание: Зачёркнутый текст (устаревшее/неактуальное)

Пример: <s>Старая цена</s>

<del>

Описание: Удалённый текст

Пример: <del>Удалено</del>

<ins>

Описание: Вставленный текст

Пример: <ins>Добавлено</ins>

<a>

Описание: Гиперссылка

Пример: <a href="https://example.com">Ссылка</a>

Атрибуты: href, target, rel, download, title

<nav>

Описание: Навигационный блок

Пример: <nav>...меню...</nav>

<link>

Описание: Связь с внешними ресурсами (обычно CSS)

Пример: <link rel="stylesheet" href="style.css">

<meta>

Описание: Метаданные документа

Пример: <meta charset="UTF-8">

Списки

<ul>

Описание: Маркированный список

Пример:

<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>

<ol>

Описание: Нумерованный список

Пример:

<ol>
<li>Первый</li>
<li>Второй</li>
</ol>

<li>

Описание: Элемент списка

Пример: <li>Элемент</li>

<dl>

Описание: Список определений

Пример: <dl>...</dl>

<dt>

Описание: Термин в списке определений

Пример: <dt>HTML</dt>

<dd>

Описание: Описание термина в списке определений

Пример: <dd>Язык разметки</dd>

Таблицы

<table>

Описание: Таблица

Пример: <table>...</table>

<tr>

Описание: Строка таблицы

Пример: <tr>...</tr>

<td>

Описание: Ячейка таблицы

Пример: <td>Данные</td>

<th>

Описание: Заголовочная ячейка таблицы

Пример: <th>Заголовок</th>

<thead>

Описание: Шапка таблицы

Пример: <thead>...</thead>

<tbody>

Описание: Тело таблицы

Пример: <tbody>...</tbody>

<tfoot>

Описание: Подвал таблицы

Пример: <tfoot>...</tfoot>

<caption>

Описание: Заголовок таблицы

Пример: <caption>Название таблицы</caption>

<colgroup>

Описание: Группа колонок

Пример: <colgroup>...</colgroup>

<col>

Описание: Колонка таблицы

Пример: <col>

Формы

<form>

Описание: Форма для ввода данных

Пример: <form action="/submit" method="post">...</form>

<input>

Описание: Поле ввода

Пример: <input type="text" name="name">

Типы: text, password, email, number, date, checkbox, radio, submit, reset, file, hidden

<textarea>

Описание: Многострочное текстовое поле

Пример: <textarea name="message"></textarea>

<button>

Описание: Кнопка

Пример: <button type="submit">Отправить</button>

<select>

Описание: Выпадающий список

Пример: <select name="city">...</select>

<option>

Описание: Элемент выпадающего списка

Пример: <option value="1">Москва</option>

<optgroup>

Описание: Группа элементов в выпадающем списке

Пример: <optgroup label="Города">...</optgroup>

<label>

Описание: Метка для элемента формы

Пример: <label for="email">Email:</label>

<fieldset>

Описание: Группа элементов формы

Пример: <fieldset>...</fieldset>

<legend>

Описание: Заголовок для fieldset

Пример: <legend>Контактная информация</legend>

<output>

Описание: Результат вычислений

Пример: <output name="result"></output>

<datalist>

Описание: Список предустановленных вариантов для input

Пример: <datalist id="colors">...</datalist>

<progress>

Описание: Индикатор прогресса

Пример: <progress value="70" max="100"></progress>

<meter>

Описание: Измеритель (шкала)

Пример: <meter value="0.6">60%</meter>

Медиа и изображения

<img>

Описание: Изображение

Пример: <img src="photo.jpg" alt="Описание">

<audio>

Описание: Аудио

Пример: <audio controls><source src="sound.mp3"></audio>

<video>

Описание: Видео

Пример: <video controls><source src="video.mp4"></video>

<source>

Описание: Источник медиа (для audio/video)

Пример: <source src="file.mp3" type="audio/mpeg">

<track>

Описание: Субтитры для видео

Пример: <track src="subs.vtt" kind="subtitles">

<canvas>

Описание: Холст для рисования (требует JavaScript)

Пример: <canvas id="myCanvas"></canvas>

<svg>

Описание: Векторная графика

Пример: <svg>...</svg>

<figure>

Описание: Контейнер для медиа с подписью

Пример: <figure><img src="..."></figure>

<figcaption>

Описание: Подпись к figure

Пример: <figcaption>Описание изображения</figcaption>

<picture>

Описание: Контейнер для нескольких источников изображения

Пример: <picture><source ...><img ...></picture>

<map>

Описание: Карта изображения (кликабельные области)

Пример: <map name="map1">...</map>

<area>

Описание: Область на карте изображения

Пример: <area shape="rect" coords="..." href="...">

<embed>

Описание: Встроенный контент (плагины)

Пример: <embed src="file.swf">

<object>

Описание: Встроенный объект

Пример: <object data="file.pdf"></object>

<param>

Описание: Параметр для object

Пример: <param name="autoplay" value="true">

<iframe>

Описание: Встроенный фрейм (другая страница)

Пример: <iframe src="page.html"></iframe>

Семантические теги

<header>

Описание: Шапка документа или раздела

Пример: <header>...</header>

<footer>

Описание: Подвал документа или раздела

Пример: <footer>...</footer>

<main>

Описание: Основное содержимое документа

Пример: <main>...</main>

<article>

Описание: Самостоятельная статья

Пример: <article>...</article>

<section>

Описание: Раздел документа

Пример: <section>...</section>

<aside>

Описание: Боковая панель (дополнительная информация)

Пример: <aside>...</aside>

<details>

Описание: Раскрывающийся блок

Пример: <details><summary>Подробнее</summary>...</details>

<summary>

Описание: Заголовок для details

Пример: <summary>Нажмите меня</summary>

<dialog>

Описание: Диалоговое окно

Пример: <dialog open>...</dialog>

<template>

Описание: Шаблон для клонирования (через JS)

Пример: <template>...</template>

<slot>

Описание: Плейсхолдер для веб-компонентов

Пример: <slot></slot>

Мета-теги и информация

<meta charset>

Описание: Кодировка документа

Пример: <meta charset="UTF-8">

<meta viewport>

Описание: Настройки отображения на мобильных

Пример: <meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta description>

Описание: Описание страницы для поисковиков

Пример: <meta name="description" content="Описание">

<meta keywords>

Описание: Ключевые слова (устарело)

Пример: <meta name="keywords" content="html, css">

<meta author>

Описание: Автор документа

Пример: <meta name="author" content="Имя">

<meta refresh>

Описание: Автообновление страницы

Пример: <meta http-equiv="refresh" content="30">

<style>

Описание: Встроенные стили CSS

Пример: <style>body { color: black; }</style>

<script>

Описание: Встроенный JavaScript

Пример: <script>console.log("Hello");</script>

<noscript>

Описание: Контент для браузеров без JS

Пример: <noscript>Включите JavaScript</noscript>

Другие теги

<div>

Описание: Блочный контейнер

Пример: <div>...</div>

<span>

Описание: Строчный контейнер

Пример: <span>текст</span>

<bdi>

Описание: Изолированное направление текста

Пример: <bdi dir="rtl">текст</bdi>

<bdo>

Описание: Переопределение направления текста

Пример: <bdo dir="rtl">текст</bdo>

<ruby>

Описание: Руби-аннотация (для азиатских языков)

Пример: <ruby>漢<rt>kan</rt>字</ruby>

См. подробное описание и примеры

<rt>

Описание: Расшифровка для ruby

Пример: <rt>произношение</rt>

<rp>

Описание: Резервные скобки для ruby

Пример: <rp>(</rp>

<wbr>

Описание: Возможность переноса слова

Пример: ОченьДлинноеСлово<wbr>Продолжение

<data>

Описание: Машиночитаемое значение

Пример: <data value="123">123 единицы</data>

<command>

Описание: Команда меню (устарел)

Пример: <command label="Сохранить">

<menu>

Описание: Меню команд

Пример: <menu><li>Пункт</li></menu>

<menuitem>

Описание: Пункт меню

Пример: <menuitem label="Новый">

Устаревшие теги (не рекомендуется использовать)

<acronym> - Аббревиатура (заменён на <abbr>)

<applet> - Java-апплет (заменён на <object>)

<basefont> - Базовый шрифт

<big> - Большой текст (заменён на CSS)

<blink> - Мигающий текст (не поддерживается)

<center> - Центрирование (заменён на CSS)

<dir> - Список каталогов (заменён на <ul>)

<font> - Шрифт (заменён на CSS)

<frame> - Фрейм (заменён на <iframe>)

<frameset> - Набор фреймов

<marquee> - Бегущая строка

<strike> - Зачёркнутый текст (заменён на <s>)

<tt> - Моноширинный текст (заменён на <code>)

<u> - Подчёркнутый (теперь имеет семантику)

<xmp> - Пример текста

Глобальные атрибуты (работают для всех тегов)

class - Класс элемента для стилизации

id - Уникальный идентификатор

style - Встроенные стили

title - Всплывающая подсказка

lang - Язык содержимого

dir - Направление текста (ltr/rtl)

hidden - Скрыть элемент

tabindex - Порядок навигации Tab

contenteditable - Редактируемый контент

data-* - Пользовательские данные

draggable - Можно перетаскивать

spellcheck - Проверка орфографии

translate - Перевод содержимого

И вся хвала Аллаху Господу всех миров!
Мусульманин
© 2026