HTML (HyperText Markup Language) є основною мовою для створення структури та вмісту веб-сторінок. Вона визначає, як елементи сторінки пов'язані між собою та як їх розташовувати на веб-сторінці. Розуміння структури сторінки HTML є важливим кроком для будь-якого веб-розробника. У цій статті ми розглянемо основні складові структури сторінки HTML і їх призначення.
<!DOCTYPE>: Починаючи з HTML5,
перший рядок в коді HTML визначає тип документа, використовуючи тег
<!DOCTYPE>.
Це вказує на браузер, як правильно інтерпретувати код HTML.
<html>: Весь вміст сторінки HTML поміщається всередині
елемента <html>. Він вказує, що це HTML-документ.
<head>: Елемент
<head> містить метадані сторінки, такі як заголовок документа,
посилання на зовнішні файли CSS, JavaScript, метатеги для пошукових систем і багато іншого. Інформація
в <head> не відображається безпосередньо на сторінці,
але використовується для конфігурації та налаштування сторінки.
<body>: Елемент <body>
визначає тіло сторінки, що відображається в браузері. Всі вмістові елементи, такі як текст, зображення, відео, посилання
і форми, розміщуються всередині цього елемента. <h1> - <h6>:
Заголовки використовуються для визначення рівня заголовку на сторінці. Заголовок
<h1> є найвищим рівнем, а заголовок
<h6> - найнижчим. Вони допомагають інтерпретувати та структурувати вміст
сторінки.
<p>: Елемент <p>
використовується для відображення абзаців тексту на сторінці. Весь текст між відкриваючим і закриваючим
тегами <p> вважається одним абзацем.
<ul>,
<ol>
та <li>: Елемент <ul>
представляє ненумерований список, а елемент <ol> - нумерований список.
Кожен пункт списку вказується за допомогою елемента <li class="grey">.
Вони допомагають структурувати і представляти інформацію в логічному порядку.
<a>: Елемент <a>
використовується для створення посилань на інші сторінки або ресурси. Зазвичай, він має атрибут href, який вказує URL посилання.
Це лише кілька основних елементів, які використовуються для створення структури сторінки HTML. Існує багато інших елементів та можливостей, що можна використовувати для створення різноманітних ефектів та функцій на веб-сторінках. Навчання та розуміння структури сторінки HTML допоможе вам створювати добре організовані та легкі для редагування веб-сторінки.
Приклад программи яку можна створити з наведеними тегами:
Приклад
<!DOCTYPE html>
<html>
<body>
<h1>Заголовок</h1>
<h2>Другий заголовок</h2>
<p>Далі буде простий список</p>
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
<li>Третій пункт</li>
</ul>
<a href="#">Посилання</a>
</body>
</html>
Але у браузері буде відображатися:
Результат
Далі буде простий список