Основы HTML

Что такое HTML и чем он НЕ является

HTML расшифровывается как HyperText Markup Language — язык гипертекстовой разметки. Ключевое слово здесь — разметка.

Представьте, что вы редактор в газете, но вместо текстовыделителя у вас — специальные команды. Вы должны объяснить компьютеру: «Вот это — крупный заголовок, а вот это — обычный абзац, а сюда нужно вставить фотографию».

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

Инструментарий

Чтобы начать работать с HTML, вам не нужно покупать дорогие программы. Достаточно двух вещей:

• Текстовый редактор. Рекомендуем бесплатный Visual Studio Code (VS Code). Он подсвечивает код и подсказывает теги.
• Браузер. Google Chrome, Firefox, Яндекс.Браузер или Edge — подойдет любой современный.

Анатомия тега (синтаксис)

Вся верстка строится на тегах. Тег — это ключевое слово, заключенное в угловые скобки < >. Большинство тегов — парные.

Общая форма:

<имя_тега>Содержимое элемента</имя_тега>

<имя_тега> — открывающий тег. </имя_тега> — закрывающий тег (с обратным слешем).

Пример:

<p>Это мой первый параграф текста.</p>

Одиночные теги (исключение)

Существует небольшая группа тегов, которым не нужна закрывающая пара, так как внутри них не предполагается текста. Самые частые:

• <br> — принудительный перенос строки.
• <img> — вставка картинки.

Золотое правило вложенности (Матрешка)

Теги можно и нужно вкладывать друг в друга. Например, внутри абзаца мы можем выделить слово жирным. Здесь работает правило FIFO: Первый Открыл — Последний Закрыл.

Правильно:

<p>Я изучаю <strong>HTML и CSS</strong> на этом сайте.</p>

Неправильно (перекрестное закрытие):

<p>Я изучаю <strong>HTML и CSS</p></strong>

В неправильном примере тег p закрылся раньше, чем тег strong. Браузер может запутаться и отобразить страницу некорректно.

Атрибуты тегов

Тегам можно давать дополнительные команды с помощью атрибутов. Атрибуты пишутся внутри открывающего тега.

Синтаксис: имя_атрибута="значение"

Самый важный атрибут в любом проекте — lang. Он указывается в самом начале документа и сообщает браузеру, на каком языке написан ваш контент.

Пример:

<html lang="ru"> <!-- Контент на русском языке -->

Базовый скелет 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>
    <p>Моя первая веб-страница.</p>
</body>
</html>

Разбор ключевых элементов:

Заголовки и абзацы

Теперь давайте наполним наше body содержанием.

Для структурирования текста используются теги заголовков от h1 до h6 и тег абзаца p.

Пример:

<body>
    <h1>Мой блог о веб-разработке</h1>
    <p>Здесь я буду публиковать свои заметки и успехи в изучении HTML.</p>

    <h2>День первый: Знакомство с тегами</h2>
    <p>Оказывается, писать код не так сложно, как кажется на первый взгляд.</p>
</body>

Строчные элементы для выделения текста

Чтобы расставить акценты внутри абзаца, используются теги физического и логического форматирования.

• <strong> — важный текст (обычно отображается жирным). Помимо внешнего вида, несет смысловую нагрузку для поисковиков.
• <em> — эмфаза, акцент (обычно отображается курсивом).
• <br> — перенос строки (используйте его только для стихов, адресов или подписей, но не для создания отступов между абзацами).

Пример:

<p>Я изучаю <strong>HTML</strong> и <em>очень рад</em> этому факту.<br>
Учеба дается легко.</p>

Комментарии в коде

Иногда нужно оставить заметку самому себе или временно скрыть кусок кода. Для этого существуют комментарии. Они не отображаются на странице пользователя (но видны в панели разработчика по клавише F12).

Пример:

<!-- Это блок с контактами, нужно будет обновить номер телефона -->
<p>Тел: +7 (999) 123-45-67</p>

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

Попробуйте самостоятельно создать файл about.html и сверстать в нем небольшую страницу «О себе».