InnoMarts logo
InnoMarts
Fast websites
← Back to course

Структура HTML-Документа

Структура HTML-Документа

З поверненням.

У попередньому уроці ти створив свою першу HTML-сторінку.

Тепер сповільнимося і уважніше подивимось на структуру.

Бо HTML — це не просто “кілька тегів на сторінці”.

Хороший HTML-документ має чітку структуру.

Якщо структура погана, браузер усе одно спробує тобі допомогти.

Але покладатися на браузер, щоб він виправляв твій хаос, — це як просити офіціанта перебудувати кухню під час вечері.

Можливо?

Може.

Хороша ідея?

Ні.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

Базова HTML-Структура

Стандартний HTML-документ виглядає так:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя Сторінка</title>
</head>
<body>
  <h1>Ласкаво просимо</h1>
  <p>Це моя вебсторінка.</p>
</body>
</html>

Ця структура — фундамент майже кожної HTML-сторінки.

Вона виглядає маленькою.

Але робить важливу роботу.

Як каркас будинку.

Не гламурно.

Дуже необхідно.

DOCTYPE

Перший рядок:

<!DOCTYPE html>

Він каже браузеру:

Цей документ використовує сучасний HTML.

Точніше, він каже браузеру використовувати standards mode.

Тобто браузер має показувати сторінку за сучасними вебстандартами.

Якщо забути DOCTYPE, браузер може перейти в дивну поведінку сумісності.

А ніхто не хоче, щоб браузер поводився так, ніби знайшов старий запилений посібник з 2003 року.

Тому залишай його.

Завжди.

Елемент html

Після DOCTYPE ми відкриваємо головний HTML-елемент:

<html lang="uk">

І закриваємо його в кінці:

</html>

Усе на сторінці знаходиться всередині цього елемента.

Це корінь документа.

Великий контейнер.

Цифрова валіза.

Атрибут lang

Ця частина важлива:

lang="uk"

Вона каже браузерам і допоміжним технологіям, якою мовою написана сторінка.

Для англійської:

<html lang="en">

Для італійської:

<html lang="it">

Для польської:

<html lang="pl">

Для української:

<html lang="uk">

Для російської:

<html lang="ru">

Це допомагає:

Маленький атрибут.

Велика користь.

У HTML багато таких маленьких речей.

Деталі, які тихо рятують тебе від майбутнього болю.

Елемент head

Елемент <head> містить інформацію про сторінку.

Приклад:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя Сторінка</title>
</head>

Цей вміст зазвичай не видно прямо на сторінці.

Користувач не бачить <head> як звичайний контент.

Але браузер його читає.

<head> — це backstage твоєї вебсторінки.

Не видно глядачам.

Але дуже важливо.

Тег meta charset

Цей рядок важливий:

<meta charset="UTF-8">

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

Використовуй UTF-8.

Він підтримує багато мов і спеціальних символів.

Без нього текст іноді може виглядати зламаним.

Наприклад, українські букви, кирилиця або символи можуть перетворитися на цифрові макарони.

Тому так:

<meta charset="UTF-8">

Завжди додавай його.

Твій майбутній багатомовний сайт подякує тобі.

Тихо.

Але щиро.

Viewport Meta Tag

Цей рядок також важливий:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Він допомагає сторінці правильно відображатися на телефонах і планшетах.

Без нього мобільні браузери можуть показувати сторінку як маленьку desktop-версію, стиснуту в екран телефона.

Дуже незручно.

Як читати газету через замкову щілину.

Viewport tag каже браузеру:

Використовуй ширину пристрою як ширину сторінки.

Це основа responsive design.

Навіть якщо CSS пізніше буде відповідати за вигляд, HTML має правильно підготувати сторінку.

Спочатку хороша структура.

Потім красивий layout.

Елемент title

Елемент <title> задає назву у вкладці браузера:

<title>Моя Сторінка</title>

Це не те саме, що h1.

title з’являється у вкладці браузера, закладках і результатах пошуку.

h1 з’являється всередині сторінки.

Приклад:

<title>Про Мене</title>

