Зачем нужны атрибуты в html. Справочник тегов HTML
Последнее обновление: 08.04.2016
Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки, кирпичики, из которых состоит веб-страница.
Документ HTML5, как и любой документ HTML, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег, которые заключаются в угловые скобки. Например:
Текст элемента div
Здесь определен элемент div , который имеет открывающий тег и закрывающий тег . Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".
Элементы также могут состоять из одного тега, например, элемент
, функция которого - перенос строки.
Текст
элемента div
Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно,
и равнозначно использованию тега без слеша:
Каждый элемент внутри открывающего тега может иметь атрибуты . Например:
Кнопка
Здесь определено два элемента: div и input. Элемент div имеет атрибут style . После знака равно в кавычках пишется значение атрибута: style="color:red;" . В данном случае значение "color:red;" указывает, что цвет текста будет красным.
Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка) и value (определяет текст кнопки)
Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к определенным элементам, как например, type.
Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например, у кнопки можно задать атрибут disabled:
Атрибут disabled указывает, что данный элемент отключен.
Глобальные атрибутыВ HTML5 есть набор глобальных атрибутов , которые применимы к любому элементу HTML5:
accesskey : определяет клавишу для быстрого доступа к элементу
class : задает класс CSS, который будет применяться к элементу
contenteditable : определяет, можно ли редактировать содержимое элемента
contextmenu : определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой мыши
dir : устанавливает направление текста в элементе
draggable : определяет, можно ли перетаскивать элемент
dropzone : определяет, можно ли копировать переносимые данные при переносе на элемент
hidden : скрывает элемент
id : уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов
lang : определяет язык элемента
spellcheck : указывает, будет ли для данного элемента использоваться проверка правописания
style : задает стиль элемента
tabindex : определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB
title : устанавливает дополнительное описание для элемента
translate : определяет, должно ли переводиться содержимое элемента
Но, как правило, из всего этого списка наиболее часто используются три: class , id и style .
Пользовательские атрибутыВ отличие от предыдущей версии языка разметки в HTML5 были добавлены пользовательские атрибуты (custom attributes). Теперь разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом data- . Например:
Здесь определен атрибут data-color , который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует подобного атрибута. Мы его определяем сами и устанавливаем у него любое значение.
Одинарные или двойные кавычкиНередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:
И одинарные, и двойные кавычки в данном случае допустимы, хотя чаще применяются именно двойные кавычки. Однако иногда само значение атрибута может содержать двойные кавычки, и в этом случае все значение лучше поместить в одинарные:
HTML элементы могут иметь атрибуты. Атрибуты предназначены для добавления дополнительной информации об элементе и/или для изменения его стандартного поведения. Атрибуты всегда указываются внутри открывающего тега. В большинстве случаев атрибуты являются необязательными и указываются только при необходимости. Один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя. Синтаксис элемента с атрибутом:
Атрибуты состоят из пары: имя_атрибута="значение" . Имена атрибутов не чувствительны к регистру символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено). Дополнительные ограничения на использование различных символов в значении атрибута зависят от способа записи значения. При указании нескольких атрибутов в одном элементе, они должны быть отделены друг от друга символом пробела. Порядок следования атрибутов не имеет значения.
содержимое
содержимое
Атрибуты могут быть записаны четырьмя различными способами:
Пустой атрибутАтрибуты, значения которых совпадают с именем атрибута называют логическими или пустыми . Для атрибутов логического типа поддерживается синтаксис, при котором явное указание значения атрибута можно опустить, написав только его имя, в этом случае значением будет являться неявно указанная пустая строка:
Само присутствие в элементе логического атрибута представляет собой значение true (истина), а отсутствие этого атрибута - значение false (ложь). Если таковой атрибут присутствует, его значением может быть либо пустая строка, либо значение должно совпадать с именем атрибута.
Ключевые слова и перечисляемые атрибуты
Некоторые атрибуты в качестве значения могут принимать одно ключевое слово из набора допустимых ключевых слов. Такие атрибуты называются перечисляемыми атрибутами. Каждое ключевое слово соответствует определённому состоянию (некоторые ключевые слова соответствуют одному и тому же состоянию, в этом случае они являются синонимами друг для друга).
Если используется перечисляемый атрибут, то его значение должно совпадать с одним из ключевых слов, заданных для него. Отсутствие значения, например, как в логических атрибутах, не допустимо:
Hello!
Hello!
Примечание: пустая строка ("") может быть допустимым ключевым словом.
Hello!
Атрибут со значением без кавычекСинтаксис с опущенными кавычками вокруг значения атрибута подразумевает, что за именем атрибута, после знака "=", будет следовать значение атрибута, которое не должно содержать символов пробела, двойных кавычек ("), апострофов (") и других видов кавычек, символов "=", угловых скобок (< и >), помимо этого, значение не должно являться пустой строкой.
Атрибут со значением в одиночных кавычках (апострофах)
Значение атрибута, взятое в одиночные кавычки, не должно содержать символы апострофов ("), но допускается содержание двойных кавычек (").
Атрибут со значением в двойных кавычках
Значение атрибута, окруженное двойными кавычками, может содержать любые символы, включая апострофы ("), кроме двойных кавычек (").
Примечание: один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя.
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Комментарий. | ||||||||||||||||||||||||||||||||||||||
Определяет тип документа. | ||||||||||||||||||||||||||||||||||||||
Ссылка, гиперссылка, якорь. | ||||||||||||||||||||||||||||||||||||||
Определяет текст как аббревиатуру. | ||||||||||||||||||||||||||||||||||||||
Контактная информация автора или владельца документа. | ||||||||||||||||||||||||||||||||||||||
Определяет область на карте-изображении | ||||||||||||||||||||||||||||||||||||||
Статья | ||||||||||||||||||||||||||||||||||||||
Контент в стороне (содержимое не является основным на странице по смыслу) | ||||||||||||||||||||||||||||||||||||||
Позволяет вставить воспроизводимый аудио файл. | ||||||||||||||||||||||||||||||||||||||
Полужирный текст. | ||||||||||||||||||||||||||||||||||||||
Задает базовый URL или аттрибут target для относительных ссылок в документе. | ||||||||||||||||||||||||||||||||||||||
Область, где написание текста может имееть другое направления. | ||||||||||||||||||||||||||||||||||||||
Устанавливает направление написания текста. В отличии от направление указывается физическое направление | ||||||||||||||||||||||||||||||||||||||
Цитата. | ||||||||||||||||||||||||||||||||||||||
Указывает область body документа. | ||||||||||||||||||||||||||||||||||||||
Перенос строки. | ||||||||||||||||||||||||||||||||||||||
Кликабельная кнопка | ||||||||||||||||||||||||||||||||||||||
Используется для рисовании графики с помощью скриптов | ||||||||||||||||||||||||||||||||||||||
Подпись таблицы. | ||||||||||||||||||||||||||||||||||||||
Сноска на название материала. | ||||||||||||||||||||||||||||||||||||||
Используется для вставки компьютерного кода в текстовом виде. | ||||||||||||||||||||||||||||||||||||||
Задает характеристики колонок в таблице. | ||||||||||||||||||||||||||||||||||||||
Определяет группу из одной или более колонок таблицы для форматирования. | ||||||||||||||||||||||||||||||||||||||
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле | ||||||||||||||||||||||||||||||||||||||
Определяет описание термина из тега в списке терминов | ||||||||||||||||||||||||||||||||||||||
Текст, который удален в новой версии документа. | ||||||||||||||||||||||||||||||||||||||
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть | ||||||||||||||||||||||||||||||||||||||
Указывает, что содержимое является термином. | ||||||||||||||||||||||||||||||||||||||
Определяет диалоговое окно или интерактивный элемент | ||||||||||||||||||||||||||||||||||||||
Блочный элемент - один из основных элементов верстки. | ||||||||||||||||||||||||||||||||||||||
Определяет список определений | ||||||||||||||||||||||||||||||||||||||
Название термина в списке определений | ||||||||||||||||||||||||||||||||||||||
выделенный по смыслу текст (обычно, текст выделенный курсивом). | ||||||||||||||||||||||||||||||||||||||
Контейнер для внешнего приложения | ||||||||||||||||||||||||||||||||||||||
Группа связанных элементов в форме | ||||||||||||||||||||||||||||||||||||||
Заголовок для элемента | ||||||||||||||||||||||||||||||||||||||
Определяет автономную группу из нескольких элементов (например картинка с подписью) | ||||||||||||||||||||||||||||||||||||||
Нижний колонтитул | ||||||||||||||||||||||||||||||||||||||
Определяет форму пользовательского ввода | ||||||||||||||||||||||||||||||||||||||
- | Заголовки HTML разного уровня: , , , , , . | |||||||||||||||||||||||||||||||||||||
Указывает область head документа. | ||||||||||||||||||||||||||||||||||||||
Блок заголовка | ||||||||||||||||||||||||||||||||||||||
Горизонтальная линия - тематический разделитель. | ||||||||||||||||||||||||||||||||||||||
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. | ||||||||||||||||||||||||||||||||||||||
Выделяет текст курсивом. | ||||||||||||||||||||||||||||||||||||||
Определяет встроенный фрейм | ||||||||||||||||||||||||||||||||||||||
Изображение, картинка. | ||||||||||||||||||||||||||||||||||||||
Поле для ввода | ||||||||||||||||||||||||||||||||||||||
Текст, который был добавлен в новой версии документа. | ||||||||||||||||||||||||||||||||||||||
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. | ||||||||||||||||||||||||||||||||||||||
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. | ||||||||||||||||||||||||||||||||||||||
Заголовок элементов | ||||||||||||||||||||||||||||||||||||||
Элемент списка | ||||||||||||||||||||||||||||||||||||||
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) | ||||||||||||||||||||||||||||||||||||||
Основной контент | ||||||||||||||||||||||||||||||||||||||
Контейнер для . Определяет пользовательскую карту на изображении | ||||||||||||||||||||||||||||||||||||||
Выделенный текст (обычно с помощью подсветки фона). | ||||||||||||||||||||||||||||||||||||||
Контейнер для списка пунктов меню | ||||||||||||||||||||||||||||||||||||||
Определяет элементы, которые пользователь может вызвать из контекстного меню | ||||||||||||||||||||||||||||||||||||||
Используется для определения мета-данных документа. | ||||||||||||||||||||||||||||||||||||||
Измеритель значений в заданном диапазоне | ||||||||||||||||||||||||||||||||||||||
Контейнер для навигационных элементов | ||||||||||||||||||||||||||||||||||||||
Альтернативный контент для пользователей, отключивших скрипты | ||||||||||||||||||||||||||||||||||||||
Определяет встроенный объект | ||||||||||||||||||||||||||||||||||||||
Определяет нумерованный список | ||||||||||||||||||||||||||||||||||||||
Определяет группу связанных вариантов в выпадающем списке. Дает название группу | ||||||||||||||||||||||||||||||||||||||
Параметр (вариант выбора) в выпадающем списке | ||||||||||||||||||||||||||||||||||||||
Результат вычислений | ||||||||||||||||||||||||||||||||||||||
|
Абзац. | |||||||||||||||||||||||||||||||||||||
Задает параметры для встроенных объектов | ||||||||||||||||||||||||||||||||||||||
Контейнер для нескольких изображений | ||||||||||||||||||||||||||||||||||||||
Предварительно отформатированный текст. | ||||||||||||||||||||||||||||||||||||||
Индикатор выполнения (прогресса) | ||||||||||||||||||||||||||||||||||||||
Цитата в тексте. | ||||||||||||||||||||||||||||||||||||||
Альтернативный текст, если браузер не поддерживает тег . | ||||||||||||||||||||||||||||||||||||||
Аннотация к содержимому тега . | ||||||||||||||||||||||||||||||||||||||
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). | ||||||||||||||||||||||||||||||||||||||
Перечеркнутый текст. | ||||||||||||||||||||||||||||||||||||||
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). | ||||||||||||||||||||||||||||||||||||||
Определяет скрипт или подключение скрипта из внешнего ресурса. | ||||||||||||||||||||||||||||||||||||||
Раздел | ||||||||||||||||||||||||||||||||||||||
Определяет выпадающий список | ||||||||||||||||||||||||||||||||||||||
Текст шрифтом меньшего размера. | ||||||||||||||||||||||||||||||||||||||
Определяет ресурс для тегов , и . | ||||||||||||||||||||||||||||||||||||||
Строчный элемент. | ||||||||||||||||||||||||||||||||||||||
Текст, выделенный по значению. Обычно отображается полужирным. | ||||||||||||||||||||||||||||||||||||||
Определяет контейнер для определения стилей документа | ||||||||||||||||||||||||||||||||||||||
Отображает текст в виде нижнего индекса. | ||||||||||||||||||||||||||||||||||||||
Заголовок внутри тега | ||||||||||||||||||||||||||||||||||||||
Отображает текст в виде верхнего индекса. | ||||||||||||||||||||||||||||||||||||||
|