Семантична верстка. Основні HTML-теги

Ділюсь технічними навичками та уроками з HTML-верстки.

H1, H2, H3, H4, H5, H6 - теги заголовків

Використовуються для виводу заголовків. В залежності від рівня (ваги) заголовка (головний, другорядний і т.д.) використовуємо певний тег H.
H1 – НАЙголовніший заголовок на сторінці. І, оскільки, НАЙголовніший заголовок на сторінці може бути лише один, інакше який він тоді НАЙголовніший, той й тег H1 використовується лише раз на сторінці.
Теги H2-H6 можна використовувати безліч разів виводячи за допомогою їх інші другорядні заголовки різних рівнів (ваги).

<h1>Найголовніший заголовок сторінки</h1>
<!-- інший контент -->
<h2>Заголовок сторінки другого рівня</h2>
<!-- інший контент -->
<h2>Заголовок сторінки другого рівня</h2>
<!-- інший контент -->
<h3>Заголовок сторінки третього рівня</h3>
<!-- інший контент -->
<h3>Заголовок сторінки третього рівня</h3>
<!-- інший контент -->
<h3>Заголовок сторінки третього рівня</h3>
<!-- інший контент -->
<h4>Заголовок сторінки четвертого рівня</h4>
<!-- інший контент -->
<h5>Заголовок сторінки п'ятого рівня</h5>
<!-- інший контент -->
<h5>Заголовок сторінки п'ятого рівня</h5>
<!-- інший контент -->
<h6>Заголовок сторінки шостого рівня</h6>

Найголовніший заголовок сторінки

Заголовок сторінки другого рівня

Заголовок сторінки третього рівня

Заголовок сторінки четвертого рівня

Заголовок сторінки п'ятого рівня

Заголовок сторінки шостого рівня

P - параграф тексту

Абзаци (параграфи) зазвичай представлені у візуальних медіа як блоки тексту, відокремлені від суміжних блоків порожніми рядками та/або відступом першого рядка, але абзаци HTML можуть бути будь-якими структурними групами пов’язаного вмісту, наприклад зображень або полів форми.
Розбиття вмісту на абзаци допомагає зробити сторінку доступнішою. Програми зчитування з екрана та інші допоміжні технології надають ярлики, за допомогою яких користувачі можуть переходити до наступного або попереднього абзацу, дозволяючи їм швидко переглядати вміст, наприклад, як пробіл дозволяє користувачам візуального перегляду переходити.
Цікава деталь. Писати початковий тег P обов'язково, а от кінцевий тег (зачиняючий) можна опустити, якщо за елементом P безпосередньо слідують ADDRESS, ARTICLE, ASIDE, BLOCKQUOTE, DIV, DL, FIELDSET, FOOTER, FORM, H1-H6, HEADER, NAV, OL, SECTION, TABLE, UL та інші або інший елемент P, або якщо в батьківському елементі більше немає вмісту, і батьківський елемент не є елементом A.

<h1>Тарас Шевченко</h1>
<p>
	Тарас Шевченко - видатний український поет, прозаїк, 
	мислитель та громадський діяч XIX століття. 
	Його твори мають глибокий філософський зміст, 
	високу художню цінність та історичну важливість.
</p>
<p>
	Одним із найвідоміших творів Шевченка є поема "Кобзар".
	У цьому творі поет описує українське село, зображає життя 
	його мешканців, їхні проблеми та боротьбу за свободу. 
	У поемі "Катерина" Шевченко зображує долю невільницької дівчини, 
	яка працює на панщині та мріє про свободу. У своїй поезії 
	Шевченко висловлював протест проти соціальної нерівності, 
	гноблення та безправ'я, відстоював право українського 
	народу на волю та незалежність.
</p>
<!-- інший контент -->

Тарас Шевченко

Тарас Шевченко - видатний український поет, прозаїк, мислитель та громадський діяч XIX століття. Його твори мають глибокий філософський зміст, високу художню цінність та історичну важливість.

Одним із найвідоміших творів Шевченка є поема "Кобзар". У цьому творі поет описує українське село, зображає життя його мешканців, їхні проблеми та боротьбу за свободу. У поемі "Катерина" Шевченко зображує долю невільницької дівчини, яка працює на панщині та мріє про свободу. У своїй поезії Шевченко висловлював протест проти соціальної нерівності, гноблення та безправ'я, відстоював право українського народу на волю та незалежність.