А всередині body:

<h1>Про Мене</h1>

Вони можуть бути схожими.

Але це не одне й те саме.

Одне — для браузера і пошукових систем.

Інше — для контенту сторінки.

Елемент body

Елемент <body> містить усе, що видно на сторінці:

<body>
  <h1>Ласкаво просимо</h1>
  <p>Це моя вебсторінка.</p>
</body>

Заголовки, абзаци, зображення, посилання, списки, форми — усе йде в body.

Якщо користувач це бачить, швидше за все, воно належить до body.

Body — це місце, де живе справжня сторінка.

Head — кімната планування.

Body — сцена.

Відступи

HTML не вимагає ідеальних відступів, щоб працювати.

Це працює:

<body><h1>Привіт</h1><p>Текст</p></body>

Але це виглядає погано.

І важче читається.

Краще так:

<body>
  <h1>Привіт</h1>
  <p>Текст</p>
</body>

Відступи допомагають людям бачити структуру.

Браузери можуть пробачити хаотичний HTML.

Люди — не завжди.

Особливо майбутній ти о 23:47, який намагається зрозуміти власний код.

HTML-Коментарі

У HTML можна писати коментарі:

<!-- Це коментар -->

Коментарі не показуються на сторінці.

Вони корисні для нотаток:

<!-- Головний заголовок сторінки -->
<h1>Ласкаво просимо</h1>

Не зловживай коментарями.

Хороший HTML має бути зрозумілим сам по собі.

Коментарі мають пояснювати корисні речі, а не прикрашати сторінку як конфетті.

Створи Кращу Сторінку

Відкрий свій index.html з уроку 1.

Заміни його на це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя HTML-Сторінка для Практики</title>
</head>
<body>
  <h1>Моя HTML-Сторінка для Практики</h1>
  <p>Ця сторінка має чисту HTML-структуру.</p>
  <p>Я вивчаю, як браузери розуміють вебсторінки.</p>
</body>
</html>

Збережи файл.

Відкрий або онови його в браузері.

Сторінка все ще виглядає просто.

Це нормально.

Сьогодні ми не прикрашаємо.

Ми будуємо скелет.

Скелету ще не потрібен капелюх.

Типові Помилки

Забути DOCTYPE

Не починай одразу з:

<html>

Використовуй:

<!DOCTYPE html>
<html lang="uk">

Браузер любить ясність.

Покласти Видимий Контент у head

Це неправильно:

<head>
  <h1>Привіт</h1>
</head>

Видимий контент належить до body:

<body>
  <h1>Привіт</h1>
</body>

head — для інформації про сторінку.

body — для видимого контенту.

Забути viewport

Без цього:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

сторінка може погано поводитися на мобільних пристроях.

Додай це зараз.

Не чекай, поки сайт виглядатиме як поштова марка на телефоні.

Практика

Створи новий файл:

touch structure.html

Всередині створи повний HTML-документ з:

Приклад:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Структури</title>
</head>
<body>
  <!-- Головний заголовок -->
  <h1>Практика HTML-Структури</h1>
  <p>Ця сторінка допомагає мені зрозуміти HTML-структуру.</p>
  <p>Хороша структура робить сторінки легшими для читання і підтримки.</p>
</body>
</html>

Відкрий його в браузері.

Потім зміни title і онови сторінку.

Подивись, як змінюється вкладка браузера.

Маленька річ.

Справжній результат.

Міні-Завдання

Створи файл:

profile.html

Побудуй валідний HTML-документ для простої сторінки профілю.

Він має містити:

Без CSS.

Без JavaScript.

Тільки чистий HTML.

Бо перед тим як одягати сторінку в піджак, треба правильно поставити кістки.

Підсумок

Сьогодні ти дізнався, що:

HTML-структура може виглядати просто.

Але саме ця проста структура — початок кожної хорошої вебсторінки.

Наступний Урок

У наступному уроці ми попрацюємо з текстом, заголовками й абзацами.

Навчимося організовувати контент так, щоб сторінка не виглядала так, ніби хтось скинув слова з балкона.