HTML элемент - это основная структурная единица веб-страницы, написанная на языке HTML.

Парные и одиночные теги HTML

Синтаксис HTML элементов, состоящих из парных тегов:

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

Примечание: не забывайте в закрывающем теге ставить символ "/ ", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "/ " в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.

Синтаксис HTML элементов, состоящих из одиночных тегов:

Элемент состоит только из открывающего тега.

Элементы, состоящие из одиночных тегов называются пустыми . Всего в HTML 16 одиночных тегов:

Вложенные элементы

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

Следующий пример состоит из трех элементов, два из которых вложенные:

Мой первый абзац

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

Это очень

интересно

Здесь элемент выходит за пределы элемента

Пример с правильной вложенностью:

Это очень интересно

Здесь элемент правильно вложен - он находится полностью в элементе

Пробельные символы

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

Заголовок Мой первый заголовок

Мой первый абзац

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

ЗаголовокМой первый заголовок

Мой первый абзац

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

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 тегами. В языке HTML происходит деление тегов на одинарные (не парные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А у парных дескрипторов есть открывающийся и закрывающийся тег.

Одинарные теги HTML

Одинарные теги не имеют закрывающего тега. Например:
, . Раньше писали так:
, , теперь такой стиль написания одинарных тегов не актуален, поэтому не пишите так. Самые используемые одинарные теги:
- перенос на новую строку, - разделительная линия, - вставка изображения.

Парные теги HTML

Парных тегов намного больше. У парного дескриптора есть открывающий и закрывающий тег. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом. В примере из этой статьи вы видели тег Что такое дескрипторы в HTML? , так вот, это парный тег, содержимым этого тега является текст «Что такое теги в HTML?». Его началом является тег , а концом .

Главная ошибка новичков в написании парных тегов, это путаница во вложенности. Например, вот это правильная запись:

Жирный абзац

. А вот ошибка:

Жирный абзац

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

Как правильно писать парные теги

Что нового в HTML5 в плане тегов?

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

Почему важно научиться пользоваться тегами?

Поисковики Yandex и Google трепетно относятся к верстке HTML документов, проверяя их на валидность. Ищут в них ключевики заключенные в специальные дескрипторы и так далее. Но этот раздел не про это. Это относится к продвижению (SEO).

Как выучить все теги HTML?

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

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

…

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

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

…

и тег

…

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

Классификация тегов

Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня …. В таких случаях используются парные теги: открывающий и закрывающий . Открывающий тег (например, ) создает эффект, а закрывающий ( ) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (/ ) — прямой слеш. Такие теги называют парные .

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

Типы тегов

Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:

теги заголовка документа;
блочные элементы;
строчные элементы;
универсальные элементы;
списки;
таблицы;
фреймы.

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

При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.

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

Давайте посмотрим на правильную структуру тегов содержащих атрибуты:

Сам Себе Вебмастер

Для примера я привел два совершенно разных тега. Первый одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg» . Второй … парный отвечает за создание ссылок, атрибут — href=»сайт» .

Вывод 1 : Атрибуты могут иметь парные и непарные теги.

Вывод 2 : Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.

Картинка для разъяснения:

Рисунок 1. Cтрутура тега html

Давайте посмотрим на примере простой веб-страницы, которую мы рассматривали в уроке

HTML представляет собой обычный текстовый файл с расширением.htm (html). Для создания простейшей страницы на первых порах, когда вы только тренируетесь необходимо лишь блокнот. Откройте блокнот и напишите текст.

Каждый элемент HTML представляет из себя тег, обрамленный скобками. Любой файл, страница html начинается с тега и заканчивается тегом .

Вот этот тег просто указывает браузеру (это программа в которой вы просматриваете интернет страницы) что данный документ является html-документом разметки.

Тег — означает начало html-документа, а — закрывающийся тег, означает конец html документа.

Внутри этих тегов есть еще несколько важных тегов. Сразу за тегом идут теги означающие заголовок страницы и тело страницы.

Моя первая страница HTML

Тег означает название заголовка окна при выводе этой страницы.
Сейчас вы можете создать новый текстовый документ в блокноте, скопировать текст, представленный выше и сохранить его как Страница1.html и запустить в браузере, вы увидите в заголовке окна браузера название страницы из , и пустую страницу, т.к. мы в теле страницы в тегах ничего не выводим.

Итак, текст приведенный выше будет для нас базовым каркасом любой веб-страницы.

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

Непарные теги – у них нет закрывающего тега. Далее мы приведем примеры таких тегов.

— Заголовок html страницы, куда включаются ключевые слова для поисковиков, различные скрипты, и т.д.

— Непосредственно тело html-документа.

Непарный тег.

Примечание: В большинстве случаев сейчас при построении сайтов используют готовые подпрограммы, плагины и т.д. – для более быстрого создания сайтов, но для того, чтобы применять и использовать такие подпрограммы и шаблоны – всё же необходимо минимальное знание данных сессий.

Windows 8