Тема 23 HTML5

HTML5

Пояснення:

Головні теги HTML5

HTML5 є найновішим стандартом, що описує HTML. Цей термін представляє дві різні концепції:

1) Це нова версія мови HTML, з новими елементами, атрибутами і поведінкою
2) Це великий стек технологій, котрі надають більшого різноманіття та потужності Веб-сайтам та додаткам.

У HTML5 для структури коду введено кілька нових тегів: <article>, <section>, <footer>, <header>, <nav>, які замінюють в деяких випадках звичний <div>. Хоча здається, що особливої різниці між тегами <div class = "header"> і <header> немає, між ними лежить величезна прірва. Потрібно пам'ятати, що теги орієнтовані не на людей!

<header> - задає «шапку» сайту;
<main> - призначений для основного контенту;
<nav> - задає навігацію по сайту;
<section> - задає розділ документа, може застосовуватися для блоку новин, контактної інформації;
<article> - задає зміст сайту на кшталт новини, статті, записи блогу, форуму або ін;
<footer> - задає «підвал» сайту або розділу, в ньому може розташовуватися ім'я автора, дата документа, контактна і правова інформація;

Тег <video>

Додає, відтворює і керує настройками відеоролика на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений тег <source>.
Властивість controls - додає панель управління до відеоролика.

Тег <audio>

Додає, відтворює і керує настройками аудіоролика на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений тег <source>.
Властивість controls - додає панель управління до аудіоролика.

Таблиця:

№	Тема	Приклад коду	Підсумок
1	<header>	`<body> <header> <h1>Мій сайт</h1> </header> </body>`	Верхня частина сторінки або розділу. Містить заголовок, логотип або навігацію.
2	<nav>	`<body> <nav> <ul> <li>Головна</li> <li>Контакти</li> </ul> </nav> </body>`	Семантичний блок для навігації по сайту.
3	<main>	`<body> <main> <section>...</section> </main> </body>`	Основний контент сторінки. Має бути тільки один <main> на сторінці.
4	<article>	`<body> <article> <p>Текст новини...</p> </article> </body>`	Незалежний самостійний блок контенту, який може існувати окремо від решти сторінки.
5	<section>	`<body> <article> <section> <h2>Послуги</h2> <p>Опис послуг...</p> </section> <section> <h2>Про нас</h2> <p>Опис...</p> </section> </article> </body>`	Логічний розділ сторінки або статті. Використовується для групування контенту за темою.
6	<footer>	`<body> <footer> <p>© 2025 Мій сайт</p> </footer> </body>`	Нижня частина сторінки або розділу. Містить копірайт, контакти, посилання.
7	<audio>	`<body> <audio controls> <source src="music.mp3" type="audio/mpeg"> Ваш браузер не підтримує аудіо. </audio> </body>`	Вставка аудіофайлу. Можна додати: controls – користувач бачить плеєр; autoplay – автозапуск; loop – повтор; muted – вимикає звук.
8	<video>	`<body> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Ваш браузер не підтримує відео. </video> </body>`	Вставка відеофайлу з плеєром. Можна додати: controls – плеєр; autoplay – автозапуск; loop – повтор; muted – вимикає звук.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC