← HTML & CSS/Структура HTML-документа#2 из 383← Предыдущий Следующий →+10 XP

Полезно по теме:Гайд: старт в frontend Практика: DOM и события Термин: DOM Маршрут: старт с нуля

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

Каждый HTML-документ — это не просто набор тегов. Это строго структурированный файл, который браузер умеет читать и интерпретировать. Если нарушить структуру, браузер постарается угадать что ты имел в виду, но результат непредсказуем.

Минимальный корректный HTML-документ

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

Разберём каждую строку.

DOCTYPE — объявление типа документа

<!DOCTYPE html>

Это не тег, а инструкция браузеру: «перед тобой современный HTML5». Без DOCTYPE браузер переходит в режим совместимости (quirks mode) и рендерит страницу по старым правилам — всё поедет.

Тег `<html>` — корень документа

<html lang="ru">

Это корневой элемент — все остальные элементы находятся внутри него. Атрибут lang говорит браузеру и поисковикам, на каком языке написана страница. Это важно для SEO и читалок для незрячих.

Тег `<head>` — невидимая голова

Всё, что находится в <head>, не показывается пользователю напрямую, но критично для работы страницы:

<head>
  <meta charset="UTF-8" />           <!-- Кодировка текста -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Название в табе браузера</title>
  <link rel="stylesheet" href="styles.css" />
</head>

meta charset — кодировка

<meta charset="UTF-8" />

Без этой строки русский текст превратится в кракозябры: «ÐÑÐµÑÐ¾ÐÐ». UTF-8 поддерживает все языки мира — всегда используй именно её.

meta viewport — адаптивность под мобильные

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

Без этой строки мобильный браузер масштабирует страницу как десктопную — текст станет крошечным. Это обязательная строка для любого современного сайта.

Тег `<title>` — заголовок вкладки

То, что ты видишь в табе браузера и в результатах поиска Google — это <title>. Очень важно для SEO: поисковик показывает его как заголовок ссылки.

Тег `<body>` — видимая часть

Всё, что видит пользователь на странице, находится в <body>. Текст, картинки, кнопки, формы — всё здесь.

Типичные ошибки

Ошибка 1: Забыть DOCTYPE

Страница может выглядеть нормально в Chrome, но сломаться в Safari или на мобилке.

Ошибка 2: Русский текст без charset

<head>
  <!-- Нет meta charset — русский текст будет кракозябрами -->
  <title>Мой сайт</title>
</head>

Ошибка 3: Поместить контент в `<head>`

<head>
  <h1>Этот текст не отобразится!</h1>  <!-- Так нельзя -->
</head>

Ошибка 4: Не закрыть `<html>` или `<body>`

Браузер исправит это автоматически, но явная структура — признак профессионализма.

В реальных проектах

В реальных проектах структуру HTML-документа обычно генерируют фреймворки (Next.js, Nuxt). Но понимать что происходит «под капотом» обязательно — иначе не разберёшься в проблемах с SEO, мобильной вёрсткой и кодировками.

Примеры

Чтение мета-информации страницы через DOM

// Читаем структурные элементы текущего документа
console.log('Заголовок страницы:', document.title)

// Получаем lang у корневого элемента html
const htmlEl = document.documentElement
console.log('Тег корня:', htmlEl.tagName)         // HTML
console.log('Язык страницы:', htmlEl.lang || '(не задан)')

// Смотрим на head и body
console.log('Тег head:', document.head.tagName)   // HEAD
console.log('Тег body:', document.body.tagName)   // BODY

// Читаем мета-тег charset
const metaTags = document.querySelectorAll('meta')
console.log('Количество meta-тегов:', metaTags.length)

metaTags.forEach(meta => {
  const charset = meta.getAttribute('charset')
  const name = meta.getAttribute('name')
  if (charset) console.log('Кодировка:', charset)
  if (name === 'viewport') console.log('Viewport:', meta.getAttribute('content'))
})

Создаём структуру документа программно

// Имитируем создание структуры HTML-документа
const structure = {
  doctype: '<!DOCTYPE html>',
  html: { lang: 'ru' },
  head: {
    charset: 'UTF-8',
    viewport: 'width=device-width, initial-scale=1.0',
    title: 'Road to JS — учим JavaScript'
  },
  body: 'Здесь будет контент'
}

