Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Семантичні Елементи | Розширений HTML
Основи HTML

book
Семантичні Елементи

Давайте детальніше розглянемо кожен тег окремо:

header тег

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

Зверніть увагу, що це не слід плутати з тегом head, оскільки head та header мають різні призначення в HTML.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>header element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<a href="#">Website Logo</a>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>

nav тег

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>nav element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<a href="#">Website Logo</a>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

section тег

Організуйте ваш документ логічно, використовуючи заголовки для групування пов'язаного контенту. Це допомагає читачам краще зрозуміти ваш контент і покращує видимість у пошукових системах.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>section element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<!-- header content -->
</header>

<section>
<h1>Company title or brand phrase</h1>
<p>Welcome to our company. We specialize in...</p>
</section>

<section>
<h2>Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
</body>
</html>

article тег

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>article element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<!-- header content -->
</header>

<section>
<!-- section content -->
</section>

<article>
<h2>Blog Post Title</h2>
<p>Blog post content goes here...</p>
</article>
</body>
</html>

footer тег

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>footer element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<!-- header content -->
</header>

<section>
<!-- section content -->
</section>

<article>
<!-- article content -->
</article>

<footer>
<p>&copy; 2024 My Website. All Rights Reserved.</p>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</footer>
</body>
</html>

1. Яка основна мета тегу <header>?

2. Який HTML тег зазвичай використовується для визначення розділу навігаційних посилань, таких як меню або навігаційні панелі?

3. Яка основна функція тегу <section>?

4. Коли слід використовувати тег <footer>?

question mark

Яка основна мета тегу <header>?

Виберіть правильну відповідь

question mark

Який HTML тег зазвичай використовується для визначення розділу навігаційних посилань, таких як меню або навігаційні панелі?

Виберіть правильну відповідь

question mark

Яка основна функція тегу <section>?

Виберіть правильну відповідь

question mark

Коли слід використовувати тег <footer>?

Виберіть правильну відповідь

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 2
some-alt