Теги
HTML-теги - это основные строительные блоки языка HTML, используемые для разметки содержимого веб-страницы. Теги заключаются в угловые скобки и, как правило, используются парами: открывающий тег и закрывающий тег (с косой чертой). Они определяют структуру документа, указывая браузеру, как отображать тот или иной элемент.
В отличие от мета-тегов, которые размещаются в разделе <head> и содержат служебную информацию о документе, HTML-теги формируют видимое содержимое страницы и определяют его семантическое значение. Это фундаментальное различие важно для понимания веб-разработки и SEO.
Синтаксис тегов
[править]Большинство HTML-тегов используются парами:
- <тег> - открывающий тег, отмечает начало элемента.
- </тег> - закрывающий тег, отмечает конец элемента.
- Между ними располагается содержимое элемента.
Некоторые теги являются одиночными (самозакрывающимися) и не имеют закрывающего тега. Например, <br> (перенос строки) или <img> (изображение).
Теги могут содержать атрибуты, которые дополняют или изменяют их поведение:
<тег атрибут="значение">содержимое</тег>
Например:
<a href="https://example.com">Это ссылка</a>
Семантические и структурные теги
[править]HTML-теги можно разделить на несколько категорий по их назначению.
Теги для структуры документа
[править]- <html> - корневой элемент HTML-документа.
- <head> - контейнер для мета-информации и служебных данных.
- <body> - контейнер для видимого содержимого страницы.
- <header> - шапка страницы или раздела (введён в HTML5).
- <footer> - подвал страницы или раздела (введён в HTML5).
- <nav> - блок навигации (введён в HTML5).
- <main> - основное содержимое страницы (введён в HTML5).
- <section> - смысловой раздел документа (введён в HTML5).
- <article> - независимая, самодостаточная часть документа (введён в HTML5).
- <aside> - боковая панель, дополнительный контент (введён в HTML5).
Теги для форматирования текста
[править]- <h1> - <h6> - заголовки разных уровней.
- <p> - абзац.
- <br> - перенос строки.
- <hr> - горизонтальная разделительная линия.
- <strong> - важный текст (обычно выделяется жирным).
- <em> - акцентированный текст (обычно выделяется курсивом).
- <b> - жирный текст (без дополнительной смысловой нагрузки).
- <i> - курсивный текст (без дополнительной смысловой нагрузки).
- <span> - универсальный строчный контейнер.
- <div> - универсальный блочный контейнер.
Теги для списков
[править]- <ul> - маркированный список.
- <ol> - нумерованный список.
- <li> - элемент списка.
- <dl> - список определений.
- <dt> - термин в списке определений.
- <dd> - определение термина.
Теги для ссылок и изображений
[править]- <a> - гиперссылка.
- <img> - изображение (одиночный тег).
- <map> - карта-изображение с активными областями.
- <area> - активная область на карте-изображении.
Теги для таблиц
[править]- <table> - контейнер таблицы.
- <caption> - заголовок таблицы.
- <thead> - шапка таблицы.
- <tbody> - тело таблицы.
- <tfoot> - подвал таблицы.
- <tr> - строка таблицы.
- <th> - ячейка-заголовок.
- <td> - ячейка данных.
Теги для форм
[править]- <form> - контейнер формы.
- <input> - поле ввода (одиночный тег).
- <textarea> - многострочное поле ввода.
- <button> - кнопка.
- <select> - выпадающий список.
- <option> - элемент выпадающего списка.
- <label> - подпись к полю ввода.
Мультимедийные теги (HTML5)
[править]- <video> - встраивание видео.
- <audio> - встраивание аудио.
- <canvas> - область для рисования с помощью JavaScript.
- <svg> - встраивание векторной графики.
Отличие от мета-тегов
[править]Важно различать HTML-теги и мета-теги:
- HTML-теги размещаются в разделе <body> и формируют видимое содержимое страницы. Они определяют структуру и представление контента для пользователя.
- Мета-теги размещаются в разделе <head> и содержат служебную информацию о документе: заголовок, описание, кодировку, указания для поисковых роботов. Они не отображаются на странице, но важны для поисковых систем и браузеров.
Например, <title> (заголовок окна браузера) часто называют тегом, но технически это элемент, влияющий и на SEO, и на отображение.
