Справочник по IT

Русский

Українська
English

Русский

Українська
English

Appearance

Основы HTML: Теги ​

Теги HTML — это специальные ключевые слова, заключенные в угловые скобки (< и >). Они сообщают браузеру, как отображать содержимое веб-страницы. Большинство тегов встречаются парами: открывающий тег (<tagname>) и закрывающий тег (</tagname>). Закрывающий тег выглядит так же, как открывающий, но с косой чертой (/) перед именем тега.

Структура HTML-документа ​

Каждый HTML-документ имеет базовую структуру, которая определяется несколькими основными тегами:

html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Заголовок первого уровня</h1>
    <p>Это первый абзац текста.</p>
    </body>
</html>

Разберем основные теги этой структуры:

  • <!DOCTYPE html>: Объявление Doctype. Это не тег в обычном смысле, а инструкция браузеру о том, что документ является HTML5. Оно должно быть первой строкой в вашем HTML-документе.
  • <html>: Корневой элемент HTML-страницы. Все остальное содержимое страницы должно находиться внутри этого тега. Атрибут lang указывает язык содержимого страницы.
  • <head>: Содержит метаданные о HTML-документе, которые не отображаются непосредственно на странице (за исключением элемента <title>). Внутри <head> обычно находятся такие элементы, как:
    • <meta>: Предоставляет метаинформацию о HTML-документе (например, кодировку символов, описание, ключевые слова, настройки viewport).
    • <title>: Определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке.
    • <link>: Используется для подключения внешних файлов, таких как таблицы стилей CSS (с атрибутом rel="stylesheet") или иконки сайта (favicon).
    • <style>: Содержит встроенные стили CSS (обычно не рекомендуется для больших проектов).
    • <script>: Используется для подключения или встраивания JavaScript-кода (обычно размещается перед закрывающим тегом </body> для улучшения производительности).
  • <body>: Содержит все видимое содержимое HTML-документа (текст, изображения, ссылки, мультимедиа и другие элементы).

Типы тегов ​

Теги можно классифицировать по нескольким признакам:

Парные и непарные теги ​

  • Парные теги: Большинство тегов являются парными и состоят из открывающего и закрывающего тегов, между которыми располагается содержимое. Примеры: <h1>, <p>, <a>, <div>, <span>.
  • Непарные (одинарные или самозакрывающиеся) теги: Некоторые теги не имеют закрывающего тега и используются для вставки отдельных элементов или выполнения определенных действий. В HTML5 они могут быть записаны без косой черты на конце (например, <br>, <hr>, <img>, <input>, <meta>, <link>), хотя в XHTML требовалась косая черта на конце (<br />, <hr />, <img /> и т.д.).

Блочные и строчные теги ​

  • Блочные теги (display: block; по умолчанию): Занимают всю доступную ширину родительского элемента и создают перенос строки до и после себя, образуя "блоки". Примеры: <div>, <h1> - <h6>, <p>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>.

  • Строчные теги (display: inline; по умолчанию): Занимают только необходимую ширину для своего содержимого и не создают переносов строк. Они располагаются в потоке текста. Примеры: <span>, <a>, <img>, <strong>, <em>, <code>, <input>, <button>.

    Некоторые теги могут быть строчно-блочными (display: inline-block;), сочетая свойства строчных и блочных элементов (например, позволяют задавать ширину и высоту, но располагаются в потоке текста).

Семантические и несемантические теги ​

  • Семантические теги (появились в HTML5): Несут смысл и описывают роль содержимого, которое они заключают (например, <article>, <nav>, <aside>, <header>, <footer>). Использование семантических тегов улучшает доступность и SEO.
  • Несемантические теги: Не несут явного смыслового значения относительно своего содержимого и используются в основном для стилизации или организации контента (например, <div> — блочный контейнер, <span> — строчный контейнер).

Основные HTML-теги и их назначение ​

Вот краткий обзор некоторых наиболее часто используемых HTML-тегов:

Структурные теги ​

  • <html>: Корневой элемент HTML-документа.
  • <head>: Контейнер для метаданных.
  • <title>: Заголовок документа.
  • <body>: Контейнер для видимого содержимого.
  • <div>: Блочный контейнер общего назначения.
  • <span>: Строчный контейнер общего назначения.

Заголовки ​

  • <h1> - <h6>: Заголовки разных уровней (от самого важного <h1> до наименее важного <h6>).

Текст и абзацы ​

  • <p>: Абзац текста.
  • <br>: Перенос строки (непарный тег).
  • <hr>: Горизонтальная линия (тематический разрыв, непарный тег).
  • <pre>: Предварительно отформатированный текст (сохраняет пробелы и переносы строк).

Ссылки ​

  • <a>: Гиперссылка (якорь). Атрибут href указывает URL ссылки.

Изображения ​

  • <img>: Вставляет изображение (непарный тег). Атрибут src указывает путь к изображению, alt — альтернативный текст.

Списки ​

  • <ul>: Неупорядоченный список (маркированный).
  • <ol>: Упорядоченный список (нумерованный).
  • <li>: Элемент списка (внутри <ul> или <ol>).
  • <dl>: Список определений.
  • <dt>: Термин в списке определений.
  • <dd>: Определение термина в списке определений.

Таблицы ​

  • <table>: Контейнер для таблицы.
  • <tr>: Строка таблицы.
  • <th>: Заголовочная ячейка таблицы.
  • <td>: Ячейка данных таблицы.
  • <caption>: Заголовок таблицы.
  • <colgroup>: Группа столбцов для стилизации.
  • <col>: Отдельный столбец для стилизации.
  • <thead>: Заголовок таблицы (группировка строк).
  • <tbody>: Основное тело таблицы (группировка строк).
  • <tfoot>: Подвал таблицы (группировка строк).

Формы ​

  • <form>: Контейнер для HTML-формы. Атрибут action указывает URL для отправки данных, method — HTTP-метод отправки.
  • <input>: Элемент управления для ввода данных (текст, пароль, флажок, радиокнопка и др., тип определяется атрибутом type).
  • <textarea>: Многострочное текстовое поле.
  • <button>: Кнопка.
  • <select>: Выпадающий список.
  • <option>: Элемент выпадающего списка.
  • <label>: Метка для элемента формы.
  • <fieldset>: Группировка связанных элементов формы.
  • <legend>: Заголовок для группы <fieldset>.

Семантические теги (HTML5) ​

  • <article>: Самостоятельный контент.
  • <aside>: Дополнительный контент.
  • <nav>: Навигация.
  • <header>: Вводный контент раздела или страницы.
  • <footer>: Подвал раздела или страницы.
  • <section>: Тематический раздел контента.
  • <main>: Основной контент документа.

Мультимедиа (HTML5) ​

  • <audio>: Встраивание аудио.
  • <video>: Встраивание видео.
  • <source>: Указывает медиаресурсы для <audio> и <video>.
  • <canvas>: Холст для рисования графики с помощью JavaScript.
  • <svg>: Встраивание векторной графики.

Вложенность тегов ​

HTML-теги могут быть вложены друг в друга для создания структуры документа. Важно правильно вкладывать теги: закрывающий тег должен соответствовать последнему открытому тегу.

html
<div>
    <p><strong>Это жирный текст внутри абзаца внутри div-элемента.</strong></p>
</div>

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

Атрибуты тегов ​

Многие теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементе (например, href для <a>, src для <img>, class для стилизации). Атрибуты указываются в открывающем теге после имени тега. Подробнее об атрибутах мы поговорим в следующем разделе.

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