HTML: что это такое

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

HTML расшифровывается как HyperText Markup Language, «язык гипертекстовой разметки». Гипертекст содержит ссылки на другие документы или разделы. Разметка обозначает назначение фрагментов: заголовок, абзац, список.

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

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

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

HTML пишут вручную или формируют в системе управления сайтом. Вы заполняете карточку в CMS, а шаблон превращает её поля в заголовок, описание и ссылки.

• Создавать статьи: размечать заголовки, абзацы, цитаты и содержание.
• Связывать страницы сайта и документы в интернете через гиперссылки.
• Добавлять изображения, видео и другие материалы к тексту.
• Показывать табличные данные и формы для ввода информации.

Как браузер обрабатывает HTML

Браузер получает документ по HTTP или HTTPS либо открывает локальный файл. Из разметки он строит DOM, дерево объектов страницы. Затем применяет стили и отображает содержимое. JavaScript может менять это дерево.

Чтобы посмотреть структуру, откройте инструменты разработчика через меню браузера и выберите «Элементы» или «Инспектор». Здесь виден текущий DOM после разбора HTML и работы скриптов. Исходный код показывает полученную разметку, поэтому эти представления могут отличаться.

Возможности HTML и отличие от CSS и JavaScript

HTML описывает элементы страницы, CSS задаёт их внешний вид, JavaScript позволяет программировать поведение. Эти технологии работают вместе, но решают разные задачи. Для простой текстовой страницы достаточно разметки.

Без CSS браузер применяет собственные стили: выделяет заголовки, показывает маркеры списков и оформляет ссылки. Цвета и шрифты зависят от браузера и пользовательских настроек.

Некоторые действия HTML поддерживает без скриптов: переход по ссылке, отправку формы и раскрытие блока details. Однако сложный калькулятор или обновление корзины без перезагрузки требуют дополнительной логики. HTML сам по себе не хранит заказы в базе данных.

Теги, элементы и атрибуты HTML

Тег записывают в угловых скобках. Открывающий тег, содержимое и закрывающий тег со слешем образуют парный элемент HTML. Например, p обозначает абзац, а strong внутри него выделяет важный фрагмент.

Атрибуты записывают в открывающем теге, отделяя пробелами: href задаёт адрес ссылки, src указывает путь к изображению. Значения удобно заключать в прямые кавычки. Логические атрибуты, например disabled, работают по наличию: даже disabled со значением «false» отключает поле. Чтобы включить его, удалите атрибут.

Атрибут class объединяет элементы в группы, например для общего оформления через CSS. Атрибут id задаёт идентификатор, который должен быть уникальным в документе. Названия выбирайте по назначению блока: так код HTML проще читать и менять.

Вложенные и пустые элементы

Вкладывайте элементы по правилам HTML: strong допустим внутри p, а другой абзац p внутри него недопустим. Закрывайте вложенный элемент раньше внешнего. Для некоторых элементов, например li, закрывающий тег разрешено опускать в определённых случаях. Новичку проще писать его явно.

Пустые элементы img, br, meta и input не имеют содержимого и закрывающего тега. Слеш перед закрывающей скобкой не требуется и не делает обычный элемент самозакрывающимся.

<p>Сохраните <strong>исходный файл</strong> перед правкой.</p>

Структура HTML-документа: doctype, html, head и body

Документ HTML начинается с объявления doctype html. Оно включает стандартный режим обработки страницы, а не выбирает номер версии языка. Затем идёт корневой элемент html, внутри которого находятся head и body.

В head размещают служебные сведения: заголовок вкладки title, кодировку и метаданные. В body находится содержимое страницы: текст, изображения, списки и формы.

Атрибут lang у html задаёт основной язык документа. Значение ru обозначает русский и помогает программам чтения с экрана выбрать произношение. Кодировка UTF-8 в meta charset должна совпадать с кодировкой сохранённого файла.

Параметр viewport связывает ширину области просмотра с шириной устройства. Для адаптивного расположения блоков на мобильных экранах дополнительно используют CSS.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Памятка перед прогулкой</title>
</head>
<body>
  <h1>Что взять на прогулку</h1>
  <p>Проверьте вещи перед выходом.</p>
  <ul>
    <li>Вода</li>
    <li>Дождевик</li>
  </ul>
</body>
</html>

Основные теги HTML: заголовки, абзацы и списки

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

В HTML есть шесть уровней заголовков: от h1 до h6. Для обычной статьи используйте h1 как главный заголовок, h2 для разделов, h3 для подразделов. Последовательная иерархия помогает читателю ориентироваться в материале.

Тег p создаёт абзац. Перенос строки br подходит там, где перенос имеет смысл внутри текста, например в стихотворении. Не стройте отступы пустыми абзацами и повторениями br: для расстояния между блоками есть CSS.

Обычно strong отображается жирным, а em курсивом, но стиль можно изменить. Пробелы и переносы в исходном тексте обычно схлопываются при отображении. Для точного сохранения расположения строк есть pre, например в примере программы.

Маркированные и нумерованные списки

Маркированный список ul подходит для перечисления без обязательного порядка: материалов, характеристик или документов. Нумерованный список ol используйте для последовательности шагов. Каждый пункт внутри ul или ol обозначают элементом li.

В список HTML можно вложить другой список. Размещайте вложенный ul или ol внутри соответствующего li. Так подкатегории остаются частью нужного пункта, а структура понятна браузеру и читателю.

Ссылки, изображения и видео на странице

Ссылку в HTML создают элементом a с атрибутом href. Внутри размещают понятный текст: «Инструкция по сборке», а не просто «здесь». Для внешнего адреса указывают полный URL, включая https, для соседнего документа можно использовать относительный путь.