A - гіперпосилання

Використовується для створення посилань на інші веб-сторінки сайту, різні ресурси в мережі Інтернет тощо.
Влучне завтосування тегу A - це побудова будь-якого інтерактивного елементу, при кліку на який користувач здійнює перехід (пересування) в інше місце сторінки, іншу сторінку, сайт тощо.

<h1>Тарас Шевченко</h1>
<p>
	Тарас Шевченко - видатний український поет, прозаїк, 
	мислитель та <a href="some-page.html">громадський діяч</a>
	XIX століття. Його твори мають глибокий філософський зміст, 
	високу художню цінність та історичну важливість.
</p>
<p>
	Одним із найвідоміших творів Шевченка є поема "Кобзар".
	У цьому творі поет описує українське село, зображає життя 
	його мешканців, їхні проблеми та боротьбу за свободу. 
	У поемі <a href="https://some-site.ua">"Катерина"</a>
	Шевченко зображує долю невільницької дівчини, 
	яка працює на панщині та мріє про свободу. У своїй поезії 
	Шевченко висловлював протест проти соціальної нерівності, 
	гноблення та безправ'я, відстоював право українського 
	народу на волю та незалежність.
</p>
<!-- інший контент -->

Тарас Шевченко

UL LI, OL LI - списки та їх елементи

Використовується для побудови маркованих (UL) або нумерованих (OL) списків (переліку) контенту.

<h1>Тарас Шевченко</h1>
<p>
	Тарас Шевченко - видатний український поет, прозаїк,
	мислитель та громадський діяч XIX століття. 
	Його твори мають глибокий філософський зміст, 
	високу художню цінність та історичну важливість.
</p>
<h2>Деякі вірші</h2>
<ol>
	<li>Думи мої…</li>
	<li>Дівичії ночі</li>
	<li>Чи не покинуть нам, небого</li>
</ol>
<h2>Деякі поеми</h2>
<ul>
	<li>Гайдамаки</li>
	<li>Тарасова ніч</li>
	<li>Катерина</li>
</ul>
													
<!-- інший контент -->

Тарас Шевченко

Тарас Шевченко - видатний український поет, прозаїк,
мислитель та громадський діяч XIX століття. Його твори мають глибокий філософський зміст, високу художню цінність та історичну важливість.

Деякі вірші

Думи мої…
Дівичії ночі
Чи не покинуть нам, небого

Деякі поеми

Гайдамаки
Тарасова ніч
Катерина

DL, DT, DD - побудова списку означень

Список означень складається з термінів (DT) та їх пояснень (DD), які містяться всередині тегу DL.
Можна використовувати для створення будь-якого списку означень, де кожен термін має своє визначення. Це можуть бути, наприклад, технічні терміни, скорочення, терміни з області мистецтва або науки, тощо.

<dl>
	<dt>Тарас Шевченко</dt>
	<dd>видатний український поет</dd>
	<dt>Леся Українка</dt>
	<dd>українська письменниця, перекладачка та культурна діячка</dd>
</dl>
<!-- інший контент -->

Тарас Шевченко: видатний український поет
Леся Українка: українська письменниця, перекладачка та культурна діячка

IMG, VIDEO, AUDIO - вивід медіа-контенту

Використовується для виводу медіа-контенту - зображень, відео, аудіо

<h1>Тарас Шевченко</h1>
<p>
	Тарас Шевченко - видатний український поет, прозаїк,
	мислитель та громадський діяч XIX століття. 
	Його твори мають глибокий філософський зміст, 
	високу художню цінність та історичну важливість.
</p>
<img src="img/image.webp" alt="Тарас Шевченко 1859">
<video controls src="files/some-video.mp4"></video>
<audio controls src="files/taras_shevchenko_zapovit_-_zapovit.mp3"></audio>
<!-- інший контент -->

Тарас Шевченко

Тарас Шевченко - видатний український поет, прозаїк,
мислитель та громадський діяч XIX століття. Його твори мають глибокий філософський зміст, високу художню цінність та історичну важливість.

Тарас Шевченко 1859

FIGURE, FIGCAPTION - групування та підпис медіа-елементів

Використовується для групування медіа-елементів (таких як зображення, відео або аудіо) з їхніми підписами (FIGCAPTION) та можливим описом
Тег FIGURE та FIGCAPTION дозволяють більш ефективно структурувати контент на сторінці та покращити її доступність для користувачів, які використовують допоміжні технології для сприйняття контенту.

<h1>Тарас Шевченко</h1>
<p>
	Тарас Шевченко - видатний український поет, прозаїк,
	мислитель та громадський діяч XIX століття. 
	Його твори мають глибокий філософський зміст, 
	високу художню цінність та історичну важливість.
</p>
<figure>
	<img src="img/image.webp" alt="Тарас Шевченко 1859">
	<figcaption>Тарас Шевченко, 1859 рік</figcaption>
</figure>
<!-- інший контент -->

Тарас Шевченко

Тарас Шевченко - видатний український поет, прозаїк,
мислитель та громадський діяч XIX століття. Його твори мають глибокий філософський зміст, високу художню цінність та історичну важливість.

TABLE, TR, TH, TD - вивід табличних даних

Використовується для створення таблиць на веб-сторінках. Таблиця складається з рядків (TR), заголовкив (TH) та комірок (TD), які знаходяться всередині рядків.
Додатково використовуються теги THEAD для позначення верхньої частини таблиці, TBODY для позначення основної частини таблиці, TFOOT для позначення нижньої частини таблиці та інші.
Буде влучним використання саме цих тегів для виводу табличних даних.

<h1>Деякі твори Тараса Шевченка</h1>
<table>
	<thead>
		<tr>
			<th>Номер</th>
			<th>Назва</th>
			<th>Рік</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Причинна</td>
			<td>1837</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Тарасова ніч</td>
			<td>1838</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Гайдамаки</td>
			<td>1841</td>
		</tr>
	</tbody>
</table>
<!-- інший контент -->

Деякі твори Тараса Шевченко

Номер	Назва	Рік
1	Причинна	1837
2	Тарасова ніч	1838
3	Гайдамаки	1841

Q, BLOCKQUOTE, CITE - вивід цитати та автора

Q, BLOCKQUOTE використовуються для відображення цитати на веб-сторінці. Вони вказують, що текст між тегами є цитатою з іншого джерела.
Q - для коротких, однорядкових цитат, BLOCKQUOTE - для цілого блоку з цитатою.
CITE використовується для відображення назви произведення або джерела інформації, на яке посилається цитата.
Має семантичну роль і допомагає підвищити доступність веб-сторінки, оскільки він надає читачам додаткову інформацію про джерело цитати. Крім того, використання тега CITE може мати позитивний вплив на SEO-оптимізацію сторінки.

<h1>Тарас Шевченко</h1>
<p>
	Тарас Шевченко - видатний український поет, прозаїк,
	мислитель та громадський діяч XIX століття. 
	Його твори мають глибокий філософський зміст, 
	високу художню цінність та історичну важливість.
</p>
<h4>Одна з найвідоміших цитат Тараса Шевченка з його поезії "Заповіт":</h4>
<blockquote>
	"Ще не вмерла України і слава, і воля,
	Ще нам, браття молодії, усміхнеться доля!
	Згинуть наші воріженьки, як роса на сонці,
	Запануєм і ми, браття, у своїй сторонці."
	<cite>Тарас Шевченко</cite>
</blockquote>
<!-- інший контент -->

Тарас Шевченко

Тарас Шевченко - видатний український поет, прозаїк,
мислитель та громадський діяч XIX століття. Його твори мають глибокий філософський зміст, високу художню цінність та історичну важливість.

Одна з найвідоміших цитат Тараса Шевченка з його поезії "Заповіт":

"Ще не вмерла України і слава, і воля, Ще нам, браття молодії, усміхнеться доля! Згинуть наші воріженьки, як роса на сонці, Запануєм і ми, браття, у своїй сторонці." Тарас Шевченко

ADDRESS - вивід контактної інформації

Використовується для визначення контактної інформації, пов'язаної з автором або власником веб-сторінки. Це допомагає створювати більш доступний та зрозумілий контент для користувачів, включаючи людей з обмеженими можливостями.
Крім того, використання тега "address" дозволяє пошуковим системам та іншим інструментам, які аналізують веб-сторінки, краще розуміти, яка інформація відноситься до контактних даних, що може допомогти в оптимізації пошукового досвіду та покращенні ранжування в пошукових результатах.
Контактна інформація, надана вмістом елемента ADDRESS, може мати будь-яку форму, яка відповідає контексту, і може включати будь-який тип необхідної контактної інформації, як-от фізичну адресу, URL-адресу, електронну адресу, номер телефону, ідентифікатор соціальних мереж , географічні координати тощо. Елемент ADDRESS повинен містити ім’я особи, людей або організації, яких стосується контактна інформація.
Цей елемент не повинен містити більше інформації, ніж контактна інформація

<!-- інший контент -->
<h2>Контакти</h2>
<address>
  Ви можете зв'язатись з автором 
  написавши листа <a href="mailto:mail@mail.com">mail@mail.com</a>, 
  або по телефону <a href="tel:+123456789">123456789</a>
</address>
<!-- інший контент -->

Контакти

Ви можете зв'язатись з автором написавши листа mail@mail.com, або по телефону 123456789

TIME - вивід дати та часу

Призначений для позначення дати та/або часу. Він має важливе семантичне значення для пошукових систем та програм з обробки даних, таких як електронні календарі.
Атрибут datetime вказує на дату в форматі рік-місяць-день, а текст між відкриваючим та закриваючим тегами TIME містить зрозумілу для людей назву дати.
За допомогою цього тега можна вказати час з точністю до хвилини або секунди, а також зазначити часовий пояс.

<!-- інший контент -->
<h2>Дата публікації</h2>
<p>
    <time datetime="2023-04-15">15 квітня 2023</time>
</p>
<p>
    <time datetime="2023-04-15T14:30:00+03:00">15 квітня 2023, 14:30 (за Київським часом)</time>
</p>
<!-- інший контент -->

Дата публікації

15 квітня 2023

15 квітня 2023, 14:30 (за Київським часом)

DETAILS, SUMMARY - вивід спойлерів

Використовується для створення спойлерів на веб-сторінках - блоків тексту, які можуть бути згорнуті або розгорнуті за допомогою кліку на назву блоку.
Має семантичне значення, оскільки він дозволяє вказати, що блок тексту є спойлером або прихованою інформацією, яка може бути розкрита за потреби. Це допомагає покращити доступність та розуміння вмісту веб-сторінки користувачами з різними потребами.

<!-- інший контент -->
<h2>Питання/відповіді</h2>
<details open>
    <summary>Хто такий Тарас Шевченко?</summary>
    <p>
        Тарас Шевченко - видатний український поет, прозаїк,
        мислитель та громадський діяч XIX століття. 
        Його твори мають глибокий філософський зміст, 
        високу художню цінність та історичну важливість.
    </p>
</details>
<details>
    <summary>Хто така Леся Українка?</summary>
    <p>
        Леся Українка - українська письменниця, 
        перекладачка та культурна діячка
    </p>
</details>
<!-- інший контент -->

Питання/відповіді

Хто такий Тарас Шевченко?

Хто така Леся Українка?

Леся Українка - українська письменниця, перекладачка та культурна діячка

MARK vs SPAN - виділення та стилізація тексту

За допомогую тегу MARK та SPAN (з використанням CSS) можна візуально виділити частину тексту, але, на відміну від SPAN, MARK має семантичне значення.
Якщо використовується в цитаті (Q, BLOCKQUOTE), це, як правило, вказує на текст, який становить особливий інтерес, або матеріал, який потребує особливої уваги. Це як за допомогою маркера ми виділяємо щось в книзі, щоб позначити уривки, які нас цікавлять. В іншому випадку MARK вказує на частину вмісту документа, яка, імовірно, має відношення до поточних дій користувача. Наприклад, для вказівки слів, які відповідають пошуку.

<h1>Тарас Шевченко</h1>
<p>
    Тарас Шевченко - видатний <mark>український</mark> поет, прозаїк,
    мислитель та громадський діяч 
    <span style="background-color: yellow; color: black;">XIX століття</span>.
    Його твори мають глибокий філософський зміст,
    високу художню цінність та історичну важливість.
</p>
<!-- інший контент -->

Тарас Шевченко

STRONG vs B - важливість та жирність тексту

З точки зору візуального результату, обидва ці теги виведуть текст жирним, однак семантичне значення в них різне.
Елемент STRONG представляє текст більшої важливості, в той час коли B просто виводить жирний текст без спеціального семантичного значення.
І те, і інше не призначене для суто декоративних цілей, саме для цього призначено стилі CSS за допомогою тегу SPAN.

<h1>Тарас Шевченко</h1>
<p>
    <strong>Тарас Шевченко</strong> - видатний український поет, прозаїк,
    мислитель та громадський діяч <b>XIX століття</b>.
    Його твори мають глибокий філософський зміст,
    високу художню цінність та історичну важливість.
</p>
<!-- інший контент -->

Тарас Шевченко

Тарас Шевченко - видатний український поет, прозаїк, мислитель та громадський діяч XIX століття. Його твори мають глибокий філософський зміст, високу художню цінність та історичну важливість.

EM vs I - наголос та текст що відрізняється

З точки зору візуального результату, обидва ці теги виведуть текст курсивом, однак семантичне значення в них різне.
Елемент EM представляє наголос у своєму вмісті, тоді як елемент I представляє текст, який відрізняється від звичайної прози, як-от іноземне слово, думки вигаданого персонажа тощо.
Людина або програмне забезпечення, яке читає текст, вимовляє текст виведений у EM з наголосом, використовуючи словесний наголос (гучніше).
Це означає, що правильний варіант використання залежить від ситуації. І те, і інше не призначене для суто декоративних цілей, саме для цього призначено стилі CSS за допомогою тегу SPAN.

<h1>Тарас Шевченко</h1>
<p>
    Тарас Шевченко - видатний <em>український</em> поет, прозаїк, 
    мислитель та громадський діяч <i>XIX</i> століття. 
    Його твори мають глибокий філософський зміст, 
    високу художню цінність та історичну важливість.

</p>
<!-- інший контент -->

Тарас Шевченко

Тарас Шевченко - видатний український поет, прозаїк, мислитель та громадський діяч XIX століття. Його твори мають глибокий філософський зміст, високу художню цінність та історичну важливість.

FORM - вивід форми

Визначає HTML-форму на сторінці. Має важливу семантичну роль, оскільки він допомагає підвищити доступність веб-сторінки та зрозумілість для користувачів. Він вказує, що на сторінці є форма, яка дозволяє взаємодіяти зі сторінкою, і вказує метод і дію, яку необхідно виконати при відправці форми.
Буде влучним використання тегу FORM при наявності таких елементів форми як INPUT, TEXTAREA, SELECT та інші

<!-- інший контент -->
<form action="https://some-server.com" method="POST">
    <!-- елементи форм -->
</form>
<!-- інший контент -->

INPUT, TEXTAREA, SELECT, OPTION - поля та елементи введення даних

За допомогою цих тегів та їх атрибутів ми можемо вивести той чи інший тип елементу для введення даних форми користувачем.
Важливо вдало підбирати який саме елемент або тип поля виводити.

<!-- інший контент -->
<form action="https://some-server.com" method="POST">
	<div>
		<!-- Поле вводу -->
		<input name="somename" type="text">
	</div>
	<div>
		<!-- "Прапорець" -->
		<input name="somename" type="checkbox">
	</div>
	<div>
		<!-- Вибір файлу -->
		<input name="somename" type="file">
	</div>
	<div>
		<!-- Випадаючий список -->
		<select name="somename">
			<option value="1">Опція №1</option>
			<option value="2">Опція №2</option>
			<option value="3">Опція №3</option>
		</select>
	</div>
	<div>
		<!-- Поле вводу великого тексту -->
		<textarea name="somename"></textarea>
	</div>
	<!-- ...інші елементи форм -->
</form>
<!-- інший контент -->

*тег DIV використаний в прикладі лише для зручності показу, інформація по ньому буде далі

LABEL - створення мітки (підпису) для поля введення

Використовується для створення мітки для елемента форми, такого як поле введення або кнопки.
Тег LABEL може мати два різні варіанти використання - за допомогою атрибуту FOR та за допомогую вкладеності елемента форми в LABEL.
Використання тегу LABEL дозволяє користувачеві легше розуміти, що саме вони вводять у поле введення або яку дію виконує кнопка.

