1. Знайомство з HTML-документом
Давайте розберемося, як саме побудовані HTML-документи. З чого починається будь-який HTML-документ? Кожен HTML-документ має структуру, що складається з трьох вкладених тегів: html, head та body. Це стандарт, приклад:
<!DOCTYPE html>
<html>
<head>
Службові теги
</head>
<body>
Основний документ
</body>
</html>
Все, що відображає браузер, знаходиться всередині парного тега body (тіло документа). Всередині тега head знаходяться теги зі службовою/допоміжною інформацією для браузера.
Також на початку документа прийнято (не обов'язково) писати тип документа — DOCTYPE, щоб браузер краще розумів, як йому інтерпретувати помилки. Багато браузерів уміють коректно відображати документи з поламаною версткою.
2. Приклад HTML-документа
HTML-документ — це основа будь-якої веб-сторінки. Він повідомляє браузеру, як має виглядати сторінка. Ось простий приклад HTML-документа:
<!DOCTYPE html>
<html>
<head> <title>Назва сторінки</title> </head>
<body> <h1>Привіт, світе!</h1> <p>Це моя перша веб-сторінка.</p> </body>
</html>
Основні частини HTML-документа
Цей рядок називається декларацією типу документа (doctype). Вона повідомляє браузеру, що документ написаний на HTML5, останній версії мови HTML. Це важливо для правильного відображення сторінки.
<html>
Тег <html>; відкриває HTML-документ. Все вміст веб-сторінки має знаходитися всередині цього тега. Він позначає початок і кінець HTML-документа.
<head>
Тег <head> містить службову інформацію про сторінку. Ця інформація не відображається безпосередньо на веб-сторінці, але важлива для браузерів і пошукових систем.
Тег <title> задає назву сторінки, яка відображається на вкладці браузера. Це перше, що бачить користувач при відкритті сторінки.
<body>
Тег <body> містить весь видимий вміст веб-сторінки: текст, зображення, посилання, таблиці і так далі. Все, що бачить користувач на екрані, знаходиться всередині цього тега.
<h1>Привіт, світе!</h1>
Тег <h1> представляє собою заголовок першого рівня. Він використовується для найважливіших заголовків на сторінці. Текст всередині цього тега відображається великим і жирним шрифтом.
<p>Це моя перша веб-сторінка</p>
Тег <p> позначає параграф тексту. Він використовується для поділу тексту на логічні блоки. Текст всередині цього тега відображається як звичайний абзац.
<div>Це текстовий блок усередині контейнера</div>
Тег <div> є універсальним блочним контейнером. Він використовується для групування інших елементів і створення структури сторінки. Сам по собі він не змінює зовнішній вигляд контенту, але дозволяє застосовувати стилі до всієї групи елементів одночасно.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