console.log('DOCTYPE:', structure.doctype)
console.log('HTML lang:', structure.html.lang)
console.log('Кодировка:', structure.head.charset)
console.log('Viewport:', structure.head.viewport)
console.log('Заголовок:', structure.head.title)
console.log('Контент:', structure.body)

// Проверяем длину title — SEO рекомендует до 60 символов
const title = structure.head.title
console.log('Длина title:', title.length, 'символов')
console.log('Подходит для SEO:', title.length <= 60 ? 'да' : 'нет')

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

Минимальный корректный HTML-документ

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

Разберём каждую строку.

DOCTYPE — объявление типа документа

<!DOCTYPE html>

Тег `<html>` — корень документа

<html lang="ru">

Тег `<head>` — невидимая голова

Всё, что находится в <head>, не показывается пользователю напрямую, но критично для работы страницы:

<head>
  <meta charset="UTF-8" />           <!-- Кодировка текста -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Название в табе браузера</title>
  <link rel="stylesheet" href="styles.css" />
</head>

meta charset — кодировка

<meta charset="UTF-8" />

meta viewport — адаптивность под мобильные

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

Тег `<title>` — заголовок вкладки

Тег `<body>` — видимая часть

Всё, что видит пользователь на странице, находится в <body>. Текст, картинки, кнопки, формы — всё здесь.

Типичные ошибки

Ошибка 1: Забыть DOCTYPE

Страница может выглядеть нормально в Chrome, но сломаться в Safari или на мобилке.

Ошибка 2: Русский текст без charset

<head>
  <!-- Нет meta charset — русский текст будет кракозябрами -->
  <title>Мой сайт</title>
</head>

Ошибка 3: Поместить контент в `<head>`

<head>
  <h1>Этот текст не отобразится!</h1>  <!-- Так нельзя -->
</head>

Ошибка 4: Не закрыть `<html>` или `<body>`

Браузер исправит это автоматически, но явная структура — признак профессионализма.

В реальных проектах

Примеры

Чтение мета-информации страницы через DOM

// Читаем структурные элементы текущего документа
console.log('Заголовок страницы:', document.title)

// Получаем lang у корневого элемента html
const htmlEl = document.documentElement
console.log('Тег корня:', htmlEl.tagName)         // HTML
console.log('Язык страницы:', htmlEl.lang || '(не задан)')

// Смотрим на head и body
console.log('Тег head:', document.head.tagName)   // HEAD
console.log('Тег body:', document.body.tagName)   // BODY

// Читаем мета-тег charset
const metaTags = document.querySelectorAll('meta')
console.log('Количество meta-тегов:', metaTags.length)

metaTags.forEach(meta => {
  const charset = meta.getAttribute('charset')
  const name = meta.getAttribute('name')
  if (charset) console.log('Кодировка:', charset)
  if (name === 'viewport') console.log('Viewport:', meta.getAttribute('content'))
})

Создаём структуру документа программно

// Имитируем создание структуры HTML-документа
const structure = {
  doctype: '<!DOCTYPE html>',
  html: { lang: 'ru' },
  head: {
    charset: 'UTF-8',
    viewport: 'width=device-width, initial-scale=1.0',
    title: 'Road to JS — учим JavaScript'
  },
  body: 'Здесь будет контент'
}

console.log('DOCTYPE:', structure.doctype)
console.log('HTML lang:', structure.html.lang)
console.log('Кодировка:', structure.head.charset)
console.log('Viewport:', structure.head.viewport)
console.log('Заголовок:', structure.head.title)
console.log('Контент:', structure.body)

// Проверяем длину title — SEO рекомендует до 60 символов
const title = structure.head.title
console.log('Длина title:', title.length, 'символов')
console.log('Подходит для SEO:', title.length <= 60 ? 'да' : 'нет')

Задание

Напиши корректную структуру HTML-документа для интернет-магазина кроссовок: DOCTYPE, тег html с lang="ru", в head — meta charset="UTF-8", meta viewport, и title "Интернет-магазин кроссовок". В body добавь заголовок h1 с названием магазина.

Подсказка

charset должен быть "UTF-8". Viewport: content="width=device-width, initial-scale=1.0". Title и h1 могут содержать одинаковый текст. lang="ru" — для русскоязычной страницы.

Загружаем среду выполнения...

Загружаем AI-помощника...

← HTML & CSS/Структура HTML-документа#2 из 383← Предыдущий Следующий →+10 XP

