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

Полное руководство по всем основным HTML тегам с примерами использования

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

Основные теги, которые формируют каркас HTML-документа:

<!DOCTYPE html>

HTML5

Объявление типа документа, должно быть первой строкой в HTML-документе.

<html>

Все версии

Корневой элемент HTML-документа. Содержит весь контент страницы.

Атрибуты:

  • lang - определяет язык документа (например, "ru")

<head>

Все версии

Содержит метаинформацию о документе: заголовок, ссылки на стили, скрипты и др.

<body>

Все версии

Содержит видимое содержимое страницы (текст, изображения, ссылки и т.д.).

Пример структуры документа:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример HTML</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это пример HTML-документа.</p>
</body>
</html>

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

Теги для работы с текстовым содержимым:

<h1>-<h6>

Все версии

Заголовки шести уровней (h1 - самый важный, h6 - наименее важный).

Рекомендации:

  • Используйте только один h1 на странице
  • Соблюдайте иерархию заголовков

<p>

Все версии

Абзац текста. Блочный элемент с отступами сверху и снизу.

<span>

Все версии

Универсальный строчный контейнер для текста, часто используется для стилизации.

<strong>

Все версии

Выделяет текст как важный (обычно жирным шрифтом).

<em>

Все версии

Выделяет текст как значимый (обычно курсивом).

Медиа-элементы

Теги для работы с изображениями, видео и аудио:

<img>

Все версии

Встраивает изображение в документ.

Атрибуты:

  • src - путь к изображению
  • alt - альтернативный текст
  • width/height - размеры

Пример:

<img src="logo.png" alt="Логотип" width="200">

<video>

HTML5

Встраивает видео в документ.

Атрибуты:

  • controls - отображает элементы управления
  • autoplay - автоматическое воспроизведение
  • loop - зацикливание видео

Пример:

<video width="400" controls>
    <source src="movie.mp4" type="video/mp4">
    Ваш браузер не поддерживает видео.
</video>

<audio>

HTML5

Встраивает аудио в документ.

Пример:

<audio controls>
    <source src="sound.mp3" type="audio/mpeg">
</audio>

Списки

Теги для создания различных типов списков:

<ul>

Все версии

Маркированный (ненумерованный) список.

Пример:

<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
</ul>

<ol>

Все версии

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

Атрибуты:

  • type - тип нумерации (1, A, a, I, i)
  • start - начальное значение

<li>

Все версии

Элемент списка (используется внутри <ul> или <ol>).

Формы

Теги для создания интерактивных форм:

<form>

Все версии

Контейнер для элементов формы.

Атрибуты:

  • action - URL для отправки данных
  • method - HTTP-метод (GET/POST)

<input>

Все версии

Поле ввода (текст, пароль, чекбокс и др.).

Атрибуты:

  • type - тип поля (text, password, email и др.)
  • placeholder - подсказка в поле
  • required - обязательное поле

Пример:

<input type="text" placeholder="Ваше имя" required>

<button>

Все версии

Кнопка для отправки формы или других действий.

Пример:

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

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

Теги для улучшения структуры и доступности документа:

<header>

HTML5

Шапка документа или раздела.

<footer>

HTML5

Подвал документа или раздела.

<article>

HTML5

Самостоятельный фрагмент контента (статья, пост и т.д.).

<section>

HTML5

Логический раздел документа.

<nav>

HTML5

Навигационные ссылки.

Полный пример HTML-документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример страницы</title>
    <style>
        body { font-family: Arial, sans-serif; }
        header { background: #f0f0f0; padding: 20px; }
    </style>
</head>
<body>
    <header>
        <h1>Заголовок страницы</h1>
        <nav>
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Статья</h2>
            <p>Пример содержимого статьи.</p>
        </article>
    </main>
    
    <footer>
        <p>© 2024 Пример сайта</p>
    </footer>
</body>
</html>