Введение в HTML: Синтаксис, структура документа и базовые теги
Введение в HTML: Синтаксис, структура документа и базовые теги
Добро пожаловать на курс «Основы языка разметки HTML». Вы делаете первый и самый важный шаг в мир веб-разработки. Прежде чем мы начнем писать код, давайте разберемся с фундаментальным вопросом, который вы задали в теме урока.
Что такое HTML?
Аббревиатура HTML расшифровывается как HyperText Markup Language (язык гипертекстовой разметки).
Важно сразу прояснить распространенное заблуждение: HTML — это не язык программирования. В нем нет переменных, циклов, функций или логических операций, присущих таким языкам, как Python, Java или C++. HTML отвечает не за поведение программы, а за структуру и содержание веб-страницы.
Представьте, что создание сайта — это строительство дома:
- HTML — это фундамент, стены и перекрытия (каркас).
- CSS — это обои, краска и декор (внешний вид).
- JavaScript — это электричество, водопровод и умный дом (функциональность).
Сегодня мы учимся строить каркас.
Синтаксис HTML: Теги, элементы и атрибуты
HTML-документ состоит из элементов. Элементы создаются с помощью тегов. Теги — это ключевые слова, заключенные в угловые скобки.
Анатомия элемента
Большинство HTML-элементов являются парными и состоят из трех частей:
- Открывающий тег: сообщает браузеру, где начинается элемент (например,
<p>). - Контент: содержимое элемента (текст, картинка или другие теги).
- Закрывающий тег: сообщает браузеру, где элемент заканчивается. Он обязательно содержит слэш перед именем тега (например,
</p>).
Пример кода:
<tagname>Содержимое элемента</tagname>
Атрибуты
Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементе. Атрибуты всегда пишутся в открывающем теге и обычно состоят из имени и значения.
Формат записи:
имя_атрибута="значение"
Пример ссылки с атрибутом href (куда ведет ссылка):
<a href="https://example.com">Это ссылка на сайт</a>
Вложенность
Элементы могут быть вложены друг в друга, как матрешки. Это создает иерархическую структуру страницы.
Правильно:
<div>
<p>Текст внутри блока</p>
</div>
Неправильно (пересечение тегов):
<div>
<p>Текст внутри блока</div>
</p>
Структура HTML-документа
Любая веб-страница имеет строгую структуру. Браузер ожидает увидеть определенный набор тегов, чтобы корректно отобразить сайт.
Рассмотрим базовый шаблон:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый HTML-документ.</p>
</body>
</html>
Разберем каждую строку:
<!DOCTYPE html>— это не тег, а инструкция браузеру, сообщающая, что мы используем современный стандарт HTML5.<html>— корневой элемент. Весь код страницы должен находиться внутри него.<head>— «голова» документа. Здесь хранится служебная информация, которая не отображается на самой странице (кодировка, заголовок вкладки, подключение стилей).<body>— «тело» документа. Здесь находится всё, что пользователь видит в окне браузера (текст, картинки, кнопки).
Базовые теги для разметки текста
Теперь, когда у нас есть каркас, давайте наполним его содержимым.
Заголовки (Headings)
Существует 6 уровней заголовков, от <h1> до <h6>.
<h1>— самый важный заголовок (обычно название статьи или страницы). На странице должен быть только один<h1>.<h2>— заголовки разделов.<h3>— заголовки подразделов и так далее.
<h1>Главный заголовок</h1>
<h2>Заголовок раздела</h2>
<h3>Подзаголовок</h3>
Параграфы и перенос строк
Для обычного текста используется тег <p> (paragraph). Браузеры автоматически добавляют отступы сверху и снизу от параграфа.
Если вам нужно перенести текст на новую строку внутри параграфа, не создавая новый абзац, используйте одиночный тег <br> (line break). У него нет закрывающего тега.
<p>Это первая строка.<br>
Это вторая строка того же параграфа.</p>
Списки
Списки бывают двух основных видов:
- Маркированный список (
<ul>— unordered list): элементы помечаются точками (буллитами). - Нумерованный список (
<ol>— ordered list): элементы помечаются цифрами.
Внутри обоих типов списков каждый пункт оборачивается в тег <li> (list item).
Пример маркированного списка:
<ul>
<li>Хлеб</li>
<li>Молоко</li>
<li>Яйца</li>
</ul>
Изображения
Для вставки картинок используется одиночный тег <img>. У него есть два обязательных атрибута:
src(source) — путь к файлу изображения.alt(alternative text) — текстовое описание картинки. Оно появится, если картинка не загрузится, и важно для скринридеров (программ для незрячих пользователей).
<img src="cat.jpg" alt="Рыжий кот сидит на заборе">
Ссылки
Самый важный элемент интернета — гиперссылка. Она создается тегом <a> (anchor).
<a href="https://google.com" target="_blank">Перейти в Google</a>
href— адрес, куда ведет ссылка.target="_blank"— необязательный атрибут, который открывает ссылку в новой вкладке.
Семантика и форматирование
В старых версиях HTML часто использовали теги <b> (bold) для жирного текста и <i> (italic) для курсива. В современном HTML5 принято разделять визуальное оформление и смысл.
<strong>— важный текст (отображается жирным). Используется для логического выделения важности.<em>— акцентированный текст (отображается курсивом). Используется для изменения интонации при чтении.
Совет: Старайтесь использовать
<strong>и<em>вместо<b>и<i>, так как это помогает поисковым системам лучше понимать контент вашей страницы.
Заключение
Мы рассмотрели фундамент языка HTML. Теперь вы знаете, что это язык разметки, понимаете структуру тегов и умеете создавать базовый каркас страницы с заголовками, текстом, списками и изображениями.
В следующей статье мы углубимся в работу с атрибутами и научимся создавать сложные таблицы и формы обратной связи.