HTML
Разработчику
Аналитику
Тестировщику
Архитектору
Инженеру
См. также: Операторы — общая база для условий и выражений в коде; в HTML её почти нет, зато она понадобится в CSS и JavaScript. Целые HTML-файлы с разбором тегов — HTML-страницы целиком. Готовые страницы "скелет + стили" — HTML + CSS — готовые макеты и Tailwind — готовые блоки. Оживление блоков — CSS-анимации — готовые эффекты.
Play ITЗагрузка интерактивного демо…
HTML
Основы HTML
★ HTML (HyperText Markup Language) — язык разметки гипертекста: он сообщает браузеру, где текст, заголовки, ссылки и изображения. Вёрстка в веб-дизайне — сборка готовой страницы из этих элементов (аналог полосы в издательстве); см. раздел про ссылки и блок "Гипертекст" ниже.
Play ITЗагрузка интерактивного демо…
Отдельная версия в браузере: WebEditor — Онлайн-редактор HTML, CSS и JavaScript с живым предпросмотром — обновляется при вводе.
Собрали разметку в редакторе — оформите целый файл в HTML-страницы целиком (каркас, теги, формы) или сразу перейдите к оформлению в галерее HTML+CSS и Tailwind — готовые блоки: там Flex/Grid и типичные ошибки новичков.
HTML предоставляет следующие возможности:
- организовать данные в логические блоки — заголовки, абзацы, списки, таблицы, формы и другие элементы;
- создать иерархическую структуру документа, где каждый фрагмент имеет своё место и назначение;
- возможность описать значение содержимого, а не только его внешний вид;
- позволяет браузерам, поисковым системам и другим инструментам лучше понимать, что находится на странице;
- гипертекстовое соединение — возможность ссылаться на другие документы, изображения, медиа и сервисы;
- поддерживает элементы, которые становятся точками взаимодействия с пользователем — кнопки, поля ввода, меню;
- выступает платформой, на которой работают CSS (для стилей) и JavaScript (для поведения);
- предоставляет структуру, которую можно адаптировать под экраны разных размеров и типов устройств.
Логические блоки
Логический блок — это фрагмент содержимого веб-страницы, объединённый общей смысловой или функциональной ролью. Такие блоки помогают структурировать информацию так, чтобы она была понятна не только человеку, но и машине — браузеру, поисковому роботу, скринридеру.
Примеры логических блоков:
- заголовок статьи (
<h1>); - абзац текста (
<p>); - список преимуществ продукта (
<ul>или<ol>); - форма обратной связи (
<form>); - навигационное меню (
<nav>); - футер сайта с контактами (
<footer>).
Без логических блоков страница превращается в сплошной поток символов, который невозможно интерпретировать корректно.
Callout и details — выноски и раскрывающиеся блоки
В длинных статьях (в том числе в этой энциклопедии) удобно отделять советы, предупреждения и необязательные детали от основного текста. Для этого используют callout и пару тегов <details> / <summary>.
Callout (выноска)
Callout — оформленный блок с заголовком и телом. Отдельного тега <callout> в стандарте HTML нет — это соглашение проекта — контейнер <div class="callout callout--тип">, заголовок в <div class="callout-title">, стили задаёт CSS сайта. Внутри callout работает обычный Markdown (ссылки, списки, `код`).
| Модификатор класса | Назначение |
|---|---|
callout--tip | совет, маршрут чтения |
callout--info | справка, "для кого статья", связь с другими материалами |
callout--warning | предупреждение |
callout--caution | осторожно, возможны побочные эффекты |
callout--danger | критично (продакшен, безопасность) |
callout--note | нейтральная заметка |
В исходниках статей не используйте синтаксис Docusaurus :::tip / :::info — в текущей сборке он не рендерится. Шаблон и правила — в Markdown и расширения.
Пример на странице (совет):
Перед правкой HTML откройте практическое задание или интерактивную песочницу в начале статьи — так быстрее запоминается разметка.
Пример на странице (справка):
<div> и class, что вы уже используете для вёрстки; отличие только в согласованных классах и CSS энциклопедии.Разметка в файле статьи:
<div class="callout callout--tip">
<div class="callout-title">Заголовок</div>
Текст выноски: <strong>markdown</strong> и <a href="/encyclopedia/3-data-markup/3-09-html/intro">ссылки</a>.
</div>
<details> и <summary>
<details> — стандартный HTML-элемент "раскрывающийся блок". По умолчанию содержимое скрыто; заголовок-кнопка задаётся тегом <summary>. Работает без JavaScript, доступен с клавиатуры и для скринридеров. Атрибут open раскрывает блок сразу при загрузке.
Пример на странице — нажмите заголовок, чтобы развернуть:
Что писать внутри <summary>
Краткая формулировка вопроса или темы. Внутри <details> — абзацы, списки, даже вложенный код. Не прячьте в summary единственный важный факт: основной смысл должен оставаться в основном тексте статьи.
Минимальная разметка:
<details>
<summary>Показать атрибуты тега <code><img></code></summary>
<p><code>src</code>, <code>alt</code>, <code>width</code>, <code>height</code>, <code>loading</code>.</p>
</details>
Полный разбор атрибутов и доступности — в справочнике по HTML.
Иерархическая структура документа
Документ в контексте веб-разработки — это одна веб-страница, представленная в виде HTML-файла. Он может быть статичным (записан на диске) или динамически сгенерированным сервером при каждом запросе.
Каждый документ имеет иерархическую структуру, построенную на принципе вложенности: одни элементы находятся внутри других, формируя древовидную модель — DOM (Document Object Model). Эта структура определяет, как части страницы связаны между собой и как они должны отображаться.
Пример иерархии:
Код ITЗагрузка примера кода…
В этом примере:
<html>— корневой элемент;<head>и<body>— его прямые потомки;<header>,<main>,<footer>— дочерние элементы<body>;- каждый уровень вложенности задаёт семантическую роль.
Веб-страница
Веб-страница (англ. web page) — документ или информационный ресурс Всемирной паутины, к которому обращаются через веб-браузер. Типичная страница — текстовый файл в формате HTML; внутри разметки указывают ссылки на другие файлы (изображения, стили, скрипты, видео, данные API) и на другие страницы.
Информационно значимую часть страницы называют контентом (от англ. content — "содержание"). Несколько страниц с общей темой, единым оформлением и перекрёстными ссылками образуют веб-сайт.
| Тип | Как устроена | Пример |
|---|---|---|
| Статическая | Готовый файл на сервере; при каждом запросе отдаётся один и тот же HTML (если не подгружают внешние баннеры или виджеты) | about.html, лендинг из статики |
| Динамическая | HTML собирает программа на сервере под конкретный запрос — пользователь, время, данные из БД | страницы на PHP, Node.js, Python |
Браузер получает уже сформированный HTML (или JSON для SPA) и строит из него DOM — дерево узлов после разбора разметки. Параллельно из CSS получают CSSOM, объединяют в дерево отрисовки и выводят пиксели на экран; JavaScript может менять DOM после загрузки. Цепочка от ввода URL до картинки на экране — "От URL до пикселей". Серверная логика (PHP и др.) в ответ пользователю не попадает — только результат, чаще всего разметка.
Содержимое веб-страницы
Содержимое веб-страницы — это всё, что пользователь видит или с чем взаимодействует — текст, изображения, видео, кнопки, формы, ссылки, аудио и другие медиаэлементы. В HTML содержимое всегда помещается внутрь тегов, которые описывают его тип и назначение.
Содержимое делится на:
- текстовое — слова, цифры, символы;
- медиа — изображения, звук, видео;
- интерактивное — поля ввода, кнопки, выпадающие списки;
- навигационное — ссылки, меню, хлебные крошки.
HTML не определяет, как именно будет выглядеть содержимое — этим занимается CSS. Но он чётко указывает, что это за содержимое.
Внешний вид страницы
Внешний вид страницы — это визуальное представление содержимого — цвета, шрифты, отступы, позиционирование, анимации, адаптация под экраны. Этот слой полностью управляется CSS (Cascading Style Sheets).
HTML отвечает за структуру, а CSS — за оформление. Например:
- HTML говорит: "Это заголовок первого уровня";
- CSS говорит — "Отобрази его жирным шрифтом размером 32px, синим цветом, с отступом сверху 24px".
Такое разделение ролей позволяет:
- легко менять дизайн без переписывания структуры;
- обеспечивать доступность (скринридеры читают структуру, а не стиль);
- поддерживать адаптивность (одна структура — разные стили для телефона, планшета, ПК).
Гипертекст и гиперссылки
Гипертекст (от греч. ὑπέρ — "сверх") — вид текста, который существует только в электронном виде. Главное отличие от печатной страницы — гиперссылки — по одному действию (клик, Enter) читатель переходит к другому документу, разделу или файлу. Удобная аналогия — энциклопедия: короткие статьи со ссылками на соседние темы; в вебе такие "тома" — HTML-файлы и сервисы, связанные ссылками нелинейно — порядок чтения выбирает пользователь.
В компьютерной терминологии гипертекст — текст, размеченный языком вроде HTML с расчётом на переходы по ссылкам. Информационные единицы образуют сеть, а не одну линию "сверху вниз".
Термин ввёл Тед Нельсон в 1965 году:
"Гипертекст" — совокупность письменного или изобразительного материала, взаимосвязанного так сложно, что его невозможно было бы удобно представить на бумаге.
Идею связанных электронных знаний ещё в 1945 году описал Вэннивар Буш в статье "As We May Think"; позже на этом выросли гипертекстовые системы, Интернет и проекты вроде Википедии.
Гиперссылка (hyperlink) — часть гипертекстового документа — фрагмент, указывающий на другой объект (страницу, файл, раздел #id, почтовый адрес). В HTML базовый элемент ссылки — тег <a> (anchor):
<a href="https://spirzen.ru">Перейти на сайт</a>
Полный адрес в href, например https://www.example.com/blog/index.html, обычно включает:
- протокол (
https:) — как обмениваться данными; - хост (
www.example.com) — сервер в сети; - путь (
/blog/index.html) — файл или маршрут на сервере.
Битая ссылка ведёт на удалённый или переименованный ресурс; браузер показывает ошибку (часто 404). Проверка ссылок — часть сопровождения сайта.
| Понятие | Суть |
|---|---|
| Обычный текст | Статичен, без активных переходов |
| Гипертекст | Текст + сеть переходов между документами |
| Гиперссылка | Конкретный переход (<a href="…">) |
Примеры гипертекста:
- Википедия: термины ведут на связанные статьи.
- Блог: "Подробнее — статья про CSS".
- Навигация: "Главная → Услуги → Веб-разработка".
Гипертекст — основа World Wide Web. Динамические фрагменты страницы (время, имя из формы, список из БД) добавляет серверный код — см. PHP — о разделе и раздел "Веб-страница" выше.
Как работает HTML?
Разметка и теги
Для ясности, можно представить себе простую картину – вы хотите вывести текст с заголовком, ссылкой и изображением. Тогда в голове мы бы сразу структурировали информацию:
Заголовок
Некое содержание
И как раз, чтобы браузер выполнял распределение всех элементов, компоновал, отрисовывал и отображал в нужном порядке, информацию структурируют разметкой.
HTML — язык разметки, а не язык программирования. Он не выполняет вычисления, не принимает решений, не управляет логикой. Он лишь описывает.
Разметка — это процесс добавления метаданных к содержимому с помощью специальных конструкций (тегов), чтобы описать его структуру, тип и назначение. В отличие от форматирования (жирный, курсив), разметка не говорит, как выглядеть, а говорит, что это.
Пример разметки:
<article>
<h2>Новость дня</h2>
<time datetime="2026-03-15">15 марта 2026</time>
<p>Сегодня произошло важное событие...</p>
</article>
Здесь:
<article>— семантический блок статьи;<h2>— подзаголовок;<time>— машиночитаемая дата;<p>— абзац.
Браузер, поисковик и скринридер используют эту разметку для правильной интерпретации.
★ Разметка – это способ структурирования информации с помощью специальных меток (тегов).
★ Теги – это строительные блоки HTML, команды в угловых скобках "<" и ">". Они бывают:
- парные:
<тег>…</тег>(например,<p>Текст</p>); - одиночные:
<тег>(например,<img>для изображений).
Парные теги (имеют открывающую и закрывающую часть)
| Тег | Назначение |
|---|---|
<html> | Корневой элемент всего документа |
<head> | Метаданные (заголовок, скрипты, стили) |
<body> | Видимое содержимое страницы |
<div> | Универсальный блок-контейнер |
<p> | Абзац текста |
<h1>–<h6> | Заголовки разного уровня |
<ul>, <ol>, <li> | Списки и их элементы |
<a> | Гиперссылка |
<span> | Встроенный контейнер для текста |
<form> | Форма ввода данных |
<table>, <tr>, <td> | Таблица, строка, ячейка |
<section>, <article>, <nav>, <aside>, <header>, <footer> | Семантические блоки |
Пример:
<p>Это <strong>важный</strong> текст.</p>
Одиночные (самозакрывающиеся) теги
| Тег | Назначение |
|---|---|
<img> | Изображение |
<br> | Перенос строки |
<hr> | Горизонтальная линия-разделитель |
<input> | Поле ввода формы |
<meta> | Метаданные (кодировка, описание, ключевые слова) |
<link> | Подключение внешних ресурсов (например, CSS) |
<area> | Область внутри карты изображения |
<source> | Источник медиафайла (для <audio>, <video>) |
<track> | Субтитры для видео |
<col> | Колонка в таблице |
Пример:
<img src="logo.png" alt="Логотип компании">
<br>
<input type="email" placeholder="Ваш email">
Все одиночные теги не требуют закрывающей части. В HTML5 их можно писать без / в конце (в отличие от XHTML).
Браузер видит тег – ключевое слово, размеченное угловыми скобками, и понимает, что в этом месте нужен специфический объект, тип которого определён ключевым словом. Теги позволяют структурировать информацию, вкладывая их друг в друга, словно матрёшку, благодаря чему выстраивается иерархическая структура-дерево DOM.
<div>
<p>Текст внутри блока</p>
<p>Текст внутри блока</p>
</div>
<div> — блочный контейнер — группирует несколько элементов (абзацы, списки, другие <div>) и удобен для стилей и макета целой секции. <span> — строчный контейнер — оборачивает часть текста внутри строки (слово, цифры, фразу) без переноса на новую строку. Подробное сравнение с примерами — в разделе "Основные HTML-теги" — <div> и <span>.
DOM-дерево
Объектная модель документа (Document Object Model, DOM) — это программный интерфейс, представляющий структуру HTML-документа в виде дерева объектов. Каждый элемент HTML-разметки становится отдельным объектом с определёнными свойствами и методами.
В работе не стоит пугаться этого слова – DOM – это просто "дерево тегов", где каждый – элемент, то есть объект. Вложенные теги будут являться "детьми" родительского элемента. И всё это DOM-дерево именуется "document" в JavaScript. Но к JS мы придём гораздо позже.
Браузер при загрузке страницы читает HTML-код и строит из него внутреннюю структуру — дерево объектов. Эта структура позволяет программам (в первую очередь JavaScript) взаимодействовать с содержимым страницы — читать, изменять, удалять или добавлять новые элементы.
DOM не является частью языка JavaScript, это независимая спецификация, реализованная в браузерах. JavaScript лишь использует DOM как API для работы с документом.
Первый тег в парном теге является открывающим, второй – закрывающий. То есть:
<div>будет открывающим тегом;</div>закрывающим.
В одиночном теге он единственный, так что он и открывающий, и закрывающий.
Дерево — это иерархическая структура данных, где каждый элемент (называемый узлом) может иметь родителя и потомков. В DOM-дереве:
- корневой узел — это
<html>; - каждый тег — узел-элемент;
- текст внутри тегов — текстовые узлы;
- комментарии и атрибуты — тоже узлы, но другого типа.
Особенности дерева:
- у каждого узла, кроме корня, ровно один родитель;
- узлы без потомков называются листьями;
- путь от корня до любого узла — уникален.
Такая структура позволяет точно определить положение любого элемента на странице и его отношение к другим элементам.
Связи в DOM-дереве строятся по принципу вложенности в HTML-разметке. Если один тег находится внутри другого, он становится его дочерним элементом, а внешний тег — родительским.
Основные типы связей:
- Родитель (parent) — элемент, внутри которого находится другой элемент.
- Дочерний (child) — элемент, находящийся непосредственно внутри другого.
- Соседний (sibling) — элементы, имеющие одного и того же родителя и расположенные на одном уровне вложенности.
Пример связи:
Код ITЗагрузка примера кода…
В этом примере:
<body>— родитель для<header>и<main>;<header>— родитель для<h1>и<nav>;<nav>— родитель для<ul>;<ul>— родитель для двух<li>;<li>— родитель для<a>;<main>— родитель для<p>;<h1>,<nav>,<main>— соседи (все дети<body>).
Элемент включает в себя всё содержимое между открывающим и закрывающим тегами, включая:
- другие элементы;
- текст;
- комментарии;
- пробельные символы (переносы строк, табуляции, пробелы между тегами).
Чтобы понять, что является дочерним для элемента, нужно найти всё, что находится непосредственно внутри его открывающего и закрывающего тегов.
Пример:
<div id="container">
<p>Первый абзац</p>
<!-- комментарий -->
<span>Второй фрагмент</span>
Текст вне тегов
</div>
Для элемента <div id="container"> дочерними являются:
- элемент
<p>; - комментарий
{/* комментарий */}; - элемент
<span>; - текстовый узел
" Текст вне тегов".
Важно: даже перенос строки после <div> и перед <p> создаёт текстовый узел с пробелами и символами новой строки. Это часто вызывает путаницу при работе с DOM.
Простые примеры DOM-дерева
Пример 1 — Минимальная страница
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
</head>
<body>
<h1>Привет!</h1>
<p>Это параграф.</p>
</body>
</html>
DOM-дерево:
html
├── head
│ └── title
│ └── "Пример"
└── body
├── h1
│ └── "Привет!"
└── p
└── "Это параграф."
Пример 2 — Вложенность
<ul>
<li>Пункт 1</li>
<li>
Пункт 2
<ul>
<li>Подпункт 2.1</li>
<li>Подпункт 2.2</li>
</ul>
</li>
</ul>
DOM-дерево:
ul
├── li
│ └── "Пункт 1"
└── li
├── "Пункт 2"
└── ul
├── li
│ └── "Подпункт 2.1"
└── li
└── "Подпункт 2.2"
Пример 3 — Одиночные теги
<div>
<img src="photo.jpg" alt="Фото">
<br>
<input type="text">
</div>
DOM-дерево:
div
├── img
├── br
└── input
У одиночных тегов (<img>, <br>, <input>) нет дочерних узлов, так как они не имеют закрывающего тега и не могут содержать контент.
Атрибуты
Атрибут — это дополнительная характеристика HTML-тега, которая уточняет его поведение, внешний вид или содержание. Атрибуты указываются внутри открывающего тега и всегда имеют пару "имя = значение".
Атрибут всегда привязан к конкретному элементу и расширяет его возможности. Например, тег <img> без атрибутов не может отобразить изображение — ему обязательно нужен атрибут src, чтобы знать, какой файл загружать.
Атрибуты – настройки тегов, которые добавляют к тегам дополнительную информацию (значение атрибута), и указываются внутри открывающего тега:
<img src="test.jpg" alt="Тест">
- тег -
<img>; src– атрибут, указывающий путь к изображению;"test.jpg"– значение, которому равен src;alt– атрибут, указывающий альтернативный текст;"Тест"– значение, сам альтернативный текст.
Значение атрибута — это строка данных, которая определяет конкретную настройку для элемента. Значение всегда следует после знака равенства и заключается в кавычки (одинарные ' или двойные ").
Правила записи значения:
- значение должно быть строкой;
- допускаются буквы, цифры, символы, пробелы, Unicode-символы;
- если значение содержит кавычки, их нужно экранировать или использовать противоположный тип кавычек;
- некоторые атрибуты могут иметь пустое значение (
"") или вообще не требовать значения (булевы атрибуты, напримерdisabled).
Примеры корректных значений:
<input type="text" placeholder="Введите имя">
<img src="/images/logo.png" alt="Логотип компании">
<button disabled>Недоступно</button>
<meta charset="utf-8">
В последнем примере disabled — булев атрибут: его наличие уже означает true, значение не требуется.
На первый взгляд, язык разметки HTML схож с XML. Однако, у них есть существенные отличия.
| HTML | XML |
|---|---|
| Фиксированный набор тегов | Теги придумывает сам разработчик |
| Теги предназначены для отображения контента в браузере | Теги предназначены для хранения и передачи данных |
| Можно пропускать некоторые закрывающие теги | Строгий синтаксис — все теги должны быть закрыты |
Тег определяет тип элемента — что это за объект на странице — заголовок, абзац, изображение, форма и так далее. Тег задаёт структуру и семантику.
Атрибут уточняет свойства этого элемента — где взять данные, как себя вести, как взаимодействовать с пользователем.
Сравнение:
<a>— тег, создающий гиперссылку;href="https://example.com"— атрибут, указывающий адрес назначения;<input>— тег, создающий поле ввода;type="email"— атрибут, определяющий тип данных, которые можно ввести (для почты браузер дополнительно проверяет формат при отправке формы).
Тег — это "кто", атрибут — это "какой" или "куда". Шпаргалка по всем значениям type у <input> — в статье основные теги, раздел про формы.
Каждый HTML-тег поддерживает определённый набор атрибутов. Существует два типа атрибутов:
- Глобальные атрибуты — доступны всем элементам. Примеры:
id— уникальный идентификатор;class— список классов для стилизации и скриптов;style— встроенные CSS-стили;title— всплывающая подсказка;tabindex— порядок перехода по клавише Tab;
translate— указывает, можно ли переводить содержимое элемента встроенными средствами браузера (yes/no);data-*— пользовательские данные (например,data-user-id="123").
- Специфические атрибуты — работают только с определёнными тегами. Примеры:
src— только для<img>,<script>,<audio>,<video>,<iframe>;href— для<a>,<link>;type— для<input>,<button>,<script>,<style>;alt— только для<img>и<area>;placeholder— только для<input>и<textarea>;action,method— только для<form>.
Чтобы узнать, какие атрибуты поддерживает тег, достаточно обратиться к официальной спецификации HTML или проверенной документации. В реальной практике разработчик запоминает наиболее часто используемые комбинации.
Атрибут tabindex и клавиатурная навигация
tabindex управляет тем, может ли элемент получать фокус с клавиатуры и в каком порядке происходит переход по клавише Tab.
Это один из ключевых атрибутов для доступности (a11y), особенно если на странице есть кастомные интерактивные элементы.
Основные значения:
tabindex="0"— элемент попадает в естественный порядок фокуса (по DOM-структуре);tabindex="-1"— элемент не попадает в обход поTab, но на него можно перевести фокус программно (element.focus());tabindex="1",tabindex="2"и т.д. — задают явный приоритет обхода.
<a href="#content">Ссылка (в естественном порядке)</a>
<div tabindex="0">Кастомный блок, доступный через Tab</div>
<div id="msg" tabindex="-1">Сообщение для программного фокуса</div>
document.getElementById("msg").focus();
Практические рекомендации:
- используйте
tabindex="0"для неинтерактивных элементов, которые должны стать доступными с клавиатуры; - используйте
tabindex="-1"для программного перевода фокуса (например, после открытия модального окна или перехода к ошибке формы); - избегайте положительных значений
tabindexв обычной вёрстке: они ломают естественный порядок и усложняют навигацию.
tabindex работает и для интерактивных элементов, и для обычных контейнеров (<div>, <section>), но применять его стоит осознанно.
Примеры атрибутов
Глобальные атрибуты
<div id="main-content" class="container" title="Основной блок">
<p data-role="intro">Этот абзац имеет пользовательские данные.</p>
</div>
<p translate="no">Этот текст не нужно переводить автоматически.</p>
Атрибуты для ссылок
<a href="https://spirzen.ru" target="_blank" rel="noopener">Перейти на сайт</a>
href— адрес;target="_blank"— открывать в новой вкладке;rel="noopener"— мера безопасности при открытии внешних ссылок.
Атрибуты для форм
<form action="/submit" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="user_email" required placeholder="user@example.com">
<button type="submit">Отправить</button>
</form>
action— куда отправлять данные;method— HTTP-метод;type— тип поля;idиfor— связь метки и поля;name— имя переменной при отправке;required— обязательное поле;placeholder— подсказка внутри поля.
Атрибуты для медиа
<img src="photo.jpg" alt="Пейзаж в горах" width="600" height="400">
<video controls muted preload="metadata">
<source src="movie.mp4" type="video/mp4">
</video>
alt— альтернативный текст для доступности;width,height— размеры;controls,muted,preload— управление воспроизведением.
Булевы атрибуты
<input type="checkbox" checked disabled readonly>
<option selected>Выбрано по умолчанию</option>
Наличие таких атрибутов уже активирует функцию. Их значение не указывается (хотя в старых стандартах иногда писали checked="checked" — сейчас это не требуется).
Практика
Давайте попробуем сразу на практике – создайте первую страницу, открыв Блокнот (Windows) или иной текстовый редактор (VS Code, Notepad++) и добавив в него следующее:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая HTML-страница.</p>
</body>
</html>
После этого попробуйте сохранить с расширением файла .html и открыть файл при помощи любого браузера.
Структура
Из чего состоит веб-страница на HTML
-
Пролог (DOCTYPE и корневой тег), включающий:
<!DOCTYPE>- тег, объявляющий тип документа (HTML).<html>- корневой тег всей страницы, словно самый главный родитель всего дерева.
Корневой тег html имеет атрибут lang, который указывает язык (в нашем случае, это ru – русский).
- Обязательные и базовые теги
Всегда есть ряд обязательных тегов:
<head>- голова документа, которая хранит служебную информацию:<meta charset="UTF-8">— кодировка текста;<title>— заголовок вкладки браузера;- опционально —
<style>и<script>, но мы пока не будем их затрагивать.
<body>— тело документа, то, что отобразится на странице — текст, изображения, ссылки.
<title> будет отображаться только на вкладке (заголовке окна):
а <body> покажет внутренности:
DOM-дерево будет выглядеть так:
<!DOCTYPE html> в схеме выше — только декларация типа документа; в DOM-дереве браузера она не становится узлом, корень — элемент <html>.
Этих тегов уже достаточно для работы HTML. Попробуйте поэкспериментировать с текстом, если вам интересно. Замените текст заголовка, содержимое, можете добавить и ещё собственный фрагмент текста с заголовком (жирным шрифтом), закрытым в <h1>, и основным текстом (более мелкий шрифт), закрытым в <p>.
Необязательные теги же используются для улучшения структуры:
<header>- шапка сайта, верхняя часть сайта;<footer>- подвал, нижняя часть сайта;<nav>- навигационное меню;<article>,<section>- смысловые блоки.
Давайте попробуем расширить нашу часть с новыми тегами – замените ваш тег <body> на новый со следующим содержимым:
<body>
<header>Логотип и меню</header>
<article>
<h1>Статья</h1>
<p>Текст...</p>
</article>
<footer>Контакты</footer>
</body>
Это и есть самый базовый шаблон структуры сайта – уже обладая этими знаниями, можно собрать свою структуру.
DOM-дерево будет следующим:
Помимо обязательных тегов, можно выделить универсальные атрибуты – это такие атрибуты, которые работают почти с любыми тегами:
- id – уникальный идентификатор, который делает элемент "единственным" на странице;
- class – определяет класс для группировки элементов, к примеру, если нужно сделать фрагмент "вкладкой" или "контентом вкладки";
- style – определяет стиль (CSS-стиль, но об этом позже);
- title – всплывающая подсказка при наведении.
Кавычки и запятые
В HTML, двойные кавычки — стандартное и рекомендуемое использование для значений атрибутов:
<div class="main-content"></div>
Одинарные кавычки допускаются, но лучше использовать их только если внутри значения есть двойная кавычка:
<p title='He said "Hello"'>Some text</p>
Апострофы (’) — не используются в HTML как часть синтаксиса, но могут быть частью текста (например, в ’, ’ или Unicode).
Если вы используете фреймворки (React, Vue и т. д.), то часто предпочитают двойные кавычки для соответствия JSX/TSX.
Точка (.) : не используется в синтаксисе HTML.
Запятая (,) : может использоваться внутри атрибутов, если это часть значения:
<div data-coords="100,200"></div>
Точка с запятой (;) — не используется в HTML, но встречается в URL (например, в параметрах):
<a href="page.php?id=1;mode=dark">Link</a>
В чистом HTML эти символы не имеют специального значения для языка разметки, но могут быть частью значений.