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