Полезно по теме:Гайд: старт в frontend Практика: DOM и события Термин: DOM Маршрут: старт с нуля

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

Минимальный корректный HTML-документ

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

Разберём каждую строку.

DOCTYPE — объявление типа документа

<!DOCTYPE html>

Тег `<html>` — корень документа

<html lang="ru">

Тег `<head>` — невидимая голова

Всё, что находится в <head>, не показывается пользователю напрямую, но критично для работы страницы:

<head>
  <meta charset="UTF-8" />           <!-- Кодировка текста -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Название в табе браузера</title>
  <link rel="stylesheet" href="styles.css" />
</head>

meta charset — кодировка

<meta charset="UTF-8" />

meta viewport — адаптивность под мобильные

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

Тег `<title>` — заголовок вкладки

Тег `<body>` — видимая часть

Всё, что видит пользователь на странице, находится в <body>. Текст, картинки, кнопки, формы — всё здесь.

Типичные ошибки

Ошибка 1: Забыть DOCTYPE

Страница может выглядеть нормально в Chrome, но сломаться в Safari или на мобилке.

Ошибка 2: Русский текст без charset

<head>
  <!-- Нет meta charset — русский текст будет кракозябрами -->
  <title>Мой сайт</title>
</head>

Ошибка 3: Поместить контент в `<head>`

<head>
  <h1>Этот текст не отобразится!</h1>  <!-- Так нельзя -->
</head>

Ошибка 4: Не закрыть `<html>` или `<body>`

Браузер исправит это автоматически, но явная структура — признак профессионализма.

В реальных проектах

Примеры

Чтение мета-информации страницы через DOM

// Читаем структурные элементы текущего документа
console.log('Заголовок страницы:', document.title)

// Получаем lang у корневого элемента html
const htmlEl = document.documentElement
console.log('Тег корня:', htmlEl.tagName)         // HTML
console.log('Язык страницы:', htmlEl.lang || '(не задан)')

// Смотрим на head и body
console.log('Тег head:', document.head.tagName)   // HEAD
console.log('Тег body:', document.body.tagName)   // BODY

// Читаем мета-тег charset
const metaTags = document.querySelectorAll('meta')
console.log('Количество meta-тегов:', metaTags.length)

metaTags.forEach(meta => {
  const charset = meta.getAttribute('charset')
  const name = meta.getAttribute('name')
  if (charset) console.log('Кодировка:', charset)
  if (name === 'viewport') console.log('Viewport:', meta.getAttribute('content'))
})

Создаём структуру документа программно

// Имитируем создание структуры HTML-документа
const structure = {
  doctype: '<!DOCTYPE html>',
  html: { lang: 'ru' },
  head: {
    charset: 'UTF-8',
    viewport: 'width=device-width, initial-scale=1.0',
    title: 'Road to JS — учим JavaScript'
  },
  body: 'Здесь будет контент'
}

console.log('DOCTYPE:', structure.doctype)
console.log('HTML lang:', structure.html.lang)
console.log('Кодировка:', structure.head.charset)
console.log('Viewport:', structure.head.viewport)
console.log('Заголовок:', structure.head.title)
console.log('Контент:', structure.body)

// Проверяем длину title — SEO рекомендует до 60 символов
const title = structure.head.title
console.log('Длина title:', title.length, 'символов')
console.log('Подходит для SEO:', title.length <= 60 ? 'да' : 'нет')

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

Минимальный корректный HTML-документ

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

Разберём каждую строку.

DOCTYPE — объявление типа документа

<!DOCTYPE html>

Тег `<html>` — корень документа

<html lang="ru">

Тег `<head>` — невидимая голова

Всё, что находится в <head>, не показывается пользователю напрямую, но критично для работы страницы:

<head>
  <meta charset="UTF-8" />           <!-- Кодировка текста -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Название в табе браузера</title>
  <link rel="stylesheet" href="styles.css" />
</head>

meta charset — кодировка

<meta charset="UTF-8" />

meta viewport — адаптивность под мобильные

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

Тег `<title>` — заголовок вкладки

Тег `<body>` — видимая часть

Всё, что видит пользователь на странице, находится в <body>. Текст, картинки, кнопки, формы — всё здесь.

Типичные ошибки

Ошибка 1: Забыть DOCTYPE

Страница может выглядеть нормально в Chrome, но сломаться в Safari или на мобилке.

Ошибка 2: Русский текст без charset

