MarkusFx (itPit)

Темная тема

Элементы ​

Элемент article ​

  • <article> - независимая статья или запись;

Например:

index.html
html
<!doctype html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <title>Моя первая страница</title>
    </head>
    <body>
        <article>
            <h2>Как выучить HTML за неделю</h2>
            <p>Никак...</p>
            <footer>
                <p>Автор: Иван Петров • 18 июня 2025</p>
            </footer>
        </article>
    </body>
</html>

Элемент section ​

  • <section> - логически обособленный раздел;

Например:

index.html
html
<section>
    <h2>Наши услуги</h2>
    <ul>
        <li>Разработка сайтов</li>
        <li>Продвижение в поиске</li>
        <li>Техническая поддержка</li>
    </ul>
</section>

Элемент nav ​

  • <nav> - блок с навигацией (меню, ссылки);

Например:

index.html
html
<nav>
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
        <li><a href="/contact">Контакты</a></li>
    </ul>
</nav>

Элемент header ​

  • <header> - шапка страницы или раздела;

Например:

index.html
html
<header>
    <h1>Мой сайт</h1>
    <p>Добро пожаловать на мой блог о веб-разработке</p>
    <nav>
        <a href="/">Главная</a> |
        <a href="/blog">Блог</a>
    </nav>
</header>

Элемент aside ​

  • <aside> - дополнительная информация;

Например:

index.html
html
<aside>
    <h3>Популярные статьи</h3>
    <ul>
        <li><a href="/html-basics">Основы HTML</a></li>
        <li><a href="/css-grid">CSS Grid</a></li>
    </ul>
</aside>

Элемент main ​

  • <main> - основное содержимое страницы;

Например:

index.html
html
<main>
    <h2>Последние статьи</h2>

    <article>
        <h3>Что такое семантическая верстка?</h3>
        <p>Семантическая верстка - это способ структурировать HTML...</p>
    </article>

    <article>
        <h3>Изучаем Flexbox</h3>
        <p>Flexbox позволяет удобно выравнивать элементы...</p>
    </article>
</main>

Элемент figure ​

  • <aside> - иллюстрация с подписью;
  • <figcaption> - подпись;

Например:

index.html
html
<figure>
    <img src="/images/html/cat-001.png" alt="Кот" />
    <figcaption>Котэ</figcaption>
</figure>
  • <footer> - колонтитул (подвал) страницы;

Например:

index.html
html
<footer>
    <p>&copy; 2025 Моя компания</p>
    <nav>
        <a href="/privacy">Политика конфиденциальности</a> |
        <a href="/terms">Условия использования</a>
    </nav>
</footer>

Элемент address ​

  • <address> - контактные данные;

Например:

index.html
html
<address>
    <p>Автор: Иван Петров</p>
    <p>
        Email: <a href="mailto:ivan@example.com">ivan@example.com</a><br />
        Телефон: <a href="tel:+79991234567">+7 (999) 123-45-67</a>
    </p>
</address>

© 2023-2025, MarkusFx (itPit)