База по вёрстке: основы HTML

Если изучить HTML и CSS, можно работать верстальщиком, контент-менеджером или фронтенд-разработчиком (если дополнительно изучить JavaScript). Чтобы помочь вам разобраться в HTML и CSS, начинаем новый цикл статей о том, что нужно для простой вёрстки. Сегодня самая основа — HTML.

Погнали.

Что такое HTML

HTML (HyperText Markup Language) — стандартизованный язык разметки, который позволяет создавать и структурировать веб-страницы. С помощью HTML устанавливается каркас того, что мы видим, открывая сайты в интернете. Мы рассказывали об этом подробнее в статье «Что такое HTML (и почему это важно)».

Основу HTML составляют теги — это единицы разметки, которые сообщают браузеру, как отображать содержимое документа. Обычно они состоят из имени тега, заключённого в угловые скобки, например <p> для абзаца или <img> — для изображения.

Что происходит, когда мы открываем сайт в браузере

Для работы с HTML достаточно любого текстового редактора, который умеет сохранять текст в простом html-формате, но удобнее пользоваться специальным редактором: он подсвечивает код разными цветами, и работать становится проще, особенно новичку. Мы рекомендуем Visual Studio Code, и у нас есть статья о том, как его установить и настроить.

Самая простая страница

На этом этапе вы уже можете сделать самую простую веб-страницу. Достаточно создать в редакторе новый документ, выбрать для него язык HTML и написать несколько строк кода.

Чтобы было проще ориентироваться в коде, можно добавлять комментарии: они обозначаются таким синтаксисом:

Комментарии помогают разобраться в логике документа и ничего не меняют на странице, поэтому там можно писать что угодно.

Базовая структура HTML-документа включает doctype, html, head и body:

<!DOCTYPE html>
<!-- это «голова» страницы -->
<head>
</head>

<!-- это «тело» страницы -->
<body>
</body>
</html>

Если сохранить этот документ и открыть его в браузере, отобразится пустая страница, потому что мы её пока ничем не наполнили. Но, по сути, это уже полноценный HTML-документ:

HTML-теги и атрибуты

Когда мы форматируем документ в каком-то текстовом редакторе, вся техническая сторона этого процесса происходит незаметно. Мы набираем текст, нажимаем Enter для перехода на новую строку, а для форматирования выделяем нужный фрагмент и выбираем для него какое-то действие: сделать заголовком, выделить жирным или курсивом, преобразовать в список и так далее.

Чтобы сделать то же самое в веб-документе, используют соответствующие теги:

<p>, <br> — для абзаца и переноса на другую строку.
<h1>, <p>, <div>, <span> и другие — для организации текста и мультимедийных элементов.
<b>, <i>, <u>, <strong>, <em> и так далее — для форматирования текста.
<ul>, <ol> и <li> — для создания маркированных и нумерованных списков.
<a> — для создания ссылки на определённый раздел страницы или другой веб-документ.
<img>, <video>, <audio> и так далее — для вставки изображений, видео, аудио и других мультимедийных элементов.
<button>, <form>, <input>, <textarea> — для создания кнопок и форм для ввода данных и так далее.

Посмотреть все HTML-теги можно на сайте Mozilla Development Network (на русском языке).

Многие теги имеют парный закрывающий тег, например:

<p>Текст абзаца</p>

Есть одиночные теги, которые не требуют закрытия, например <br> для переноса строки или <img src="image.jpg"> для вставки изображения.

Атрибуты тегов предоставляют дополнительную информацию о том, как элемент должен быть обработан или отображён. Например, тег изображения <img> может включать такие атрибуты:

'src' (источник изображения),
'alt' (альтернативный текст),
'width' и 'height' (ширина и высота).

Атрибуты помогают определить свойства элементов, такие как их идентификаторы, классы, стили, типы данных, ссылки, размеры и многое другое. Атрибуты размещаются в открывающем теге, и их значения всегда заключены в кавычки.

Попробуйте добавить в базовую структуру веб-документа разные теги и посмотрите, как это будет влиять на внешний вид страницы в браузере. Например, возьмите за основу такой код:

<!DOCTYPE html>
<html>
<!-- это «голова» страницы -->
<head>
    <!-- метаданные с указанием кодировки -->
    <meta charset="UTF-8">
    <!-- метаданные для адаптивного дизайна -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример HTML-документа</title>
</head>

<!-- это «тело» страницы -->
<body>
    <!-- заголовок страницы -->
    <h1>Заголовок первого уровня</h1>

    <ul>
        <li><a href="#">Домой</a></li>
        <li><a href="#">Обо мне</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>

    <h2>Заголовок второго уровня</h2>
    <h3>Заголовок третьего уровня</h3>
    <p>Пример текста в абзаце</p>

    <h2>Блок справа</h2>
    <p>Текст блока справа.</p>

    <!-- добавляем картинку и указываем адрес, по которому браузер может её получить -->
    <img src="https://thecode.media/wp-content/themes/thecode_refresh/assets/svg/logo.svg" alt="Пример изображения">
    <!-- добавляем перенос на новую строку -->
    <br >
    <!-- добавляем ссылку на журнал «Код» и указываем, что эта страница должна открыться в новой вкладке -->
    <a href="https://thecode.media" target=”blank”>Ссылка на журнал «Код»</a>
    <h2>Пример формы (заголовок второго уровня)</h2>
    <!-- добавляем форму -->
    <form>
        <div>
            <!-- указываем имя поля для ввода имени -->
            <label for="name">Имя</label>
            <!-- добавляем поле для ввода имени и указываем тип, идентификатор и имя этого поля, а также то, что оно обязательно для заполнения -->
            <input type="text" id="name" name="name" required>
        </div>
        <div>
            <!-- указываем имя поля для ввода адреса электронной почты -->
            <label for="email">Email:</label>
            <!-- добавляем поле для ввода адреса электронной почты и указываем тип, идентификатор и имя этого поля, а также то, что оно обязательно для заполнения -->
            <input type="email" id="email" name="email" required>
        </div>
        <div>
            <!-- добавляем кнопку -->
            <button type="submit">Отправить</button>
        </div>
    </form>

    <p>© 2024 Моя учебная веб-страница</p>
</body>
</html>

После сохранения HTML-документа можно увидеть такую страницу в браузере:

Страница пока не очень симпатичная, потому что мы не добавили никаких стилей. А «Блок справа» пока находится слева, потому что мы не настроили его расположение на странице. Чтобы это поправить, нам нужны CSS-стили, которыми мы займёмся в следующий раз. А пока попробуйте редактировать этот код и смотреть, как меняется страница (для этого после внесения изменений нужно сохранить HTML-документ и перезагрузить браузер, в котором открыта страница).

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

Семантический HTML

Семантический HTML — это HTML-теги, которые чётко описывают смысл содержимого, то есть его семантику. В отличие от несемантических тегов, таких как <div> и <span>, семантические теги ясно обозначают, что содержится внутри элемента. Это помогает разработчикам, браузерам, а также поисковым системам лучше понимать структуру и содержание веб-страницы. Если вам не очень понятно, при чём тут поисковые системы, может помочь наша статья «Что такое SEO».

Вот основные примеры семантических HTML-тегов:

<header> — заголовок страницы или раздела.
<nav> — навигационное меню.
<main> — основное содержание документа.
<article> — независимый, автономный контент, который может быть отдельно распространён или использован.
<section> — раздел, группирующий связанный контент.
<aside> — контент, косвенно связанный с основным содержанием (например, боковая панель).
<footer> — нижний колонтитул страницы или раздела.

Добавим эти теги на страницу и посмотрим, что поменяется.

<!DOCTYPE html>
<html>
<!-- это «голова» страницы -->
<head>
    <!-- метаданные с указанием кодировки -->
    <meta charset="UTF-8">
    <!-- метаданные для адаптивного дизайна -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример HTML-документа</title>
</head>

<!-- это «тело» страницы -->
<body>
    <!-- заголовок страницы -->
    <header>
    <h1>Заголовок первого уровня</h1>
    </header>

    <!-- навигационное меню со ссылками -->
    <nav>
        <ul>
            <li><a href="#">Домой</a></li>
            <li><a href="#">Обо мне</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </nav>

    <!-- основная часть контента страницы -->
    <main>
        <!-- основной контент -->
        <article>
            <h2>Заголовок второго уровня</h2>
            <!-- раздел внутри основного контента -->
            <section>
                <h3>Заголовок третьего уровня</h3>
                <p>Пример текста в абзаце</p>
            </section>
            </article>

            <!-- боковая панель -->
            <aside>
                <h2>Блок справа</h2>
                <p>Текст блока справа.</p>
            </aside>

    <!-- добавляем картинку и указываем адрес, по которому браузер может её получить -->
    <img src="https://thecode.media/wp-content/themes/thecode_refresh/assets/svg/logo.svg" alt="Пример изображения">
    <!-- добавляем перенос на новую строку -->
    <br>
    <!-- добавляем ссылку на журнал «Код» и указываем, что эта страница должна открыться в новой вкладке -->
    <a href="https://thecode.media" target=”blank”>Ссылка на журнал «Код»</a>
    <h2>Пример формы (заголовок второго уровня)</h2>
    <!-- добавляем форму -->
    <form>
        <div>
            <!-- указываем имя поля для ввода имени -->
            <label for="name">Имя</label>
            <!-- добавляем поле для ввода имени и указываем тип, идентификатор и имя этого поля, а также то, что оно обязательно для заполнения -->
            <input type="text" id="name" name="name" required>
        </div>
        <div>
            <!-- указываем имя поля для ввода адреса электронной почты -->
            <label for="email">Email:</label>
            <!-- добавляем поле для ввода адреса электронной почты и указываем тип, идентификатор и имя этого поля, а также то, что оно обязательно для заполнения -->
            <input type="email" id="email" name="email" required>
        </div>
        <div>
            <!-- добавляем кнопку -->
            <button type="submit">Отправить</button>
        </div>
    </form>
</main>    

    <footer> 
        <p>© 2024 Моя учебная веб-страница</p>
    </footer>

</body>
</html>

Посмотрим, что получилось. Сохраним изменения и обновим страницу в браузере:

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

Таблицы в HTML

Основная задача таблиц — структурировать информацию в табличном виде. С их помощью можно отображать данные, которые естественно располагаются в строках и столбцах, например прайс-листы, расписания и так далее.

В текстовом редакторе типа Word таблицы добавляются автоматически, а для веб-страниц их нужно конструировать. Для этого используют теги <table>, <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>. К примеру, у нас есть такая таблица:

Название	Описание	Цена
Товар 1	Хороший	100 руб.

Чтобы добавить эту таблицу на веб-страницу, достаточно добавить в код такое (код может быть и сложнее, но пока ограничимся таким):

<!-- добавляем таблицу -->
<table border="1">
    <!-- первая строка -->
    <tr>
        <!-- три ячейки -->
        <td><b>Название</b></td>
        <td><b>Описание</b></td>
        <td><b>Цена</b></td>
       </tr>

    <!-- вторая строка -->  
    <tr>
        <!-- три ячейки -->
        <td>Товар 1</td>
        <td>Хороший</td>
        <td>100 руб.</td>
    </tr>
 </table>

Попробуйте добавить эти строки в код вашей учебной страницы перед закрывающим тегом </main> (не забудьте после этого сохранить HTML-документ и обновить страницу в браузере). Внизу страницы появится таблица:

Раньше с помощью таблиц создавали макеты веб-страниц, помещая элементы в разные ячейки. Сейчас лучше использовать CSS, но табличная вёрстка поможет понять, как это работает. Посмотрите наши статьи: