Названия тегов. HTML Атрибуты. Создание файла в формате html — HTML-документ

Дата написания: 14.04.2022

Время на чтение: 12 минут

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

пустые элементы — , ,
, , , , , , , , , , , , ;
элементы с неформатированным текстом — , ;
элементы, выводящие неформатированный текст — , ;
элементы из другого пространства имён — MathML и SVG;
обычные элементы — все остальные элементы.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

Полный список HTML-элементов Таблица 1. HTML-элементы Тег Описание

Используется для добавления комментариев.

Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.

Создаёт гипертекстовые ссылки.

Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .

Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.

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

Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.

Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.

Загружает звуковой контент на веб-страницу.

Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.

Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.

Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.

Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.

Выделяет текст как цитату, применяется для описания больших цитат.

Представляет тело документа (содержимое, не относящееся к метаданным документа).

Перенос текста на новую строку.

Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.

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

Добавляет подпись к таблице. Вставляется сразу после тега .

Используется для указания источника цитирования. Отображается курсивом.

Представляет фрагмент программного кода, отображается шрифтом семейства monospace .

Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.

Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.

Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.

Элемент-контейнер для выпадающего списка элемента . Варианты значений помещаются в элементы .

Используется для описания термина из тега .

Помечает текст как удаленный, перечёркивая его.

Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег .

Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.

Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.

Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.

Тег-контейнер, внутри которого находятся термин и его описание.

Используется для задания термина.

Выделяет важные фрагменты текста, отображая их курсивом.

Тег-контейнер для встраивания внешнего интерактивного контента или плагина.

Группирует связанные элементы в форме, рисуя рамку вокруг них.

Заголовок/подпись для элемента .

Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.

Определяет завершающую область (нижний колонтитул) документа или раздела.

Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .

Создают заголовки шести уровней для связанных с ними разделов.

Элемент-контейнер для метаданных HTML-документа, таких как , , , , .

Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.

Горизонтальная линия для тематического разделения параграфов.

Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.

Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.

Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.

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

Создает многофункциональные поля формы, в которые пользователь может вводить данные.

Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.

Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.

Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.

Индикатор измерения в заданном диапазоне.

Раздел документа, содержащий навигационные ссылки по сайту.

Определяет секцию, не поддерживающую сценарий (скрипт).

Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег .

Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.

Контейнер с заголовком для группы элементов .

Определяет вариант/опцию для выбора в раскрывающемся списке , или .

Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

Параграфы в тексте.

Определяет параметры для плагинов, встраиваемых с помощью элемента .

Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.

Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.

Индикатор выполнения задачи любого рода.

Определяет краткую цитату.

Контейнер для Восточно-Азиатских символов и их расшифровки.

Определяет вложенный в него текст как базовый компонент аннотации.

Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.

Отмечает вложенный в него текст как дополнительную аннотацию.

Выводит альтернативный текст в случае если браузер не поддерживает элемент .

Отображает текст, не являющийся актуальным, перечеркнутым.

Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.

Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .

Определяет логическую область (раздел) страницы, обычно с заголовком.

Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .

Отображает текст шрифтом меньшего размера.

Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .

Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.

Расставляет акценты в тексте, выделяя полужирным.

Подключает встраиваемые таблицы стилей.

Задает подстрочное написание символов, например, индекса элемента в химических формулах.

Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.

Задает надстрочное написание символов.

Тег для создания таблицы.
	Определяет тело таблицы.
		Создает ячейку таблицы.
	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
	Создает большие поля для ввода текста.
	Определяет нижний колонтитул таблицы.
	Создает заголовок ячейки таблицы.
	Определяет заголовок таблицы.
	Определяет дату/время.
	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.

Создает строку таблицы.
	Добавляет субтитры для элементов и .
	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
	Создает маркированный список.
	Выделяет переменные из программ, отображая их курсивом.
	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
	Указывает браузеру возможное место разрыва длинной строки.

Таблица-шпаргалка с тегами

Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.

Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.

Как в любом языке, да и в здесь действует правило парето 20/80 (20% дел имеет 80% важности для достижения нужного результата), что означает — достаточно знать всего 20% кодов, чтобы уверенно достигать своих целей в сайтостроении.

HTML не является языком программирования, потому как, это — язык гипертекстовой разметки текста, что говорит само за себя, он позволяет размечать блоки на страницах для верного отображения, делать разметку текста для вебстраниц. Также с его помощью делаются ссылки с одной страницы сайта на другую. Все ссылки в интернете созданы с помощью гипертекстовой части html кода.

— это самый наипростейший язык! Если Вы решили его изучить, то важно понять с самого начала, что в этом нет ни какой сложности. С уверенностью можно сказать, что в школе детям, на уроке информатики намного сложней приходиться.

Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».

Сначала определимся с тем, что такое тег. Тег — это ячейка самого языка html, из которого он в общем то и строится. По тегам браузеры понимают, как отобразить текст, куда вставить картинки. Теги — это и есть сами элементы разметки.

HTML теги для создания каркаса сайта

Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».

Первое, что должно находится в любом html документе при создании страницы блога, это: