Примеры HTML элементов

Интерактивная демонстрация основных HTML тегов и их применения

📝 Текстовые элементы

Заголовки разных уровней

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5
Заголовок H6

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

Жирный текст с тегом strong

Курсивный текст с тегом em

Подчеркнутый текст с тегом u

Зачеркнутый текст с тегом del

Выделенный текст с тегом mark

Мелкий текст с тегом small

Текст с нижним и верхним индексом

Код для текстовых элементов

<h1>Заголовок первого уровня</h1>
<p>Обычный параграф с <strong>важным текстом</strong> и <em>акцентом</em>.</p>
<p>Формула воды: H<sub>2</sub>O</p>
<p>Степень: 2<sup>10</sup> = 1024</p>

📋 Списки

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

  • HTML - структура
  • CSS - оформление
  • JavaScript - интерактивность
  • Вложенный список:
    • Подпункт 1
    • Подпункт 2

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

  1. Первый шаг
  2. Второй шаг
  3. Третий шаг
  4. Вложенные шаги:
    1. Подшаг а
    2. Подшаг б

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

HTML
HyperText Markup Language - язык разметки гипертекста
CSS
Cascading Style Sheets - каскадные таблицы стилей
JavaScript
Язык программирования для создания интерактивных веб-страниц

🔗 Ссылки и навигация

Различные типы ссылок

Обычная внешняя ссылка

Внутренняя ссылка на другую страницу

Ссылка на якорь на этой странице

Ссылка на email

Ссылка на телефон

Ссылка в новой вкладке

Ссылка для скачивания файла

Код для ссылок

<!-- Внешняя ссылка -->
<a href="https://www.example.com">Посетить сайт</a>

<!-- Ссылка в новой вкладке -->
<a href="https://www.example.com" target="_blank">Открыть в новой вкладке</a>

<!-- Email ссылка -->
<a href="mailto:info@example.com">Написать письмо</a>

<!-- Телефонная ссылка -->
<a href="tel:+1234567890">Позвонить</a>

📊 Таблицы

Пример таблицы с данными

HTML Тег Назначение Категория Пример использования
<div> Блочный контейнер Структура Группировка элементов
<span> Строчный контейнер Структура Стилизация части текста
<img> Изображение Медиа Вставка картинок
<video> Видео Медиа Встраивание видео

Код для таблицы

<table>
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
</table>

📦 Семантические элементы HTML5

Структурные элементы

<section> - Логическая секция

Используется для группировки тематически связанного контента

<article> - Независимая статья

Самодостаточная часть контента

Другие семантические теги

<header> - Шапка страницы или секции
<footer> - Подвал страницы или секции
<main> - Основное содержимое

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

Изображения и медиа

Изображение с атрибутами
[Место для изображения]

<img src="photo.jpg" alt="Описание" width="200" height="150">

Элемент figure с подписью
[Изображение]
Подпись к изображению

Код для медиа элементов

<!-- Простое изображение -->
<img src="image.jpg" alt="Описание изображения" width="300" height="200">

<!-- Изображение с подписью -->
<figure>
    <img src="chart.png" alt="График продаж">
    <figcaption>График продаж за 2025 год</figcaption>
</figure>

<!-- Видео элемент -->
<video controls width="320" height="240">
    <source src="video.mp4" type="video/mp4">
    Ваш браузер не поддерживает видео.
</video>

<!-- Аудио элемент -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает аудио.
</audio>

💬 Цитаты и блоки кода

Различные виды цитат

"Это блочная цитата с использованием тега blockquote. Она обычно используется для длинных цитат и выделяется визуально." — Автор цитаты

Короткая цитата: Это встроенная цитата с тегом q

Код в строке: console.log('Hello');

Блоки кода и преформатированный текст

Преформатированный текст
    сохраняет все пробелы
        и переносы строк
            точно как написано

Клавиатурный ввод: Ctrl + C

Вывод программы: Hello World!

Переменная: x = y + 5

🔧 Специальные элементы

Интерактивные элементы

Кликните для раскрытия информации

Это скрытый контент, который появляется при клике на summary. Очень удобно для FAQ и дополнительной информации.


Этот блок открыт по умолчанию

Атрибут open делает блок раскрытым изначально.


Прогресс: 70%

Измерение: 6 из 10

Код для специальных элементов

<!-- Раскрывающийся блок -->
<details>
    <summary>Заголовок</summary>
    <p>Скрытое содержимое</p>
</details>

<!-- Индикатор прогресса -->
<progress value="32" max="100">32%</progress>

<!-- Измеритель -->
<meter value="8" min="0" max="10">8 из 10</meter>