Карта сайта

Урок 3: Базовая структура HTML

/Уроки по HTML/CSS/Урок 3: Базовая структура HTML
Урок 3: Базовая структура HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

На этом уроке мы разберем фундамент любого сайта, это базовая структура HTML-документа. Если вы только начинаете свой путь в веб-разработке, этот урок станет вашим надежным стартом. Мы поговорим о тегах <html>, <head> и <body>, метатегах и заголовке страницы. А еще вас ждут практические задания и примеры кода.

Что такое HTML-документ?

HTML (HyperText Markup Language) это язык разметки, который определяет структуру веб-страницы. Каждый HTML-документ начинается с объявления типа документа <!DOCTYPE html>, которое сообщает браузеру, что мы работаем с современным стандартом HTML5. Далее следует набор тегов, образующих «скелет» страницы.

Тег <html> корень всего

Первый тег после <!DOCTYPE html>это <html>. Он является корневым элементом и оборачивает весь контент страницы. Внутри него находятся два основных блока: <head> и <body>.

Пример:

<!DOCTYPE html>
<html lang="ru">
  <!-- Здесь будет содержимое страницы -->
</html>

Атрибут lang="ru" указывает браузеру, что страница написана на русском языке. Это важно для SEO и доступности.

Тег <head> — голова страницы

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

  • Заголовок страницы <title>.
  • Метатеги (<meta>).
  • Ссылки на стили CSS.
  • Скрипты JavaScript.

Пример:

<head>
  <meta charset="UTF-8">
  <title>Мой первый сайт</title>
</head>

Метатеги (<meta>) — невидимые помощники

Метатеги предоставляют браузеру и поисковым системам информацию о странице. Рассмотрим основные из них:

  1. Кодировка символов
    <meta charset="UTF-8"> указывает браузеру использовать кодировку UTF-8, которая поддерживает кириллицу и спецсимволы. Всегда ставьте этот тег первым в <head>.
  2. Адаптивность
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> — делает страницу адаптивной для мобильных устройств.
  3. Описание страницы
    <meta name="description" content="Учим HTML и CSS с нуля"> это краткое описание, которое отображается в результатах поиска.

Пример использования:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Курс по HTML и CSS для начинающих">
  <title>Урок 3: Базовая структура HTML</title>
</head>

Тег <title> — заголовок страницы

<title> определяет заголовок, который отображается во вкладке браузера и в результатах поисковой выдачи. Это один из ключевых элементов для SEO.

Пример:

<title>Мой блог о веб-разработке</title>

Тег <body> — тело страницы

В <body> размещается весь контент, который видят пользователи: текст, изображения, кнопки, формы и т.д. Здесь вы будете проводить большую часть времени при верстке.

Пример:

<body>
  <h1>Привет, мир!</h1>
  <p>Это мой первый HTML-документ.</p>
</body>

Полная структура HTML-документа

Соберем все вместе:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Изучаем HTML и CSS">
  <title>Мой первый сайт</title>
</head>
<body>
  <h1>Добро пожаловать!</h1>
  <p>Здесь я учусь создавать сайты.</p>
</body>
</html>

Практические задания

Закрепим материал на практике!

Задание 1: Создайте базовый шаблон

  1. Откройте редактор кода (например, VS Code).
  2. Создайте файл index.html.
  3. Напишите структуру HTML-документа, как в примере выше.
  4. Добавьте в <body> свой заголовок и абзац текста.

Задание 2: Поработайте с метатегами

Добавьте в <head>:

  • Метатег с описанием вашего хобби.
  • Метатег для ключевых слов: <meta name="keywords" content="HTML, CSS, обучение">.

Задание 3: Экспериментируйте!

Попробуйте:

  • Удалить <meta charset="UTF-8"> и посмотреть, как отображается кириллица.
  • Изменить значение lang="ru" на lang="en" и обновить страницу.

Частые ошибки новичков

  1. Пропуск закрывающих тегов
    Не забывайте закрывать теги, например, </head> и </body>.
  2. Неправильный порядок метатегов
    Тег <meta charset="UTF-8"> должен быть первым в <head>.
  3. Игнорирование атрибута lang
    Всегда указывайте язык страницы — это помогает скринридерам для людей с нарушениями зрения.

Всегда начинайте верстку с корректной структуры. Это как построить дом, без фундамента он развалится.

Хотите узнать больше? Переходите к полному курсу по HTML/CSS для начинающих, где вас ждут 30 уроков, практика и поддержка.