HTML (HyperText Markup Language) — это основной язык разметки, используемый для создания и структурирования веб-страниц. Одним из самых важных понятий в HTML являются теги. Теги служат строительными блоками для создания контента и разметки, позволяя браузерам правильно отображать информацию.
Основные понятия
Тег в HTML — это специальная последовательность символов, которая указывает браузеру, как обрабатывать содержимое между открывающим и закрывающим тегами. Теги обычно состоят из имени тега, заключенного в угловые скобки. Например, тег <p> обозначает параграф:
<p>Это пример параграфа.</p>
Каждый тег может иметь атрибуты, которые предоставляют дополнительную информацию о содержимом. Например:
<a href="https://example.com" target="_blank">Перейти на сайт</a>
В этом примере тег <a> (ссылка) имеет два атрибута: href, указывающий адрес ссылки, и target, определяющий, как открывать ссылку.
Типы тегов
Теги в HTML можно разделить на несколько категорий:
- Блочные теги: Эти теги создают блоки на странице и занимают всю доступную ширину. Примеры включают <div>, <h1>, <p>, <section>, <article> и <footer>. Блочные теги обычно используются для структурирования макета страницы.<div> <h1>Заголовок</h1> <p>Это параграф текста.</p> </div>
- Инлайновые теги: Эти теги не создают новых блоков и занимают только необходимое пространство. Примеры включают <span>, <a>, <strong>, <em> и <img>. Инлайновые теги обычно используются для форматирования текста внутри блочных элементов.<p>Это <strong>важный</strong> текст.</p>
3. Самозакрывающиеся теги: Это теги, которые не имеют закрывающего тега, так как они не содержат вложенного контента. Примеры включают <img>, <br>, <hr> и <input>. Они используются для вставки изображений, разрывов строк и других элементов, которые не требуют дополнительного контента.<img src="image.jpg" alt="Описание изображения">
Структура HTML-документа
Каждый HTML-документ начинается с основного тега <html>, который обрамляет весь контент страницы. Внутри этого тега обычно находятся два основных раздела: <head> и <body>.
- <head>: Этот раздел содержит метаданные о документе, такие как заголовок страницы, ссылки на стили и скрипты.
- <body>: Этот раздел содержит видимый контент страницы, включая текст, изображения, ссылки и другие элементы.
Пример структуры HTML-документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример документа</title>
</head>
<body>
<h1>Добро пожаловать на мой сайт</h1>
<p>Это пример параграфа текста.</p>
<a href="https://example.com">Перейти на сайт</a>
</body>
</html>