Если изучить 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](https://thecode.media/wp-content/uploads/2024/07/unnamed-1-2.png)
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-документа можно увидеть такую страницу в браузере:
![HTML-теги и атрибуты](https://thecode.media/wp-content/uploads/2024/07/unnamed-2-1-1.png)
Страница пока не очень симпатичная, потому что мы не добавили никаких стилей. А «Блок справа» пока находится слева, потому что мы не настроили его расположение на странице. Чтобы это поправить, нам нужны 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](https://thecode.media/wp-content/uploads/2024/07/unnamed-3-1-2.png)
Как видите, внешний вид страницы не изменился. Всё потому, что семантические теги не влияют на вёрстку, но зато помогают поисковым роботам понять, что чем является на сайте, и за счёт этого они лучше индексируют страницу.
Таблицы в 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-документ и обновить страницу в браузере). Внизу страницы появится таблица:
![Таблицы в HTML](https://thecode.media/wp-content/uploads/2024/07/unnamed-4-1-1.png)
Раньше с помощью таблиц создавали макеты веб-страниц, помещая элементы в разные ячейки. Сейчас лучше использовать CSS, но табличная вёрстка поможет понять, как это работает. Посмотрите наши статьи:
Что дальше
В следующий раз мы начнём знакомиться с CSS и дивным миром красоты в интернете. Подпишитесь, чтобы не пропустить.