HTML: что это за язык разметки, зачем он нужен и стоит ли его изучать

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

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

Содержание

• Что такое HTML — простыми словами
• HTML — это язык программирования или нет
• Для чего нужен HTML
• Где используется HTML
• Что можно и чего нельзя сделать на HTML
• Структура HTML-документа
• Руководство по ключевым HTML‑тегам
• Как выглядит HTML-код
• Сколько времени нужно, чтобы освоить HTML

Что такое HTML — простыми словами

HTML (HyperText Markup Language — «язык гипертекстовой разметки») — это язык, на котором создают структуру веб‑страниц. Если перевести дословно, hypertext — это текст со ссылками, которые связывают страницы между собой, а markup — разметка, то есть система тегов. Теги подсказывают браузеру, как собрать страницу: где у неё заголовок, где абзац, список, ссылка или картинка.

Когда вы заходите на сайт, браузер загружает HTML‑файл — в нём описано, какие элементы есть на странице и в каком порядке они должны располагаться. То есть HTML задаёт «каркас» страницы, а за остальное отвечают другие инструменты. Например, CSS отвечает за внешний вид (цвета, шрифты), а язык JavaScript — за интерактивность элементов (клики, анимации, формы и другое).

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

Так продолжалось до 1991 года, пока учёный Тим Бернерс‑Ли не предложил первую версию HTML. В то время он работал в научном центре ЦЕРН и искал удобный способ, чтобы учёные могли обмениваться документами через интернет. А поскольку готового решения не было, Тим придумал его сам.

С тех пор HTML прошёл долгий путь: появились HTML 2.0, HTML 4.01, XHTML — и каждая версия расширяла возможности языка. Сегодня современный веб в основном опирается на стандарт HTML5, который появился в 2014 году. Его развивает и поддерживает W3C (World Wide Web Consortium) — международная некоммерческая организация, основанная Тимом Бернерсом‑Ли в 1994 году.

Именно W3C разрабатывает и публикует спецификации HTML — документы, в которых описано, как должны работать теги, какие атрибуты допустимы и как браузеры должны интерпретировать код. Благодаря этим стандартам HTML‑страницы, написанные разработчиками в России, Европе или США, будут одинаково корректно смотреться в любых браузерах и на разных устройствах.

Читайте также:

Что такое WWW, как устроена Всемирная паутина и кто её изобрёл

HTML — это язык программирования или нет

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

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

Например, вы заходите в интернет‑магазин и видите каталог: карточки товаров, названия, цены, описания, кнопки «В корзину». Вот за то, какие элементы есть на странице и как они организованы, отвечает HTML. CSS задаёт внешний вид этих элементов. А когда вы добавляете товар в корзину и после этого что‑то меняется на странице — в работу вступает язык JavaScript.

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

Для чего нужен HTML

HTML как язык разметки решает сразу три задачи. Во‑первых, он задаёт структуру страницы — организует содержимое в иерархию, которая понятна браузерам и поисковикам. Во‑вторых, HTML описывает контент: текст, изображения, таблицы, формы — всё это появляется на странице благодаря тегам. И в‑третьих, HTML служит основой для всего остального: без разметки CSS не понимает, что стилизовать, а JavaScript — с какими элементами работать.

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

Давайте поэтапно разберём, как браузеры отрисовывают веб-страницы:

• Вы вводите в адресную строку адрес сайта или страницы.
• Браузер отправляет запрос на сервер по этому адресу — и получает в ответ файл в формате HTML.
• Браузер читает HTML сверху вниз и строит из него структуру страницы — дерево элементов, где каждый тег становится отдельным объектом.
• Если в HTML подключены стили и скрипты, браузер загружает и их.
• В итоге всё это объединяется, и браузер отрисовывает финальную страницу, которую вы видите на экране.

Посмотреть HTML‑структуру любого сайта можно прямо сейчас — ничего устанавливать не нужно. Для этого откройте страницу в браузере, кликните правой кнопкой мыши по любому элементу и выберите Просмотреть код или Inspect (Проверить). Вы увидите всю HTML‑разметку страницы и сможете изучить, какие теги используются и как элементы вложены друг в друга.

Например, вот как выглядит HTML‑разметка главной страницы Skillbox Media.

А вот что будет, если на этой же странице отключить стили и оставить HTML.

Где используется HTML