<!-- інший контент -->
<form action="https://some-server.com" method="POST">
	<div>
		<label for="input-1">Підпис поля</label>
		<!-- Поле вводу -->
		<input id="input-1" name="somename" type="text">
	</div>
	<div>
		<label>
			<!-- "Прапорець" -->
			<input name="somename" type="checkbox">
			Підпис поля
		</label>
	</div>
	<div>
		<label style="display: block; margin-bottom: 5px;">
			<!-- Вибір файлу -->
			<input name="someitemname" type="radio">
			Підпис поля #1
		</label>
	</div>
	<div>
		<label>
			<input name="someitemname" type="radio">
			Підпис поля #2
		</label>
	</div>
	<!-- інші елементи форм -->
</form>
<!-- інший контент -->

*тег DIV використаний в прикладі лише для зручності показу, інформація по ньому буде далі

FIELDSET, LEGEND - групування взаємозв'язаних елементів форми

Семантика FIELDSET полягає в тому, щоб групувати пов'язані елементи форми в логічні блоки з заголовком, які можна звернути до окремо від інших частин форми.
Використання FIELDSET допомагає зробити форму більш організованою та зручною для використання користувачем.

<!-- інший контент -->
<form action="https://some-server.com" method="POST">
	<fieldset>
		<legend>Особисті дані</legend>
		<div>
			<label for="name">Ім'я</label>
			<!-- Поле вводу -->
			<input id="name" name="name" type="text">
		</div>
		<div>
			<label for="email">E-mail</label>
			<!-- Поле вводу -->
			<input id="email" name="email" type="email">
		</div>
	</fieldset>
	<fieldset>
		<legend>Адреса</legend>
		<div>
			<label for="city">Місто</label>
			<!-- Поле вводу -->
			<input id="city" name="city" type="text">
		</div>
		<div>
			<label for="street">Вулиця</label>
			<!-- Поле вводу -->
			<input id="street" name="street" type="text">
		</div>
	</fieldset>
	<!-- інші елементи форм -->
</form>
<!-- інший контент -->

*тег DIV використаний в прикладі лише для зручності показу, інформація по ньому буде далі

BUTTON, BUTTON vs A - створення кнопки

Використовується для створення кнопок на веб-сторінці, які можуть виконувати дії при кліку на них.
За допомогою певних атрибутів, та при розміщені всередені тега FORM, може відправляти або очищати форму.

<!-- інший контент -->
<form action="https://some-server.com" method="POST">
	<fieldset>
		<legend>Особисті дані</legend>
		<div>
			<label for="name">Ім'я</label>
			<!-- Поле вводу -->
			<input id="name" name="name" type="text">
		</div>
		<div>
			<label for="email">E-mail</label>
			<!-- Поле вводу -->
			<input id="email" name="email" type="email">
		</div>
	</fieldset>
	<fieldset>
		<legend>Адреса</legend>
		<div>
			<label for="city">Місто</label>
			<!-- Поле вводу -->
			<input id="city" name="city" type="text">
		</div>
		<div>
			<label for="street">Вулиця</label>
			<!-- Поле вводу -->
			<input id="street" name="street" type="text">
		</div>
	</fieldset>
	<button type="reset">Очистити</button>
	<button type="submit">Відправити</button>
	<!-- інші елементи форм -->
</form>
<h2>BUTTON vs A</h2>
<!-- 
	Кнопка виконує дії 
	без переходу на іншу 
	строрінку, або сайт
-->
<div>
	<button type="button">Відкрити меню</button>
	<button type="button">Відкрити попап</button>
</div>
<!-- 
	Посилання переадресовує 
	користувача в інше місце 
	або ресурс
-->
<div>
	<a href="https://edu.fls.guru/">Курс з верстки</a>
	<a href="contacts.html">Контакти</a>
	<a href="#top">Наверх</a>
</div>
<!-- інший контент -->

*тег DIV використаний в прикладі лише для зручності показу, інформація по ньому буде далі

BUTTON vs A

Курс з верстки Головна Наверх

HEADER - заголовок (верхня частина) сайту (блоку)

Використовується для відображення заголовку сторінки або розділу вмісту на сторінці. Можна використовувати в будь-якому місці документа, але зазвичай він розміщується на початку BODY, у якості верхньої частини усього сайту.
Є важливим елементом HTML для визначення заголовка або верхньої частини вмісту веб-сторінки. Використання тегу дозволяє чітко визначити логотип, назву сайту та основні навігаційні елементи на сторінці.
Кількість заголовків на сторінці залежить від конкретної сторінки і її вмісту. На одній сторінці може бути декілька розділів, кожен з яких може мати свій власний заголовок. Проте важливо пам'ятати, що використання занадто багатьох заголовків може зробити сторінку складною для сприйняття і читання.

