HTML-разметка
HTML-разметка — это способ описания структуры веб-страницы с помощью языка разметки HTML (HyperText Markup Language). С её помощью браузер «понимает», где на странице заголовок, абзац, картинка, ссылка, форма и другие элементы.
Что такое HTML-разметка
HTML-разметка — это набор тегов, из которых состоит каркас веб-страницы.
Каждый тег говорит браузеру, что это за элемент и как его нужно интерпретировать: заголовок, текст, изображение, список, таблица и т.д.
Пример:
Тег <h1> обозначает главный заголовок, а <p> — абзац текста.
Структура HTML-документа
Базовый шаблон HTML-страницы:
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это пример HTML-разметки.</p>
</body>
</html>
- <html> — корневой элемент
- <head> — служебная часть (мета-теги, title, подключения стилей и скриптов)
- <body> — содержимое страницы, видимое пользователю
Основные элементы HTML-разметки
Чаще всего используются:
- Заголовки: <h1>…<h6>
- Абзацы: <p>
- Ссылки: <a href=»…»>
- Изображения: <img src=»…» alt=»…»>
- Списки: <ul>, <ol>, <li>
- Блоки: <div>, <section>, <header>, <footer>
- Таблицы: <table>, <tr>, <td>
- Формы: <form>, <input>, <button>
Зачем нужна HTML-разметка
HTML-разметка:
- задаёт структуру страницы;
- помогает браузеру правильно отображать контент;
- влияет на SEO (заголовки, списки, семантические теги);
- служит основой для стилей (CSS) и интерактивности (JavaScript);
- делает страницу доступной для поисковых роботов и ассистивных технологий.
Без HTML-разметки сайт был бы просто «плоским» текстом без логики и структуры.
Семантическая HTML-разметка
Современный подход — использовать семантические теги, которые описывают смысл блоков:
- <header> — шапка
- <nav> — навигация
- <main> — основное содержимое
- <article> — статья
- <section> — раздел
- <footer> — подвал
Это помогает и людям, и поисковым системам лучше понимать содержание страницы.
Итог
HTML-разметка — это фундамент любой веб-страницы. Она определяет структуру и смысл контента, а уже поверх неё накладываются стили (CSS) и логика (JavaScript).
