Каталог

Веб-разработка с нуля: четыре курса по порядку.

HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.

Загружаем курсы…

Каркас HTML-документа — HTML с нуля · Nexus

Перейти к содержимому

Урок 6 из 70 · 10 мин

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

Doctype, html, head и body: минимальный корректный документ, с которого начинается любая страница.

Скелет

А зачем все эти строчки сверху? Я же просто хочу текст про магазин.
Ника
Это паспорт страницы. Язык, кодировка, название вкладки. Без него Бро будет гадать.
Бро
И угадаю неправильно. Кириллица превратится в кракозябры 🫠

Тег

<!doctype html>

Это современный HTML

Что это: Первая строка документа.
Зачем: Без неё браузер включает «режим совместимости» с сайтами из 90-х.
Как: HTML
<!doctype html>

Тег

<html lang>

Корень и язык

Что это: Обёртка всего документа. lang="ru" — язык страницы.
Зачем: Скринридер Льва будет читать с правильным произношением, переводчик не предложит перевести с русского.
Как: HTML
<html lang="ru">…</html>

Тег

<head>

Служебная часть

Что это: То, что не видно на странице: кодировка, название, описание.
Зачем: Для браузера и поисковиков. Видимое — только в body.
Как: HTML
<head> <meta charset="utf-8"> <title>Мой сайт</title> </head>

Тег

<meta charset>

Кодировка

Что это: <meta charset="utf-8"> — как превратить байты в буквы. Ставится первой строкой в head.
Зачем: Иначе «Магазин» превратится в «РљРѕС„РµР№РЅСЏ».
Как: HTML
<meta charset="utf-8">

Тег

<title>

Название вкладки

Что это: Текст на вкладке и в результатах поиска.
Зачем: Это первое, что видит человек в Яндексе.
Как: HTML
<title>Мой сайт — Казань</title>

Тег

<body>

Видимая часть

Что это: Всё, что видно на странице.
Зачем: Здесь будет весь сайт.
Как: HTML
<body> <h1>Мой сайт</h1> </body>
Так это выглядит

Каркас как дерево

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Мой сайт</h1>
    <p>Заметки о путешествиях и фото.</p>
  </body>
</html>

Строим дерево…

Ваш ход

Задание

Почини каркас

У страницы магазина перепутаны части: заголовок вкладки попал в body, а языка нет. Перенеси title в head и укажи lang="ru".

У html есть lang="ru" — пока нет
title стоит в head — пока нет
В body заголовка вкладки больше нет — пока нет
Заголовок h1 остался в body — пока нет

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <title>Мой сайт</title>
  <h1>Мой сайт</h1>
</body>
</html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <title>Мой сайт</title>
  <h1>Мой сайт</h1>
</body>
</html>

Результат обновляется при вводе

ПрактикаОбязательное задание

Где видимый текст

Выберите один ответ.

В какой части документа размещают текст, который должен увидеть человек?

Домашнее заданиеДля закрепления

Что лежит в head

Выберите все подходящие варианты.

Какие элементы обычно находятся внутри <head>?