<!-- інший контент -->
<header>
	<!-- логотип -->
	<!-- основні навігаційні елементи -->
	<!-- тощо -->
</header>
<!-- інший контент -->

FOOTER - "підвал" (нижня частина) сайту (блоку)

Використовується для розміщення додаткової інформації про сторінку, такої як авторські права, посилання на контактну інформацію або посилання на інші сторінки сайту. Зазвичай підвал розміщується в нижній частині сторінки, і зазвичай на одній сторінці може бути лише один підвал.
Кількість підвалів на сторінці залежить від конкретної сторінки і її вмісту. На одній сторінці може бути декілька розділів, кожен з яких може мати свій власний підвал. Проте важливо пам'ятати, що використання занадто багатьох підвалів може зробити сторінку складною для сприйняття і читання.

<!-- інший контент -->
<footer>
	<!-- контактна інформація -->
	<!-- навігаційні елементи -->
	<!-- тощо -->
</footer>
<!-- інший контент -->

MAIN - головний (унікальний) контент сторінки

Використовується для визначення основного вмісту сторінки. Цей елемент зазвичай містить головний контент сторінки, такий як текст, зображення, таблиці, форми, відео та інші елементи.
Елемент "main" повинен бути використаний лише один раз на сторінці і повинен бути розміщений в середині елементу "body". Він допомагає пошуковим системам та іншим інструментам для обробки контенту зрозуміти, що саме є головним вмістом сторінки.

<!-- інший контент -->
<main>
	<!-- головний контент сторінки -->
</main>
<!-- інший контент -->

ASIDE - бічна панель сайту, другорядний контент

Використовується для визначення бічної панелі на сторінці, яка містить додаткову інформацію про головний контент сторінки. Зазвичай, бічна панель може містити посилання на інші сторінки, рекламні блоки, меню навігації або інші елементи.
Елемент ASIDE можна вкладати в елемент MAIN у HTML коді. Така структура відповідатиме випадкам, коли бічна панель містить додаткову інформацію, яка пов'язана з головним контентом сторінки.

<!-- інший контент -->
<aside>
	<!-- другорядний контент сторінки -->
	<!-- фільтри, реклама -->
	<!-- тощо -->
</aside>
<!-- інший контент -->

NAV - вивід навігаційних елементів

Використовується для визначення розділу веб-сторінки, що містить основні навігаційні посилання (меню)
Використовувати більше одного тегу NAV на сторінці, якщо на вашому веб-сайті є декілька навігаційних меню. Однак, як правило, використовується тільки один тег NAV на сторінці.
Є важливим для доступності веб-сторінки, оскільки допомагає людям з візуальними обмеженнями коректно ідентифікувати головне меню навігації та переходити до необхідної сторінки.

<!-- інший контент -->
<nav>
	<ul>
		<li><a href="#">Головна</a></li>
		<li><a href="#">Про нас</a></li>
		<li><a href="#">Контакти</a></li>
	</ul>
</nav>
<!-- інший контент -->

SECTION - розділення сторінки на секції

Використовується для групування пов'язаних елементів на сторінці. Він дозволяє логічно розділити вміст сторінки на різні частини зі своїм власним заголовком.
Основна мета використання SECTION полягає в тому, щоб покращити доступність веб-сторінки та сприяти розумінню структури документа.

<!-- інший контент -->
<section>
	<!-- заголовок -->
	<!-- контент -->
	<!-- інші теги -->
</section>
<!-- інший контент -->

ARTICLE - групування пов'язаних елементів в незалежний об'єкт

Використовується для визначення окремого контенту, який може бути самостійним інформаційним блоком.
Наприклад, це може бути новина, стаття, блог-пости, прев'ю статті(новини), коментар або інші повідомлення.
Зазвичай, кожен такий об'єкт має свій заголовок.

<!-- інший контент -->
<article>
	<!-- заголовок -->
	<!-- контент -->
	<!-- інші теги -->
</article>
<!-- інший контент -->

DIV - не має семантичного значення

