Атрибуты HTML-тегов. Что такое HTML-тэги и атрибуты, валидатор (validator) W3C. Структура и правила написания тегов

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

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

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

• пустые элементы — , ,
  , , , , , ,
  Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

  Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов.

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

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

  Список тегов HTML

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

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

  Тег Краткое описание

  	Комментарий.
  	Определяет тип документа.
  	Ссылка, гиперссылка, якорь.
  	Определяет текст как аббревиатуру.
  	Контактная информация автора или владельца документа.
  	Определяет область на карте-изображении
  	Статья
  	Контент в стороне (содержимое не является основным на странице по смыслу)
  	Позволяет вставить воспроизводимый аудио файл.
  	Полужирный текст.
  	Задает базовый URL или аттрибут target для относительных ссылок в документе.
  	Область, где написание текста может имееть другое направления.
  	Устанавливает направление написания текста. В отличии от направление указывается физическое направление
  	Цитата.
  	Указывает область body документа.
  	Перенос строки.
  	Кликабельная кнопка
  	Используется для рисовании графики с помощью скриптов
  	Подпись таблицы.
  	Сноска на название материала.
  	Используется для вставки компьютерного кода в текстовом виде.
  	Задает характеристики колонок в таблице.
  	Определяет группу из одной или более колонок таблицы для форматирования.
  	Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
  	Определяет описание термина из тега в списке терминов
  	Текст, который удален в новой версии документа.
  	Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
  	Указывает, что содержимое является термином.
  	Определяет диалоговое окно или интерактивный элемент
  	Блочный элемент - один из основных элементов верстки.
  	Определяет список определений
  	Название термина в списке определений
  	выделенный по смыслу текст (обычно, текст выделенный курсивом).
  	Контейнер для внешнего приложения
  	Группа связанных элементов в форме
  	Заголовок для элемента
  	Определяет автономную группу из нескольких элементов (например картинка с подписью)
  	Нижний колонтитул
  	Определяет форму пользовательского ввода
  -	Заголовки HTML разного уровня: , , , , , .
  	Указывает область head документа.
  	Блок заголовка
  	Горизонтальная линия - тематический разделитель.
  	Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
  	Выделяет текст курсивом.
  	Определяет встроенный фрейм
  	Изображение, картинка.
  	Поле для ввода
  	Текст, который был добавлен в новой версии документа.
  	Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
  	Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
  	Заголовок элементов
  	Элемент списка
  	Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
  	Основной контент
  	Контейнер для . Определяет пользовательскую карту на изображении
  	Выделенный текст (обычно с помощью подсветки фона).
  	Контейнер для списка пунктов меню
  	Определяет элементы, которые пользователь может вызвать из контекстного меню
  	Используется для определения мета-данных документа.
  	Измеритель значений в заданном диапазоне
  	Контейнер для навигационных элементов
  	Альтернативный контент для пользователей, отключивших скрипты
  	Определяет встроенный объект
  	Определяет нумерованный список
  	Определяет группу связанных вариантов в выпадающем списке. Дает название группу
  	Параметр (вариант выбора) в выпадающем списке
  	Результат вычислений
  	Абзац.
  	Задает параметры для встроенных объектов
  	Контейнер для нескольких изображений
  	Предварительно отформатированный текст.
  	Индикатор выполнения (прогресса)
  	Цитата в тексте.
  	Альтернативный текст, если браузер не поддерживает тег .
  	Аннотация к содержимому тега .
  	Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
  	Перечеркнутый текст.
  	Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
  	Определяет скрипт или подключение скрипта из внешнего ресурса.
  	Раздел
  	Определяет выпадающий список
  	Текст шрифтом меньшего размера.
  	Определяет ресурс для тегов , и .
  	Строчный элемент.
  	Текст, выделенный по значению. Обычно отображается полужирным.
  	Определяет контейнер для определения стилей документа
  	Отображает текст в виде нижнего индекса.
  	Заголовок внутри тега
  	Отображает текст в виде верхнего индекса.
  Определяет таблицу. Определяет область контента в таблице. Ячейка в таблице . Многострочное поле для ввода Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее Место, где допускается перенос строки. Устаревшие теги HTML Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены. Тег Краткое описание Акроним. Используйте тег вместо него Встроенный апплет. Используйте или вместо него. Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него Текст большего размера. Используйте вместо него Отцентрованный текст. Используйте вместо него Список директорий. Используйте вместо него Определяет цвет, размер и семейство шрифта. Используйте вместо него Фрейм внутри . Используйте вместо него Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов Альтернативный текст, если фреймы не поддерживаются Перечеркнутый текст. Используйте или вместо него Моноширный текст. Используйте вместо него Подчеркнутый текст. Используйте вместо него HTML элементы могут иметь атрибуты. Атрибуты предназначены для добавления дополнительной информации об элементе и/или для изменения его стандартного поведения. Атрибуты всегда указываются внутри открывающего тега. В большинстве случаев атрибуты являются необязательными и указываются только при необходимости. Один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя. Синтаксис элемента с атрибутом: Атрибуты состоят из пары: имя_атрибута="значение" . Имена атрибутов не чувствительны к регистру символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено). Дополнительные ограничения на использование различных символов в значении атрибута зависят от способа записи значения. При указании нескольких атрибутов в одном элементе, они должны быть отделены друг от друга символом пробела. Порядок следования атрибутов не имеет значения. содержимое содержимое Атрибуты могут быть записаны четырьмя различными способами: Пустой атрибут Атрибуты, значения которых совпадают с именем атрибута называют логическими или пустыми . Для атрибутов логического типа поддерживается синтаксис, при котором явное указание значения атрибута можно опустить, написав только его имя, в этом случае значением будет являться неявно указанная пустая строка: Само присутствие в элементе логического атрибута представляет собой значение true (истина), а отсутствие этого атрибута - значение false (ложь). Если таковой атрибут присутствует, его значением может быть либо пустая строка, либо значение должно совпадать с именем атрибута. Ключевые слова и перечисляемые атрибуты Некоторые атрибуты в качестве значения могут принимать одно ключевое слово из набора допустимых ключевых слов. Такие атрибуты называются перечисляемыми атрибутами. Каждое ключевое слово соответствует определённому состоянию (некоторые ключевые слова соответствуют одному и тому же состоянию, в этом случае они являются синонимами друг для друга). Если используется перечисляемый атрибут, то его значение должно совпадать с одним из ключевых слов, заданных для него. Отсутствие значения, например, как в логических атрибутах, не допустимо: Hello! Hello! Примечание: пустая строка ("") может быть допустимым ключевым словом. Hello! Атрибут со значением без кавычек Синтаксис с опущенными кавычками вокруг значения атрибута подразумевает, что за именем атрибута, после знака "=", будет следовать значение атрибута, которое не должно содержать символов пробела, двойных кавычек ("), апострофов (") и других видов кавычек, символов "=", угловых скобок (< и >), помимо этого, значение не должно являться пустой строкой. Атрибут со значением в одиночных кавычках (апострофах) Значение атрибута, взятое в одиночные кавычки, не должно содержать символы апострофов ("), но допускается содержание двойных кавычек ("). Атрибут со значением в двойных кавычках Значение атрибута, окруженное двойными кавычками, может содержать любые символы, включая апострофы ("), кроме двойных кавычек ("). Примечание: один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя. Атрибуты задаются в начальном тэге элемента и состоят из имени и значения , которые отделяются друг от друга знаком равно (=). Например в атрибуте href="http://www.сайт/" href является именем, а http://www.сайт/ значением. HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе. Атрибут title Рассмотрим следующий пример: В этом примере используется тег , который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента. Имя атрибута title . В этом примере, мы дали ему значение Язык гипертекстовой разметки . Атрибут title может (необязательно) использоваться в любом HTML - элементе, чтобы предоставить дополнительную информацию о содержимом элемента. При использовании атрибута title, большинство браузеров будет отображать его значение как "всплывающую подсказку", когда пользователь наводит указатель мыши на элемент. Атрибут alt Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега . Атрибут alt добавляется внутрь тera и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению. В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение. Атрибут href Вы можете добавить сразу несколько атрибутов к элементу. Вот пример сложения двух атрибутов к элементу (который используется для создания гиперссылки на другую веб - страницу). Пример HTML: Попробуй сам HTML Tutorials Атрибут href определяет расположение веб - страницы, на которую ведет ссылка. Мы также используем атрибут title для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки. Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (" ") или одинарные кавычки(" "). Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы: Одинарные или двойные кавычки? Чаще всего в HTML используются "двойные кавычки", но вы можете использовать и "одинарные". Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки: HTML Можно наоборот: HTML Общие атрибуты Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов: Атрибут Значение Описание align right, left, center Горизонтальное выравнивание тегов valign top, middle, bottom Вертикальное вырвнивание тегов внутри HTML-элемента. background URL Расположение фонового изображения id Уникальное имя Уникальное имя для использования с каскадными таблицами стилей. class правило класса или стиль класса Классифицирует элемент для использования с каскадными таблицами стилей. width Числовое значение Определяет ширину таблиц, изображений или ячеек таблицы. height Числовое значение Определяет высотуу таблиц, изображений или ячеек таблицы. title Текст подсказки Текст, отображаемый во всплывающей подсказке. Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты. Задачи Первое итоговое задание Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках. Пришло время повторить изученное и выполнить несложные задания: Всплывающая подсказка Реши сам » Сделайте всплывающую подсказку с текстом "Хороший сайт", который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1. Всплывающая подсказка Title="Хороший сайт">сайт - сайт для разработчиков. Размеры изображения Реши сам » Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту. Размеры изображения Размеры изображения Любой код содержит в себе команды управления, посредством которых выполняются определенные задачи. В каждом языке они называются по-разному, но суть у них одна и та же. Чтобы не запутаться в терминах и говорить на одном языке, давайте разберемся как называются и как используются команды HTML. В пояснениях я буду приводить ссылки на спецификацию, а также на её перевод , о котором упоминал на странице HTML это.. . Упоминание о переводе А. Пирамидина имеется в официальной спецификации HTML, так что перевод можно считать качественным. Немного по-другому обстоят дела с тегами, не трбующими обязательной закрывающей части. К их числу можно отнести теги, создающие элементы таблицы: . Ряд таблицы автоматически закроет тег тела таблицы . А вот закрывать тег таблицы надо обязательно, в противном случае всё содержимое страницы, следующее за таблицей, станет её частью и попадёт под влияние табличных настроек. Запрещается закрывать теги, не производящие действий над гипертекстом - , , и другие. Требования для каждого тега указаны в спецификации. Ниже мы рассмотрим - где именно что указано. Повторим. В языке HTML существует два вида тегов: Строковые (inline). Их ещё называют инлайновые. Блоковые (block). Конечный (/закрывающий) тег может быть: Закрывающий тег () обязателен. Закрывающий тег () не обязателен. Закрывающий тег () запрещён. атрибуты у тегов могут быть: Обязательные. Необязательные. Эту информацию по каждому конкретному тегу можно получить в спецификации. Как ею пользоваться написано ниже. И ещё один важный момент касательно использования различных символов в HTML. При html-верстке иногда приходится использовать символы, которые могут трактоваться двояко. Например, употребление символов "" будет расценено обозревателями как часть тега, то есть как служебный символ, а это не всегда так. Поэтому проблемные символы кодируются. Называются такие закодированные символы мнемониками. Список мнемоник можно посмотреть в спецификации . Вложенность тегов Теги могут быть вложенными друг в друга как матрёшки. При этом они делятся на родительские и дочерние элементы. Поясню на примере: Элемент подчёркнутого текста является родительским элементом для элемента зачёркнутого текста с наследованием. Дочерние элементы наследуют характеристики родительских. Таким образом зачёркнутый текст будет также и подчёркнутым. Главное помнить, что обе части тега (открывающая и закрывающая) должны быть вложены в один и тот же родительский элемент, опять же по аналогии с матрёшкой. Использование спецификации Официальной на данный момент (март 2012) является версия HTML 4.01, версия HTML 5.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему HTML 5. Теперь о том, как пользоваться спецификацией. Допустим, нас интересуют вышеупомянутые таблицы. Открываем краткое содержание и выбираем соответствующий пункт (№11) - Таблицы. Открываем спецификацию, меню разделов: Тут можно получить информацию по каждому атрибуту. Требования закрывающего тега (). В данном случае начальный и конечный теги обязательны. Названия атрибутов данного тега. Список значений каждого атрибута. Статус атрибута (Актуальный/Устаревший/Запрещённый). Тип данных (значений) атрибута. Список общих атрибутов, которые используются с любыми тегами. Важное замечание. На скриншоте выше атрибут align имеет статус Deprecated (не рекомендован). Такой атрибут не будет работать (и будет ошибкой) в DOCTYPE Strict . Так что использовать deprecated-элементы я крайне не рекомендую. Статус любого элемента можно посмотреть в общем списке. Уточнения по тегам: Название тега. Статус открывающего тега в документе html: O - optional (не обязателен) Статус закрывающего тега в документе html: O - optional (не обязателен) F - forbidden (запрещён) Предполагается ли содержимое (гипертекст): E - Empty (без содержимого) Статус тега (D, L и F): D - deprecated (не рекомендован). L - loose (допускается в переходной спецификации Transitional). F - Frameset (допускается в спецификации Frameset). Есть вопросы? Имя Email * Сообщение * Отправить Сообщить об опечатке Текст, который будет отправлен нашим редакторам: Ваш комментарий (необязательно): Отправить Отмена