Теория урока

70. Семантические и структурные теги в HTML5

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке мы начали знакомство с новыми тегами HTML5. В этом уроке разберемся с тегами для более семантически правильного структурирования веб-документа.

Примечание (10.2024)

Под «новыми тегами» имею ввиду те теги, которые не были изучены ранее в курсе.

Семантические/структурные теги в HTML5

Для начала приведу список основных структурных элементов HTML5.

<article> - раздел документа, в котором описана самостоятельная единица контента;
<aside> - контент, который находится в стороне (сайдбар, боковая колонка сайта);
<bdi> - используется для изолирование текста от влияния направление текста родителя;
<details> и <summary> - блок с раскрывающемся контентом;
<dialog> - всплывающее окно;
<figure> и <figcaption> - группировка элементов и добавление подписей к ним (ранее с помощью его мы группировали изображения и подпись к нему)
<footer> - определяет нижнюю часть сайт (подвал);
<header> - определяет верхнюю часть сайта (шапку);
<main> - основной контент документа;
<mark> - выделение или подсветка важного фрагмента текста;
<meter> - отображение числового значения в заданном диапазоне;
<nav> - ссылки навигации;
<progress> - индикатор прогресса выполнения задачи;
<section> - независимый блок/раздел в веб-документе;
<time> - определение даты/времени;
<wbr> - место для переноса строки.

Пример структуры HTML-страницы

Теперь на основе приведенного выше списка скорректируем структуру HTML-страницы:

Пример (html)

<!DOCTYPE HTML>
<html lang = "ru">
    <head>
        <meta charset = "UTF-8">
        <title>Заголовок страницы</title>
    </head>
    <body>
        <header>
            Шапка
            <nav>
                Меню
            </nav>
        </header>
        <main>
            <section>
                <h1>Заголовок первого уровня</h1>
                Тест документа
            </section>
        </main>
        <aside>
            Сайдбар
        </aside>
        <footer>
            Подвал
        </footer>
    </body>
</html>

В первой строке указываем тип документа:

Пример (html)

<!DOCTYPE HTML>

Далее содержимое сайта помещаем в контейнер <html> и определяем основной язык документа в атрибуте lang:

Пример (html)

<html lang = "ru">
	<!-- весь контент -->
</html>

В контейнере технической информации <head> указываем заголовок веб-страницы и кодировку:

Пример (html)

<head>
	<meta charset = "UTF-8">
    <title>Заголовок страницы</title>
</head>

Далее создаем контейнер <body>, в который помещается весь видимый для пользователя контент:

Пример (html)

<body>
	<!-- видимый контент -->
</body>

Контейнер <body> делим на четыре основные семантические части:

Шапка (<header>);
Основная часть (<main>);
Сайдбар (<aside>);
Подвал (<footer>).

Пример (html)

<header>
	<!-- содержимое шапки -->
</header>
<main>
	<!-- основное содержимое -->
</main>
<aside>
	<!-- содержимое сайдбара -->
</aside>
<footer>
	<!-- содержимое подвала -->
</footer>

В контейнер <header> добавляем блок меню сайта:

Пример (html)

<header>
    Шапка
    <nav>
        Меню
    </nav>
</header>

В блок <main> добавляем независимый блок <section> с основным содержимым HTML-документа:

Пример (html)

<main>
    <section>
        <h1>Заголовок первого уровня</h1>
        Тест документа
    </section>
</main>

Все, наша семантически-правильная HTML5 страница веб-документа готова. Далее рассмотрим примеры использования другие семантических тегов.

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

Раскрывающийся контент с помощью тега `<details>`

Пример (html)

<details>
    <summary>Спойлер</summary>
    <p>Здесь какой-то текст</p>
</details>

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Всплывающее окно с помощью тега `<dialog>`

Пример (html)

<dialog open>
    Привет, мир!
</dialog>

Использование тега `<meter>`

Пример (html)

<p>
    Рейтинг сайта
    <meter min="1" max="5" value="4.5"></meter>
</p>

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Использование тега `<progress>`

Пример (html)

<p>
    Прогресс загрузки
    <progress min="1" max="100" value="10"></progress>
</p>

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Перенос длинных слов в нужных местах

Пример (html)

<p>Словобезпробелов<wbr>невлазитнаэкран</p>

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

В этом уроке вы познакомились с большим количеством семантических тегов HTML5. Они помогут поисковикам правильно индексировать ваши веб-сайты и относиться к ним лояльнее. В следующем уроке мы еще немного поговорим об особенностях HTML5.

70. Семантические и структурные теги в HTML5

Семантические/структурные теги в HTML5

Пример структуры HTML-страницы

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

Раскрывающийся контент с помощью тега <details>

Всплывающее окно с помощью тега <dialog>

Использование тега <meter>

Использование тега <progress>

Перенос длинных слов в нужных местах

Похожие уроки Codebra

Раскрывающийся контент с помощью тега `<details>`

Всплывающее окно с помощью тега `<dialog>`

Использование тега `<meter>`

Использование тега `<progress>`