Тег img добавляет изображение. Атрибут src указывает файл, а alt задаёт альтернативный текст. Для схемы объясните, что она показывает. Для декоративной картинки нужен пустой alt, чтобы программа чтения с экрана не озвучивала лишнее.

HTML позволяет размещать видео через video и звук через audio. Атрибут controls добавляет управление воспроизведением. Медиафайл должен существовать по указанному адресу.

<p><a href="https://html.spec.whatwg.org/">Справочник HTML</a></p>
<img src="images/walk.jpg" alt="Тропа вдоль озера">

Таблицы и формы в HTML

Таблица HTML подходит для данных, которые удобно сравнивать по строкам и столбцам. Например, для размеров одежды или характеристик оборудования. Элемент table содержит таблицу, tr обозначает строку, th заголовочную ячейку, td обычную ячейку.

Добавьте название таблицы через caption и обозначьте связь заголовочных ячеек с данными через scope. Так таблицу проще воспринимать с помощью вспомогательных технологий. Располагать всю страницу таблицами не стоит: для макета есть CSS.

Форма HTML собирает ввод пользователя: текст, выбранный вариант или отметку согласия. Элемент form объединяет поля, input создаёт поле ввода, textarea многострочное поле, button кнопку. Подпись label связывают с полем через совпадающие значения for и id.

Атрибут action указывает адрес обработчика, method задаёт способ отправки. У отправляемого текстового поля должен быть name: одного id недостаточно. Серверная программа принимает и проверяет данные. Проверка полей в браузере её не заменяет.

Семантический HTML и специальные символы

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

Для тематического раздела используйте section, обычно с заголовком. Элементы header и footer обозначают вводную и завершающую части страницы или раздела. Универсальные div и span пригодятся, когда более точного смыслового элемента нет.

Семантика HTML помогает вспомогательным программам определять роли элементов. Дополнительно проверяйте подписи, порядок чтения и управление с клавиатуры.

Чтобы вывести угловую скобку как текст, используют специальную запись символа. Например, < обозначает знак «меньше», > знак «больше», & амперсанд. Это нужно, когда вы показываете HTML-код читателю, а не хотите превратить его в разметку.

Формат HTML: как создать, сохранить и открыть файл

HTML-файл содержит текст с разметкой и обычно имеет расширение .html или .htm. Редактор показывает код, браузер отображает страницу.

Для HTML подойдёт любой редактор обычного текста с подсветкой синтаксиса или без неё. Текстовый процессор может добавить собственное форматирование. При сохранении выбирайте обычный текст.

1. Создайте отдельную папку и новый файл index.html.
2. Скопируйте полный пример HTML из этой статьи и замените заголовок своим.
3. Сохраните документ в UTF-8. Проверьте, что редактор не добавил в конце расширение .txt.
4. Откройте файл браузером и сравните заголовок вкладки с заголовком внутри страницы.
5. Измените абзац, сохраните файл и обновите страницу. Затем добавьте ещё один пункт списка.

Откуда появился HTML и что означает HTML5

HTML создал Тим Бернерс-Ли в CERN для обмена связанными документами. Позднее появились таблицы, формы и мультимедиа. Разные расширения производителей браузеров усложняли совместимость, поэтому разработчикам понадобились общие правила.

Название HTML5 часто встречается в старых курсах. На сентябрь 2026 года WHATWG развивает HTML Living Standard: правила обновляются постоянно. XHTML обозначал XML-синтаксис HTML. При обработке как XML ошибки синтаксиса могут помешать отображению документа.

Преимущества, ограничения и ошибки HTML

Преимущества HTML: открытый стандарт, поддержка браузерами и возможность начать без установки библиотек. Исходный текст легко посмотреть и изменить. Обратная совместимость помогает открывать старые документы, но новые возможности проверяйте в нужных браузерах.

HTML не заменяет CSS, программирование и серверную обработку. Для повторяющихся страниц используют шаблоны или CMS, чтобы не копировать общие блоки вручную.

• Пересекают границы вложенных элементов. Делайте отступы и проверяйте порядок закрывающих тегов.
• Путают head с header: служебную часть документа с вводной частью страницы.
• Вставляют изображение без подходящего alt. Описывайте смысл информативной картинки, а декоративную оставляйте с пустым значением.
• Используют заголовки только ради размера букв. Выбирайте уровень по структуре, оформление задавайте через CSS.
• Забывают сохранить файл перед обновлением браузера. Убедитесь, что редактируете тот документ, который открыли.
• Считают внешний вид доказательством правильности кода. Браузер исправляет некоторые ошибки HTML при разборе, поэтому проверяйте также структуру.

HTML и поисковые системы

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

Google выполняет JavaScript, но такая обработка имеет ограничения. Основной текст и ссылки в исходном ответе сервера снижают зависимость от выполнения скриптов.

Как изучить HTML на практике

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

После основ HTML переходите к CSS, адаптивной вёрстке и доступности. Затем изучайте JavaScript для интерактивных приложений. Не начинайте с фреймворка, пока не понимаете, какую разметку он создаёт.

Проверьте файл валидатором HTML от W3C: загрузите документ или вставьте код и запустите проверку. Исправляйте сначала первую ошибку: остальные могут быть её следствием. Затем проверьте страницу в браузере и переходы клавишей Tab. Валидатор не оценивает удобство страницы.

Если вам нужен сайт для бизнеса, сначала опишите его страницы, содержание и действия посетителей. Эти требования помогут определить объём разработки. В seosite1 можно заказать услугу «разработка сайта под ключ». Итоговую цену и сроки называем после брифа.