# Скелет документа HTML

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FY3FX4m5SFSFJ6st8nhBL%2Fimages.png?alt=media&#x26;token=05c634e8-0dab-44c2-a02c-21a70ae7f742" alt=""><figcaption></figcaption></figure>

На картинці зображено базову структуру HTML-документа. Розширення таких файлів зазвичай <mark style="background-color:red;">.html</mark> або <mark style="background-color:red;">.htm</mark>. Це по суті - "дерево" тегів. Це мінімальна конструкція на яку "нарощується" вся наступна верстка. Наведемо нижче відповідний код для цього дерева:&#x20;

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Service information -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- Content -->
</body>
</html>
```

## Оголошення типу документа[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/doc-structure#%D0%BE%D0%B3%D0%BE%D0%BB%D0%BE%D1%88%D0%B5%D0%BD%D0%BD%D1%8F-%D1%82%D0%B8%D0%BF%D1%83-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0) <a href="#ogoloshennya-tipu-dokumenta" id="ogoloshennya-tipu-dokumenta"></a>

<mark style="background-color:red;">\<!DOCTYPE ></mark> - декларативний запис. Це по суті не тег, а обов'язкова інструкція, за якою браузер дізнається в якій версії HTML написаний документ.

Тільки отримавши версію браузер зможе правильно відобразити сторінку. Тому цей запис ставлять з самої гори документа.

<mark style="background-color:red;">\<!DOCTYPE html></mark> - означає, що документ написаний за специфікацією [HTML Living Standard](https://html.spec.whatwg.org/multipage/).&#x20;

## Елементи верхнього рівня[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/doc-structure#%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8-%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D1%8C%D0%BE%D0%B3%D0%BE-%D1%80%D1%96%D0%B2%D0%BD%D1%8F) <a href="#elementi-verkhnogo-rivnya" id="elementi-verkhnogo-rivnya"></a>

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2F9H6zKbRW2SolNaiJz4GE%2Fhtml-head-body-7c2a73.dcf01064.png?alt=media&#x26;token=20241705-1d19-41e0-a798-68c114b22935" alt="" width="375"><figcaption></figcaption></figure>

### Тег \<html>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/doc-structure#%D1%82%D0%B5%D0%B3-html) <a href="#teg-html" id="teg-html"></a>

<mark style="background-color:red;">\<html></mark>-елемент - є кореневим і вміщує всі інші елементи сторінки. Весь код і текст поза межами цього елемента браузер проігнорує.

```html
<!DOCTYPE html>
<html lang="en"> </html>
```

Атрибут <mark style="background-color:red;">lang</mark> вказує браузеру яка основна мова тексту на сторінці. Це дозволяє розширити додаткові можливості, наприклад застосувати скрінрідери тощо.

### Тег \<head>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/doc-structure#%D1%82%D0%B5%D0%B3-head) <a href="#teg-head" id="teg-head"></a>

У елементі <mark style="background-color:red;">\<head></mark> зберігають службову інформацію. Це, зокрема, заголовок, опис сторінки, кодування, підключення скриптів, підключення файлів стилів тощо. Ця інформація не відображається у вікні браузера, а є допоміжною для коректного відображення контенту.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Service information -->
</head>
</html>
```

### Тег \<body>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/doc-structure#%D1%82%D0%B5%D0%B3-body) <a href="#teg-body" id="teg-body"></a>

У елементі <mark style="background-color:red;">\<body></mark> міститься весь контент сторінки, який ми хочемо відобразити у вікні браузера.&#x20;

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Service information -->
</head>
<body>
  <!-- Content -->
</body>
</html>
```

## Теги заголовка документа[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/doc-structure#%D1%82%D0%B5%D0%B3%D0%B8-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0) <a href="#tegi-zagolovka-dokumenta" id="tegi-zagolovka-dokumenta"></a>

Службові теги розміщують в шапці документа (head). Переважна більшість не відображається у вікні браузера.

### Тег \<title> - заголовок сторінки

Текст, розміщений в тезі <mark style="background-color:red;">\<title></mark> містить короткий опис сторінки, має містити не більше 60 символів, щоб повністю відобразитися на сторінці й показується у назві вкладки сторінки.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document title</title>
</head>
<body>
  <!-- Content -->
</body>
</html>
```

### Тег \<meta> - метадані

У тегах \<meta> описують додаткову інформацію, наприклад про кодування сторінки, або пояснення для пошуковиків.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Service information -->
  <meta charset="UTF-8">
  <meta name="description" content="Information about page" />
  <meta name='keywords' content='your, tags'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- Content -->
</body>
</html>
```

У сучасній веб-розробці використовують кодування символів (<mark style="background-color:red;">charset</mark>) UTF-8. Утім на деяких сайтах, особливо розроблених давно можна зустріти різні варіації кодування. І якщо обрати неправильну, кодову таблицю, то відобразяться ієрогліфи.

Короткий опис сторінки розташовують у метатезі <mark style="background-color:red;">description</mark>. Це має бути текст довжиною до 150 символів.

У метатезі <mark style="background-color:red;">keywords</mark> вказують через кому головні слова які описують сторінку.

У метатезі <mark style="background-color:red;">viewport</mark> вказують налаштування відображення контенту на сторінці тощо.

Більше про метатеги і як їх сприймає google можна прочитати [тут](https://support.google.com/webmasters/answer/79812), а ширший перелік метатегів можна дослідити [тут](https://gist.github.com/whitingx/3840905).&#x20;

## Потік документа[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/doc-structure#%D0%BF%D0%BE%D1%82%D1%96%D0%BA-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0) (Флоу) <a href="#potik-dokumenta" id="potik-dokumenta"></a>

Потік - це порядок в якому відображаються елементи у верстці. Потік іде зліва - направо (у східних країнах справа - наліво) і згори - вниз. Якщо немає примусової зміни потоку, то елементи відображаються в тому порядку в якому вони вказані в HTML-документі.

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2Fyw6qe3110qtEBQ1sWvxN%2Fhtml-flow.png?alt=media&#x26;token=436b885a-50e6-4ee7-83e1-05602632902a" alt="" width="375"><figcaption></figcaption></figure>

Всі елементи мають прямокутну форму. і займають певне своє місце на сторінці.

Елементи бувають блокові і рядкові.&#x20;

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FP24rMt3yn7EkglNHroz5%2Finline-vs-block-elements-44860e.2d5e4a82.png?alt=media&#x26;token=9c72b776-8d31-4724-92ca-ff9baeab1035" alt="" width="375"><figcaption></figcaption></figure>

### **Блоковий елемент (block-level element)**

Блокові елементи займають увесь рядок незалежно від ширини вікна браузера чи кількості контенту в елементі. Тому такі елементи розташовуються одне за одним вертикально згори вниз.

![markup](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/img/lesson-01/block-elements.png)

### **Рядковий елемент (inline element)**

Рядкові елементи займають місце згідно зі своїм вмістом. Елемент ніби "огортає" контент. Відтак рядкові елементи можуть розташовуватися одне за одним в рядок, а при закінченні простору - переноситись на наступний рядок.

![markup](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/img/lesson-01/inline-elements.png)УВАГА

Тож, теги можуть бути блокові, рядкові, самозакривні, метатеги, або мати кілька типів одночасно. Перевірити тип тегу можна [тут](https://htmlreference.io/).

**Покликання:**

[Мета-теги, які розуміє Google](https://support.google.com/webmasters/answer/79812)

[Перелік мета-тегів](https://gist.github.com/whitingx/3840905)

[Перевірка типу тегу](https://htmlreference.io/)