Поскольку HTML — это основа веба, вы будете встречать его почти везде, где есть браузер. Но чаще всего HTML используют в трёх случаях: при создании сайтов, веб‑приложений и при вёрстке email-писем. Разберём каждый случай отдельно.

Сайты. Любая веб‑страница, которую вы открываете в браузере, построена на HTML. Это может быть новостной портал, блог, интернет‑магазин, лендинг или личный кабинет онлайн‑сервиса. Даже если сайт сделан на платформах и CMS вроде Tilda или WordPress, затем он всё равно превращается в HTML-код.

Веб‑приложения. Если сайт — это в первую очередь контент, который вы читаете и смотрите, то веб‑приложение — инструмент для взаимодействия. Google Docs, Figma, онлайн‑банк — всё это веб‑приложения. В них вы можете создавать документы, редактировать данные и выполнять другие действия. При этом структура интерфейса всё равно задаётся HTML. За интерактивное поведение отвечает JavaScript, а за обработку и обновление данных — сервер.

Email‑вёрстка. Письма от интернет‑магазинов, сервисов и рассылок — это тоже HTML. Разметка позволяет добавить в письмо изображения, кнопки, колонки и цветовые акценты. Так сложилось исторически: сначала электронная почта была только текстовой, а когда понадобились оформленные письма, HTML стал самым удобным способом передавать структуру внутри сообщения.

Читайте также:

Вёрстка сайта: инструкция для новичков

Что можно и чего нельзя сделать на HTML

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

• гиперссылки;
• таблицы;
• изображения;
• блоки;
• абзацы;
• формы;
• заголовки.

Можно даже задавать простой дизайн напрямую в HTML — например, устанавливать цвет и шрифт текста или фоновый цвет блока. Однако профессионалы не рекомендуют так делать — лучше указывать стили в файле CSS. Там-то ваша фантазия ничем не будет ограничена: задавайте любые отступы, размещайте элементы нестандартными способами, играйтесь с прозрачностью, тенями и анимацией. Всё что угодно — но в CSS. Договорились? :)

Действия пользователей пока обрабатывают в основном с помощью JavaScript и его фреймворков. Но некоторые функции постепенно приходят в HTML. Например, перетаскивание объектов, или Drag & Drop, раньше было доступно только в JavaScript.

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

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

Например, в тег <p> обычно помещают текст:

<p>Привет, мир!</p>

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

Например, тег <img>, который позволяет разместить картинку на сайте, — непарный:

<img scr='bird.jpg' alt='photo of bird'>

У каждого тега есть атрибуты. С их помощью можно передавать элементам веб-страницы дополнительные данные: размеры, уникальный id элемента, ссылки на изображения и так далее.

Элемент <img> включает в себя два основных атрибута — src и alt. Первый добавляет ссылку на файл, а второй — подпись к картинке, которая покажется, если файл не загрузится.

Тег <p> — парный, он всегда должен закрываться тегом </p>. Парные теги применяются для разметки блоков — элементов, в которые можно вкладывать другие элементы (в том числе блоки). К ним относятся:

• контейнеры (div);
• абзацы;
• заголовки;
• списки;
• таблицы.

Так выглядит код веб-страницы с тегами <p> и <img>:

<p>
Какой-нибудь сопроводительный текст. Обычно в примерах используют 
lorem ipsum, но мы пишем всё сами — хардкор!
</p> 
<img src='image.png'> 
<p>А тут ещё один абзац, чтобы заполнить пустоту.</p>

А вот как его отображает браузер.

Теперь добавим ещё один тег — <center>. Он центрирует элементы на экране. Затем положим в него теги <p> и <img>:

<center>
  <p>
Какой-нибудь сопроводительный текст. Обычно в примерах используют 
lorem ipsum, но мы пишем всё сами — хардкор!
  </p> 
  <img src='image.png'> 
  <p>А тут ещё один абзац, чтобы заполнить пустоту.</p>
</center>

У нас получился такой результат.

Руководство по ключевым HTML‑тегам

В HTML больше сотни тегов, но заучивать их все не нужно. На практике большинство задач решается 15–20 базовыми тегами — самые важные из них мы собрали в таблице ниже. Если в процессе работы вам встретится незнакомый тег, просто загляните в справочник — например, в MDN Web Docs, HTML Living Standard или DevDocs. Там можно проверить, для чего нужен тег, какие атрибуты он поддерживает, и посмотреть примеры использования.

Как выглядит HTML-код

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

Давайте возьмём первую главу «Маленького принца» Антуана де Сент‑Экзюпери и сверстаем её вместе. Установите VS Code или любой другой редактор кода, создайте папку little-prince и добавьте в неё файл index.html. Также создайте папку images, в которой будут храниться картинки. Изображения вы можете подобрать самостоятельно или скачать по этой ссылке.

<!DOCTYPE html>
<html lang="ru">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Маленький принц</title>
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

   body {
     max-width: 700px;
     margin: 40px auto;
     padding: 40px;
     font-family: 'Lora', serif;
     line-height: 1.8;
     background-color: #fdfbf7;
     color: #2c3e50;
   }

   h1,
   h2 {
     text-align: center;
     margin-top: 1.5em;
   }

   p {
     text-indent: 30px;
     text-align: justify;
     margin-bottom: 1.2em;
   }

   .center {
     text-align: center;
   }

   img {
     display: block;
     margin: 2em auto;
     max-width: 100%;
     height: auto;
     border-radius: 4px;
   }
 </style>
</head>

<body>

 <h1>Антуан де Сент-Экзюпери</h1>
 <h2>Маленький принц</h2>
 <h2>Леону Верту</h2>

 <p><em>Прошу детей простить меня за то, что я посвятил эту книжку взрослому. Скажу в оправдание: этот взрослый — мой самый лучший друг. И ещё: он понимает всё на свете, даже детские книжки. И, наконец, он живёт во Франции, а там сейчас голодно и холодно. И он очень нуждается в утешении. Если же всё это меня не оправдывает, я посвящу эту книжку тому мальчику, каким был когда-то мой взрослый друг. Ведь все взрослые сначала были детьми, только мало кто из них об этом помнит. Итак, я исправляю посвящение:</em></p>

 <p>Леону Верту, когда он был маленьким</p>

 <h2>I</h2>

 <p>Когда мне было шесть лет, в книге под названием «Правдивые истории», где рассказывалось про девственные леса, я увидел однажды удивительную картинку. На картинке огромная змея — удав — глотала хищного зверя. Вот как это было нарисовано:</p>

 <img src="images/drawing-one.jpg" alt="Удав, глотающий хищного зверя">

 <p>В книге говорилось: «Удав заглатывает свою жертву целиком, не жуя. После этого он уже не может шевельнуться и спит полгода подряд, пока не переварит пищу».</p>

 <p>Я много раздумывал о полной приключений жизни джунглей и тоже нарисовал цветным карандашом свою первую картинку. Это был мой рисунок №1. Вот что я нарисовал:</p>

 <img src="images/drawing-two.jpg" alt="Рисунок №1 -- удав, проглотивший слона, похожий на шляпу">

 <!-- Здесь продолжается текст главы I — доверстайте её самостоятельно -->
 <!-- Добавьте рисунок №2 и оставшиеся абзацы по той же структуре -->

</body>

</html>

После того как вы откроете index.html, то увидите следующее.

Если вы внимательно присмотритесь к коду, то увидите много знакомых тегов: <h1> и <h2> для разметки заголовков, <p> для абзацев и <img> для картинок.

Из нового здесь директива <! DOCTYPE html> в самом начале файла — она сообщает браузеру, что перед ним HTML5‑документ. Ещё в коде встречаются теги <meta> со служебной информацией о странице, <em> для выделения текста курсивом и <style> — блок со CSS‑стилями. Мы добавили стили только для того, чтобы страница выглядела аккуратно и напоминала настоящую книгу. Без стилей HTML тоже будет работать, просто визуально всё будет проще. В реальных проектах CSS обычно выносят в отдельный файл, но если стилей немного, их можно написать прямо внутри HTML — это допустимый способ.

Читайте также:

Быстрый способ подключить CSS к HTML

Сколько времени нужно, чтобы освоить HTML

Основы, которых хватит на создание примитивных страниц, можно изучить за час. То есть быстрее, чем была написана эта статья. Но мастерство приходит с практикой. Мало просто создать каркас — нужно убедиться, что он везде правильно отображается.

Специалисты, которые могут написать не кривой, адаптивный сайт, ценятся у работодателей. Но быть просто HTML-верстальщиком невыгодно. Сегодня это довольно редкая и низкооплачиваемая профессия. Лучше сразу изучать фронтенд- или бэкенд-разработку, а HTML обязательно пригодится в процессе.

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