DIV не має конкретного змістового значення, його використовують зазвичай для розділення веб-сторінки на блоки і групування елементів в цих блоках.
Варто використовувати, коли інші теги не підходять за призначенням.

<!-- інший контент -->
<div>
	<!-- контент -->
	<!-- інші теги -->
</div>
<!-- інший контент -->

Вкладеність тегів, валідація

Маючи таке різноманіття тегів, постійно виникає питання щодо коректності вкладеності один в інший.
Звісно, не варто будувати конструкції тегами для виводу контенту, а контент виводити будівельними, але не все так просто.

<!-- інший контент -->
<article>
	<h1>Твори Тараса Шевченко</h1>
	<article>
		<img src="img/image.webp" alt="Image">
		<h4>
			<a href="some-page.html">"Тарасова ніч"</a>
		</h4>
		<div>
			<p>
				На розпутті кобзар сидить
				Та на кобзі грає,
				Кругом хлопці та дівчата,
				Як мак процвітає...
			</p>
		</div>
	</article>
	<article>
		<img src="img/image.webp" alt="Image">
		<h4>
			<a href="some-page.html">"Думка"</a>
		</h4>
		<div>
			<p>
				Нащо мені чорні брови,
				Нащо карі очі,
				Нащо літа молодії...
			</p>
		</div>
	</article>
<!-- інший контент -->
<article>
	<h1>Тарас Шевченко</h1>
	<section>
		<h2>Біографія</h2>
		<div>
			<p>
				Тарас Шевченко - видатний український поет, прозаїк, 
				мислитель та громадський діяч XIX століття. 
				Його твори мають глибокий філософський зміст, 
				високу художню цінність та історичну важливість.
			</p>
		</div>
	</section>
</article>
<!-- інший контент -->
<article>
	<a href="some-page.html">
		<img src="img/image.webp" alt="Image">
		<h4>Тарас Шевченко</h4>
		<div>
			<p>
				Тарас Шевченко - видатний український поет, прозаїк, 
				мислитель та громадський діяч XIX століття. 
				Його твори мають глибокий філософський зміст, 
				високу художню цінність та історичну важливість.
			</p>
		</div>
	</a>
</article>
<!-- інший контент -->

Твори Тараса Шевченко

Тарасова ніч

На розпутті кобзар сидить Та на кобзі грає, Кругом хлопці та дівчата, Як мак процвітає...

Думка

Нащо мені чорні брови, Нащо карі очі, Нащо літа молодії...

Тарас Шевченко

Біографія

Тарас Шевченко

Сервіси для перевірки коректності вкладеності:

https://caninclude.glitch.me/ - перевірка чи можна вкладати один тег в інший
https://validator.w3.org/ - HTML валідатор

Повернутися назад

СЕМАНТИЧНА ВЕРСТКА САЙТІВ

HTML-теги та практичні приклади семантичної верстки для початківці

Семантична верстка. Основні HTML-теги

Теги для виводу контента

Найголовніший заголовок сторінки

Заголовок сторінки другого рівня

Заголовок сторінки другого рівня

Заголовок сторінки третього рівня

Заголовок сторінки третього рівня

Заголовок сторінки третього рівня

Заголовок сторінки четвертого рівня

Заголовок сторінки п'ятого рівня

Заголовок сторінки п'ятого рівня

Заголовок сторінки шостого рівня

Тарас Шевченко

Тарас Шевченко

Тарас Шевченко

Деякі вірші

Деякі поеми

Тарас Шевченко

Тарас Шевченко

Деякі твори Тараса Шевченко

Тарас Шевченко

Одна з найвідоміших цитат Тараса Шевченка з його поезії "Заповіт":

Контакти

Дата публікації

Питання/відповіді

Тарас Шевченко

Тарас Шевченко

Тарас Шевченко

Теги для виводу форм та елементів форм

BUTTON vs A

Теги для побудови конструкцій (будівельні)

Вкладеність тегів, валідація

Твори Тараса Шевченко

Тарасова ніч

Думка

Тарас Шевченко

Біографія

Тарас Шевченко

Сервіси для перевірки коректності вкладеності:

СЕМАНТИЧНА ВЕРСТКА САЙТІВ

СЕМАНТИЧНА ВЕРСТКА САЙТІВ. HTML-теги та практичні приклади семантичної верстки для початківці

Шпаргалка є доповненням до випуску: