HTML-тег: разметка гипертекста¶
Тег — элемент разметочного языка, обозначающий структурную единицу документа и задающий браузеру или другому обработчику способ отображения и обработки содержимого. В HTML и XML тег заключается в угловые скобки, например <p>, <div>, <img>. Теги образуют иерархическую структуру документа — дерево элементов, — и являются основой веб-разметки с момента создания первого стандарта HTML в 1990-х годах.
¶История
Термин «тег» (от англ. tag — метка, ярлык) пришёл в информатику из SGML — стандартизированного языка разметки, разработанного в IBM в 1960-х годах для описания документов. В SGML теги использовались для указания на тип элемента документа, а не для его оформления.
Тим Бернерс-Ли, создавая в 1991 году гипертекстовый язык HTML, перенял идею угловых скобок и системы тегов из SGML. Первая спецификация HTML 1.0 была опубликована в 1993 году. Каждый тег в ней имел строго определённое назначение: <h1> — заголовок первого уровня, <p> — абзац, <a> — ссылка.
С развитием веба число тегов росло. HTML 4.01 (1999) включал сотни элементов, включая устаревшие теги оформления <font>, <center>, <b>, которые впоследствии были заменены на стили CSS. Стандарт HTML5 (2014) ввёл семантические теги <header>, <nav>, <article>, <section>, <footer>, призванные описывать структуру страницы, а не её внешний вид.
¶Синтаксис
Типичный тег состоит из имени элемента, заключённого в угловые скобки:
`` <p>Текст абзаца</p> ``
Здесь <p> — открывающий тег, а </p> — закрывающий, отличающийся отсутствием наклонной черты после имени. Между открывающим и закрывающим тегами размещается содержимое элемента. Некоторые теги не требуют закрывающей пары — это так называемые пустые (самозакрывающиеся) элементы, например <img>, <br>, <input>, <meta (организация признана экстремистской, деятельность запрещена в РФ)>. В XHTML и XML они записываются как <img />.
Внутрь открывающего тега могут помещаться атрибуты, задающие свойства элемента:
``html <a href="https://example.ru"; title="Пример">Ссылка</a> ``
Атрибуты состоят из имени и значения, заключённого в кавычки. Значение href указывает адрес ресурса, title — всплывающую подсказку.
¶Классификация
Теги принято делить на несколько групп по назначению:
- Структурные — задают каркас документа:
<html>,<head>,<body>,<div>,<span>. - Текстовые — форматируют или структурируют текст:
<p>,<h1>–<h6>,<strong>,<em>,<blockquote>,<code>. - Семантические — описывают смысловой раздел страницы:
<article>,<aside>,<nav>,<header>,<footer>,<main>. - Мультимедийные — встраивают изображения, аудио и видео:
<img>,<audio>,<video>,<canvas>,<svg>. - Табличные — строят таблицы:
<table>,<tr>,<td>,<th>,<thead>,<tbody>. - Формовые — создают элементы интерактивных форм:
<form>,<input>,<select>,<textarea>,<button>,<label>. - Ссылочные — организуют навигацию:
<a>,<link>,<area>,<map>.
¶Теги в XML и других языках
В XML теги более строги: имена чувствительны к регистру, каждый открывающий тег обязан иметь парный закрывающий, а документ должен быть корректно сбалансирован. На XML основаны XHTML, SVG, RSS, а также язык разметки Markdown, где теги скрыты за более простой синтаксисом.
В языке шаблонов Jinja и аналогичных системах используются собственные теги, например {% for %} и {% endfor %}, которые обрабатываются сервером до отправки HTML в браузер.
¶Роль в веб-разработке
Теги определяют не только внешний вид страницы, но и её доступность: скринридеры для незрячих пользователей ориентируются на семантические теги, а поисковые системы — на структуру заголовков и разделов. Некорректная вложенность тегов (например, закрытие <p> внутри <div>, открытого позже) приводит к тому, что браузер автоматически «чинит» разметку, что может ломать вёрстку.
Современная веб-разработка стремится минимизировать количество тегов, перенося оформление в CSS и поведение — в JavaScript. Теги всё чаще используются как семантические метки, а не как инструмент оформления.
¶Источники
- HTML Living Standard — WHATWG
- HTML 4.01 Specification — W3C
- «HTML5: Up and Running» — Mark Pilgrim
- «JavaScript: The Good Parts» — Douglas Crockford
- Справочник MDN Web Docs по HTML-элементам