<head>
  <!-- Нет meta charset — русский текст будет кракозябрами -->
  <title>Мой сайт</title>
</head>

Ошибка 3: Поместить контент в `<head>`

<head>
  <h1>Этот текст не отобразится!</h1>  <!-- Так нельзя -->
</head>

Ошибка 4: Не закрыть `<html>` или `<body>`

Браузер исправит это автоматически, но явная структура — признак профессионализма.

В реальных проектах

Примеры

Чтение мета-информации страницы через DOM

// Читаем структурные элементы текущего документа
console.log('Заголовок страницы:', document.title)

// Получаем lang у корневого элемента html
const htmlEl = document.documentElement
console.log('Тег корня:', htmlEl.tagName)         // HTML
console.log('Язык страницы:', htmlEl.lang || '(не задан)')

// Смотрим на head и body
console.log('Тег head:', document.head.tagName)   // HEAD
console.log('Тег body:', document.body.tagName)   // BODY

// Читаем мета-тег charset
const metaTags = document.querySelectorAll('meta')
console.log('Количество meta-тегов:', metaTags.length)

metaTags.forEach(meta => {
  const charset = meta.getAttribute('charset')
  const name = meta.getAttribute('name')
  if (charset) console.log('Кодировка:', charset)
  if (name === 'viewport') console.log('Viewport:', meta.getAttribute('content'))
})

Создаём структуру документа программно

// Имитируем создание структуры HTML-документа
const structure = {
  doctype: '<!DOCTYPE html>',
  html: { lang: 'ru' },
  head: {
    charset: 'UTF-8',
    viewport: 'width=device-width, initial-scale=1.0',
    title: 'Road to JS — учим JavaScript'
  },
  body: 'Здесь будет контент'
}

console.log('DOCTYPE:', structure.doctype)
console.log('HTML lang:', structure.html.lang)
console.log('Кодировка:', structure.head.charset)
console.log('Viewport:', structure.head.viewport)
console.log('Заголовок:', structure.head.title)
console.log('Контент:', structure.body)

// Проверяем длину title — SEO рекомендует до 60 символов
const title = structure.head.title
console.log('Длина title:', title.length, 'символов')
console.log('Подходит для SEO:', title.length <= 60 ? 'да' : 'нет')

Задание

Подсказка

Загружаем среду выполнения...

Загружаем AI-помощника...

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

Минимальный корректный HTML-документ

DOCTYPE — объявление типа документа

Тег <html> — корень документа

Тег <head> — невидимая голова

meta charset — кодировка

meta viewport — адаптивность под мобильные

Тег <title> — заголовок вкладки

Тег <body> — видимая часть

Типичные ошибки

В реальных проектах

Примеры

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

Минимальный корректный HTML-документ

DOCTYPE — объявление типа документа

Тег <html> — корень документа

Тег <head> — невидимая голова

meta charset — кодировка

meta viewport — адаптивность под мобильные

Тег <title> — заголовок вкладки

Тег <body> — видимая часть

Типичные ошибки

В реальных проектах

Примеры

Задание

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

Минимальный корректный HTML-документ

DOCTYPE — объявление типа документа

Тег <html> — корень документа

Тег <head> — невидимая голова

meta charset — кодировка

meta viewport — адаптивность под мобильные

Тег <title> — заголовок вкладки

Тег <body> — видимая часть

Типичные ошибки

В реальных проектах

Примеры

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

Минимальный корректный HTML-документ

DOCTYPE — объявление типа документа

Тег <html> — корень документа

Тег <head> — невидимая голова

meta charset — кодировка

meta viewport — адаптивность под мобильные

Тег <title> — заголовок вкладки

Тег <body> — видимая часть

Типичные ошибки

В реальных проектах

Примеры

Задание

Тег `<html>` — корень документа

Тег `<head>` — невидимая голова

Тег `<title>` — заголовок вкладки

Тег `<body>` — видимая часть

Тег `<html>` — корень документа

Тег `<head>` — невидимая голова

Тег `<title>` — заголовок вкладки

Тег `<body>` — видимая часть

Тег `<html>` — корень документа

Тег `<head>` — невидимая голова

Тег `<title>` — заголовок вкладки

Тег `<body>` — видимая часть

Тег `<html>` — корень документа

Тег `<head>` — невидимая голова

Тег `<title>` — заголовок вкладки

Тег `<body>` — видимая часть