Справочник html тегов html – CSS справочник — свойства по алфавиту и с описанием по разделам

HTML справочник | Теги HTML

HTML справочник - это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).

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

Вставляемый контент

Интерактивные элементы

Комментарии

Корневой элемент

Метаданные документа

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

Разделы документа

Списки

Ссылки

Сценарии

Таблицы

Текст

Формы

Теги html

Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».

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

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

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

Справочник HTML | HTML теги

Все Блочные Строчные Новые HTML5 Нестандартные Не поддерживаемые в HTML5

Тег Описание
!, A
<!--...--> Добавляет комментарий в код документа
<!DOCTYPE>  Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа)
<a> Предназначен для создания ссылок
<abbr> Указывает, что текст является аббревиатурой
<acronym> Указывает, что текст является акронимом
<address> Предназначен для хранения контактной информации автора
<applet> Используется для вставки на страницу апплетов — небольших программ на языке Java
<area> Определяет активные области изображения, которые являются ссылками
<article> Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др.
<aside> Представляет собой раздел, который имеет косвенное отношение к содержимому страницы
<audio> Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице
B
<b> Устанавливает жирное начертание шрифта
<base> Определяет адрес или способ открытия всех ссылок странице по умолчанию
<basefont> Задаёт шрифт, размер и цвет текста по умолчанию
<bdi> Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста
<bdo> Устанавливает направление вывода текста: слева направо или справа налево
<bgsound> Определяет музыкальный файл, который будет проигрываться на веб-странице
<big> Увеличивает размер шрифта на единицу по сравнению с обычным текстом
<blockquote> Предназначен для выделения длинных цитат внутри документа
<body> Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера
<blink> Устанавливает мигание текста
<br> Устанавливает перевод строки в том месте, где он находится
<button> Создаёт на веб-странице кнопку
C
<canvas> Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения
<caption> Создаёт заголовок к таблице
<center>
<cite> Представляет название произведения (книги, статьи, поэмы, песни и др.)
<code> Предназначен для отображения текста программного код
<col> Задаёт ширину и другие характеристики одной или нескольких колонок таблицы
<colgroup> Группирует колонки таблицы для изменения их параметров
<command> Создаёт команду в виде переключателя, флажка или обычной кнопки
<comment> Добавляет комментарий в код документа
D
<data> Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем
<datalist> Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле
<dd> Указывает термин в списке описаний
<del> Используется для выделения текста, который был удалён в новой версии документа
<details> спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя
<dfn> Выделяет термин в документе
<dialog> Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт
<dir> Создаёт список, содержащий названия директорий
<div> Универсальный блочный элемент
<dl> Создаёт список описаний
<dt> Определяет термин в списке описаний
E, F
<em> Предназначен для акцентирования текста
<embed> Используется для загрузки и отображения объектов
<fieldset> Группирует элементы формы
<figcaption> Содержит описание для элемента <figure>
<figure> Используется для группирования любых элементов, например, изображений и подписей к ним
<font> Изменяет характеристики шрифта, такие как размер, цвет и гарнитура
<footer> Определяет «подвал» сайта или раздела
<form> Устанавливает форму на веб-странице
<frame> Определяет свойства отдельного фрейма, на которые делится окно браузера
<frameset> Задаёт структуру фреймов на веб-странице
H
<h2> Заголовок первого уровня
<h3>
Заголовок второго уровня
<h4> Заголовок третьего уровня
<h5> Заголовок четветого уровня
<h5> Заголовок пятого уровня
<h6> Заголовок шестого уровня
<head> Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными
<header> Определяет «шапку» сайта или раздела
<hgroup> Используется для группирования заголовков веб-страницы или раздела
<hr> Рисует горизонтальную линию
<html> Является контейнером, который заключает в себе всё содержимое веб-страницы
I
<i> Устанавливает курсивное начертание шрифта
<iframe> Создаёт встроенный фрейм на странице
<img> Отображает на веб-странице изображение
<input> Позволяет создавать разные элементы интерфейса
<ins> Предназначен для выделения текста, который был добавлен в новую версию документа
K, L
<kbd> Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш
<keygen> Используется для генерации пары ключей — закрытого и открытого (для форм)
<label> Устанавливает связь между определённой меткой и элементом формы
<legend> Создаёт заголовок группы элементов формы
<li> Определяет отдельный пункт списка
<link> Устанавливает связь с внешним документом вроде файла со стилями
M
<main> Элемент main предназначен для основного содержимого документа
<map> Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений
<marquee> Создаёт бегущую строку на странице
<mark> Помечает текст как выделенный
<menu> Отображает список меню
<menuitem> Задаёт команду, которую пользователь может вызывать через контекстное меню
<meta> Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем
<meter> Используется для вывода значения в некотором известном диапазоне
N
<nav> Группирует ссылки навигации по сайту
<nobr> Уведомляет браузер отображать текст без переносов
<noembed> Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами
<noindex> Запрещает поисковой системе Яндекс индексировать текст
<noframes> Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать
<noscript> Показывает своё содержимое, если браузер не поддерживает работу со скриптами
O
<object> Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает
<ol> Устанавливает нумерованный (упорядоченный) список
<optgroup> Объединяет элементы <option> в одну группу
<option> Определяет отдельные пункты списка, создаваемого с помощью <select>
<output> Определяет область для вывода, преимущественно с помощью скриптов
P
<p> Определяет текстовый абзац
<param> Передаёт значения параметров Java-апплетам или объектам веб-страницы
<picture> Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>
<plaintext> Отображает содержимое контейнера «как есть» со всеми тегами
<pre> Определяет блок предварительно форматированного текста
<progress> Используется для отображения прогресса завершённости задачи
Q, R
<q> Используется для выделения в тексте цитат
<rp> Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby>
<rt> Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>
<rtc> В основном применяется в качестве описательной части или аннотации для иероглифов
<ruby> Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста
S
<s> Используется для содержимого, которое уже не является точным или актуальным
<samp> Используется для отображения текста, который является результатом вывода компьютерной программы
<script> Предназначен для описания скриптов
<section> Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
<select> Создаёт раскрывающийся список
<small> Используется для сносок и комментариев, написанных обычно мелким текстом
<source> Вставляет медийный файл для элементов <audio>, <video> и <picture>
<spacer> Создаёт пустое пространство по вертикали или горизонтали
<span> Универсальный строчный элемент
<strike> Отображает текст как перечёркнутый
<strong> Выделяет важный текст
<style> Определяет стили элементов веб-страницы
<sub> Отображает шрифт в виде нижнего индекса
<summary> Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации
<sup> Отображает шрифт в виде верхнего индекса
T
<table> Создаёт таблицу
<tbody> Предназначен для хранения одной или нескольких строк таблицы
<td> Предназначен для создания одной ячейки таблицы
<template> Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты
<textarea> Создаёт поле для многострочного текста
<tfoot> Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы
<th> Создаёт одну ячейку таблицы, которая обозначается как заголовочная
<thead> Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы
<time> Помечает текст внутри элемента как дату, время или оба значения
<title> Определяет заголовок документа
<tr> Служит контейнером для создания строки таблицы
<track> Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>)
<tt> Отображает текст моноширинным шрифтом
U, V, W, X
<u> Используется для разметки текста, который должен отличаться стилистически от обычного текста
<ul> Устанавливает маркированный (неупорядоченный) список
<var> Используется для выделения переменных из компьютерных программ
<video> Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице
<wbr> Указывает браузеру место, где допускается делать перенос строки в тексте
<xmp> Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины

HTML Основные теги



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

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

Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).

Например, тег <em> предназначен для акцентирования текста, браузеры отображают такой текст курсивным начертанием. Когда браузер обнаруживает этот тег, он переключается на форматирование курсивным шрифтом текста, следующего за тегом.

Рассмотрим пример:

Этот текст обычный. <em> Этот текст курсивный. 

Тег <em> называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.

Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом — </em>.

Рассмотрим пример:

Этот текст обычный. <em> Внимание! Курсив.  </em> Это снова обычный шрифт.  

Как вы успели заметить, браузер последовательно анализирует HTML – документ в поисках команд (тегов) и применяет или отключает разные параметры форматирования текста. Браузер отформатированный текст (все, что не является тегом) отображает в своем окне.

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

Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.

Заголовки

Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от <h2> для наиболее важных объявлений, до <h6> для наименее важных.

Вот они:

Пример HTML:

Попробуй сам
<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

HTML абзацы

С помощью HTML тэга <p> Вы можете определить абзац.

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

Пример HTML:

Попробуй сам
<p>Это абзац</p>
<p>Это другой абзац</p>
<p>Это третий абзац</p>

HTML ссылки

С помощью HTML тэга <a> создаются ссылки.

Ссылки используются для связывания HTML документов друг с другом. Нажав на ссылку пользователь будет перемещен на другой HTML документ, url которого указан в атрибуте href.

Атрибут href задает адрес документа, на который следует перейти.

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

Вставка изображений

С помощью HTML тэга <img> Вы можете вставить в HTML документ произвольное изображение.

Ширина и высота картинки может задаваться с помощью атрибутов width и height.

Пример HTML:

Попробуй сам

<img src="images/orange.jpg" alt="Апельсин">
Обратите внимание: HTML-атрибуты будут подробно рассмотрены далее в данном учебнике.




Please enable JavaScript to view the comments powered by Disqus.

HTML Справочник тегов по алфавиту

= Новые теги в HTML5.

Теги Описание
<!--...--> Определяет комментарий
<!DOCTYPE>  Определяет тип документа
<a> Определяет гиперссылку
<abbr> Определяет аббревиатуру или акроним
<acronym> Не поддерживается в HTML5. Использовать <abbr>.
Определяет акроним
<address> Определяет контактную информацию автора/владельца документа
<applet> Не поддерживается в HTML5. Использовать <embed> или <object>
Определяет встроенное приложение
<area> Определяет область внутри изображения-карты
<article> Определяет статью
<aside> Определяет содержимое в стороне помимо содержимого страницы
<audio> Определяет звуковое содержимое
<b> Определяет bold (полужирный) текст
<base> Задает базовый URL/цель для всех относительных URL-адресов в документе
<basefont> Не поддерживается в HTML5. Использовать в CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за ее пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Использовать в CSS.
Определяет большой текст
<blockquote> Определяет раздел, который цитируется из другого источника
<body> Определяет тело документа
<br> Определяет разрыв одной строки
<button> Определяет кликабельную кнопку
<canvas> Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption> Определяет подпись в таблице
<center> Не поддерживается в HTML5. Используйте в CSS.
Определяет центрированный текст
<cite> Определяет название работы
<code> Определяет часть компьютерного кода
<col> Задает свойства столбцов для каждого столбца в элементе <colgroup>
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
<data> Задает данные содержимого с машиночитаемым переводом
<datalist> Задает список предопределенных параметров элементов управления вводом
<dd> Определяет описание/значение термина в списке описаний
<del> Определяет текст, который был удален из документа
<details> Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
<dfn> Представляет определяющий экземпляр термина
<dialog> Определение диалогового окна или окна
<dir> Не поддерживается в HTML5. Используйте <ul>.
Определяет список директории
<div> Определяет раздел в документе
<dl> Определяет список описаний
<doctype> Объявляет декларацию <!DOCTYPE>, документа HTML
<dt> Определяет термин/имя в списке описаний
<em> Определяет выделенный текст
<embed> Определяет контейнер для внешнего приложения (non-HTML)
<fieldset> Группы связанных элементов в форме
<figcaption> Определяет подпись к фотографии для элемента <figure>
<figure> Задает автономное содержимое
<font> Не поддерживается в HTML5. Используйте в CSS.
Определяет шрифт, цвет и размер текста
<footer> Определяет нижний колонтитул для документа или раздела
<form> Определяет форму HTML для пользовательского ввода
<frame> Не поддерживается в HTML5.
Defines a window (a frame) in a frameset
<frameset> Не поддерживается в HTML5.
Defines a set of frames
<h2> и <h6> Определяет заголовки HTML
<head> Определяет сведения о документе
<header> Определяет верхний колонтитул для документа или раздела
<hr> Определяет тематическое изменение в содержании
<html> Определяет корень документа HTML
<i> Определяет часть текста альтернативным голосом или настроением
<iframe> Определяет встроенный фрейм
<img> Определяет изображения
<input> Определяет входной контроль
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<label> Определяет лэйбл для элемента <input>
<legend> Определяет подпись к фотографии для элемента <fieldset>
<li> Определяет элемент списка
<link> Определяет связь между документом и внешним ресурсом (чаще всего используется для ссылки на таблицы стилей)
<main> Задает основное содержимое документа
<map> Определяет изображение-карту на стороне клиента
<mark> Определяет отмеченный/выделенный текст
<menu> Определяет список/меню команд
<menuitem> Определяет команду/меню, которое пользователь может вызвать из всплывающего меню
<meta> Определяет метаданные о документе HTML
<meter> Определение скалярного измерения в известном диапазоне (измеритель)
<nav> Определяет ссылки навигации
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, которые не поддерживают фреймы
<noscript> Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object> Определяет внедренный объект
<ol> Определяет упорядоченный список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<output> Определяет результат расчета
<p> Определяет параграф
<param> Определяет параметр для объекта
<picture> Определяет контейнер для нескольких ресурсов образа
<pre> Определяет форматированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет короткую цитату
<rp> Определяет, что показывать в браузерах, не поддерживающих аннотации ruby
<rt> Определение объяснения/произношения символов (для Восточно-азиатской типографии)
<ruby> Определение аннотации ruby (для Восточно-азиатской типографии)
<s> Определяет текст, который уже не исправить
<samp> Определяет пример вывода из компьютерной программы
<script> Определяет сценарий на стороне клиента
<section> Определяет раздел в документе
<select> Определяет раскрывающийся список
<small> Определяет маленький текст
<source> Определяет несколько ресурсов мультимедиа для элементов мультимедиа (<video> и <audio>)
<span> Определение раздела в документе
<strike> Не поддерживается в HTML5. Используйте <del> или <s>.
Определяет зачеркнутый текст
<strong> Определяет важный текст
<style> Определяет сведения о стиле для документа
<sub> Определяет подстрочный текст
<summary> Определяет видимый Заголовок для элемента <details>
<sup> Определяет надстрочный текст
<svg> Определяет контейнер для графики SVG
<table> Определяет таблицу
<tbody> Группирует содержимое тела в таблице
<td> Определяет ячейку в таблице
<template> Определение шаблона
<textarea> Определяет многострочный элемент управления вводом text area (область текста)
<tfoot> Группирует содержимое нижнего колонтитула в таблице
<th> Определяет ячейку заголовка в таблице
<thead> Группирует содержимое заголовка в таблице
<time> Определяет дату/время
<title> Определяет заголовок документа
<tr> Определяет строку в таблице
<track> Определяет текстовые дорожки для элементов мультимедиа (<video>и <audio>)
<tt> Не поддерживается в HTML5. Используйте в CSS.
Определяет текст типа teletype (телетайпа)
<u> Определяет текст, который должен стилистически отличаться от обычного текста
<ul> Определяет неупорядоченный список
<var> Определяет переменную
<video> Определение видео или фильм
<wbr> Определяет возможный разрыв линии

HTML Справочник тегов по категории

= новый в HTML5.

Тег Описание
<!DOCTYPE>  Определяет тип документа
<html> Определяет документ в HTML
<head> Определяет информацию о документе
<title> Определяет название для документа
<body> Определяет тело документа
<h2> до <h6> Определяет заголовки
<p> Определяет параграф
<br> Вставляет разрыв строки
<hr> Определяет тематическое изменение в содержании
<!--...--> Определяет комментарий
Тег Описание
<acronym> Не поддерживается в HTML5. Лучше используйте <abbr>.
Определяет акроним
<abbr> Определяет аббревиатуру или акроним
<address> Определяет контактную информацию для автора/владельца из документа/статьи
<b> Определяет полужирный текст
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении, от другого текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет большой текст
<blockquote> Определяет раздел, заключенный в кавычки из другого источника
<center> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет центрированный текст
<cite> Определяет название из работы
<code> Определяет часть из компьютерного кода
<del> Определяет текст, который был удален из документа
<dfn> Представляет определяющий экземпляр термина
<em> Определяет подчеркнутый текст
<font> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет шрифт, цвет и размер текста
<i> Определяет часть текста альтернативным голосом или настроением
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<mark> Определяет выделенный / выделенный текст
<meter> Определяет скалярное измерение в известном диапазоне (датчик)
<pre> Определяет форматированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет короткую цитату
<rp> Определяет, что показывать в браузерах, которые не поддерживают аннотации ruby
<rt> Определяет объяснение/произношение символов (для Восточно-Азиатской типографии)
<ruby> Определяет аннотацию ruby (для Восточно-Азиатской типографии)
<s> Определяет текст, который больше не является правильным
<samp> Определяет пример вывода из компьютерной программы
<small> Определяет меньший текст
<strike> Не поддерживается в HTML5. Лучше используйте <del> или <s>.
Определяет зачеркнутый текст
<strong> Определяет строгий текст
<sub> Определяет подстрочный текст
<sup> Определяет надстрочный текст
<template> Определяет шаблон
<time> Определяет дату/время
<tt> Не поддерживается в HTML5. Лучше используйте CSS.
Определяет текст телетайпа
<u> Определяет текст, который должен стилистически отличаться от обычного текста
<var> Определяет переменную
<wbr> Определяет возможный разрыв строки
Тег Описание
<form> Определяет форму HTML для пользовательского ввода
<input> Определяет ввод управления
<textarea> Определяет многострочный ввод (текстовое поле)
<button> Определяет кликабельную кнопку
<select> Определяет раскрывающийся список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<label> Определяет метку для элемента <input>
<fieldset> Группирует связанные элементы в форме
<legend> Определяет заголовок для элемента <fieldset>
<datalist> Задает список предопределенных параметров для элементов управления вводом
<output> Определяет результат вычисления
Тег Описание
<frame> Не поддерживается в HTML5.
Определяет окно (фрейм) в наборе кадров
<frameset> Не поддерживается в HTML5.
Определяет набор фреймов
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, не поддерживающих фреймы
<iframe> Определяет встроенный фрейм
Тег Описание
<img> Определяет изображение
<map> Определяет клиентскую карту изображений
<area> Определяет область внутри изображения карты
<canvas> Используется для рисования графики по ходу, с помощью скриптов (обычно код JavaScript )
<figcaption> Определяет заголовок для элемента <figure>
<figure> Задает автономное содержимое
<picture> Определяет контейнер для нескольких ресурсов изображений
<svg> Определяет контейнер для графики SVG
Тег Описание
<audio> Определяет звук контента
<source> Определяет несколько ресурсов мультимедиа для элементов медиа (<video>, <audio> и <picture>)
<track> Определяет текстовые дорожки для элементов медиа (<video> и <audio>)
<video> Определяет видео или фильм
Тег Описание
<a> Определяет гиперссылку
<link> Определяет связь между документом и внешним ресурсом (наиболее часто используемым для связи с таблицами стилей)
<nav> Определяет навигацию ссылок
Тег Описание
<ul> Определяет неупорядоченный список
<ol> Определяет упорядоченный список
<li> Определяет элемент списка
<dir> Не поддерживается в HTML5. Лучше используйте <ul>.
Определяет каталог списка
<dl> Определяет описание списка
<dt> Определяет термин/имя в списке описания
<dd> Определяет описание термина/имени в списке описания
<menu> Определяет список/меню команд
<menuitem> Определяет команду/меню, которые пользователь может вызвать из всплывающего меню
Тег Описание
<table> Определяет таблицу
<caption> Определяет заголовок в таблицы
<th> Определяет заголовк ячейки в таблице
<tr> Определяет строку в таблице
<td> Определяет ячейку в таблице
<thead> Группирует содержимое заголовка в таблице
<tbody> Группирует содержимое тела в таблице
<tfoot> Группирует содержание нижнего колонтитула в таблице
<col> Задает свойства столбца для каждого столбца в элементе <colgroup>
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
Тег Описание
<style> Определяет информацию о стиле документа
<div> Определяет контейнер в документе
<span> Определяет промежуток в документе
<header> Определяет заголовок документа или раздела
<footer> Определяет нижний колонтитул для документа или раздела
<main> Определяет основное содержание документа
<section> Определяет раздел в документе
<article> Определение статьи
<aside> Определяет содержимое из содержимого страницы
<details> Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
<dialog> Определяет диалоговое окно или окно
<summary> Определяет видимый заголовок элемента <details>
<data> Связывает данный контент с машиночитаемым переводом
Тег Описание
<head> Определяет информацию о документе
<meta> Определяет метаданные о документе HTML
<base> Задает базовый URL/цель для всех относительных URL адресов в документе
<basefont> Не поддерживается в HTML5. Лучше используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
Тег Описание
<script> Определяет клиентский сценарий
<noscript> Определяет альтернативное содержимое для пользователей, не поддерживающих клиентские сценарии
<applet> Не поддерживается в HTML5. Лучше используйте <embed> или <object>.
Определяет встроенный апплет
<embed> Определяет контейнер для внешнего (не-HTML) приложения
<object> Определяет внедренный объект
<param> Определяет параметр для объекта

Краткий справочник по тегам HTML

Кратко о документе

<html> … </html>

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

<head> … </head>

Содержит специфическую информацию о странице, включая кодировку, мета-информацию, подключение скриптов и подключение стилей.

<title> … </title>

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

<body> … </body>

Содержит весь контент, который отображается на странице. Все что мы видим на html странице располагается в нем.

Пример

<html> <head> <title>Пример</title> </head> <body> </body> </html>

<html>

<head>

<title>Пример</title>

</head>

<body>

</body>

</html>

Информация о документе

<base>

Базовый URL, используется для создания относительных ссылок на сайте. Не обязательный тег.

<meta>

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

<link>

Тег используется для подключения внешних страниц, например таблиц стилей

<style> … </style>

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

<script> … </script>

Данный элемент может использоваться для оборачивания различных скриптов на странице, например JavaScript и для подключения внешних скриптов

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

</body>

</html>

Структура документа

<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h6>…</h6>

Шесть уровней заголовков для создания структурных блоков. Самый важный — h2. Элементы содержат описания блоков текста, разделов, страниц. Аналогия — заголовки в книгах

<div></div>

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

<span> … </span>

Используется для выделения элементов внутри строки, с последующих их оформлением с помощью CSS.

<p> … </p>

Служит для создания параграфов в тексте.

<br>

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

<hr>

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

Примеры

<h3>Заголовок</h3> <p>Это пример простого <span>параграфа текста</span>. В нем используется выделение отдельных слов.</p> <hr> <h4>Еще немного заголовков</h4> <p>Обязательно используйте параграфы для раздения <span>логических</span> блоков текста.</p>

<h3>Заголовок</h3>

<p>Это пример простого <span>параграфа текста</span>. В нем используется выделение отдельных слов.</p>

<hr>

<h4>Еще немного заголовков</h4>

<p>Обязательно используйте параграфы для раздения <span>логических</span> блоков текста.</p>

Заголовок

Это пример простого параграфа текста. В нем используется выделение отдельных слов.


Еще немного заголовков

Обязательно используйте параграфы для раздения логических блоков текста.

Текст (и форматирование)

<strong> … </strong>

Выделение важных, ключевых слов в тексте. Слов, на которые делается логическое ударение. Браузеры выделяют данный тег жирным начертанием. Не используйте strong для простого, визуального выделения. В HTML5 тег strong используется в семантическом контексте.

<b> … </b>

Визуальное выделение жирным шрифтов. Служит для оформления. Не несет смысловой нагрузки.

<em> … </em>

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

<i> … </i>

Выделение курсивом. Не несет смысловой нагрузки. Служит для оформления текста.

<cite> … </cite>

Цитата, цитируемая информация.

<pre> … </pre>

Преформатированный текст. Моноширинный текст. Форматирование выводится так, как задал пользователь внутри блока окруженного тегами pre, в частности отступы, пробелы — сохраняются.

<blockquote> … </blockquote>

Чаще всего цитаты из текста, текст, выделенный для цитирования.

<q> … </q>

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

<abbr title="полное название" > … </abbr>

Выделение аббревиатур. При наведении мыши всплывает полное написание аббревиатуры.

<address> … </address>

Тег использовался для обертки адреса. Сейчас, ипользуется для указания адреса в сети Интернет (URL) материала, ссылки, цитаты. Для форматирования почтового адреса используйте микроформаты и микроданные.

<dfn> … </dfn>

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

<code> … </code>

Используется для выделения текста моноширинным шрифтом. Часто используется для форматирования кода языков программирования.

<sup> … </sup>

Выделение верхнего индекса. Например для создания обозначения m2.

<sub> … </sub>

Создание нижнего индекса.

<small> … </small>

Изначально использовался для создания текста, с размерами меньше основного. Сейчас — для выведения информации менее важной, чем основной текст. Пример — оформление сносок в документе.

Примеры

<p><strong>Бульба</strong> был <em>упрям страшно</em>. Это был один из <i>тех характеров</i>, которые могли возникнуть только в <b>тяжелый ХV век</b> на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.</p> <blockquote>Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.</blockquote>

<p><strong>Бульба</strong> был <em>упрям страшно</em>. Это был один из <i>тех характеров</i>, которые могли возникнуть только в <b>тяжелый ХV век</b> на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.</p>

<blockquote>Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.</blockquote>

Бульба был упрям страшно. Это был один из тех характеров, которые могли возникнуть только в тяжелый ХV век на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.

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

HTML теги

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

Теги имеют следующий формат: <имя_тега атрибут1="значение" атрибут2="значение">данные</имя_тега> (например, <a href='something.html' title='something'>Ссылка</a>) или <имя_тега атрибут1="значение" атрибут2="значение" /> (например, <input type="text" name="bob" />).

В данном справочнике содержится информация обо всех тегах HTML 4.01 и HTML5 с описанием, примерами и атрибутами.

<!--...--> Вставляет комментарии
body Определяет тело HTML документа
br Вставляет разрыв строки
DOCTYPE Декларация типа HTML документа
h2-h6 Определяют HTML заголовки
hr Определяет тематический разрыв контента
html Определяет, что это HTML-документ
p Определяет текстовый параграф
title Определяет титульный заголовок страницы
abbr Определяет аббревиатуру
acronym Определяет акроним
address Определяет информацию об авторе статьи или документа
b Определяет жирное начертание текста
bdi Изолирует текст от изменения направления вывода
bdo Устанавливает направление вывода текста
big Увеличивает размер текста
blockquote Определяет цитату внутри документа
center Используется для выравнивания текста по центру
cite Определяет название работы, цитату или сноску на другой документ
code Определяет программный код
del Определяет удаленный текст
dfn Определяет первое появление нового термина
em Определяет акцентированный текст
font Определяет характеристики шрифта текст
i Устанавливает начертание текста курсивом
ins Определяет новый добавленный текст
kbd Определяет текст, набранный на клавиатуре
mark Определяет выделенный текст
meter Определяет оценочный индикатор
pre Определяет заранее форматированный текст
progress Определяет индикатор прогресса выполнения задачи
q Определяет короткую цитату внутри документа
rp Определяет текст для вывода в браузерах, не поддерживающих элемент <ruby>
rt Определяет небольшую аннотацию к тексту
ruby Предназначен для добавления небольшой аннотации
s Определяет нерелевантный текст
samp Определяет текст, который является результатом вывода компьютерной программы
small Уменьшает размер текста
strike Определяет перечеркнутый текст
strong Определяет важный текст
sub Определяет текст в виде нижнего индекса
sup Определяет текст в виде верхнего индекса
time Определяет дату/время
tt Определяет телетайпный текст
u Определяет подчеркнутый текст
var Определяет переменную компьютерной программы
wbr Определяет место для переноса строки в тексте
button Определяет кнопку формы
datalist Определяет предопределенные варианты значений для элемента <input>
fieldset Используется для группирования родственных элементов формы
form Используется для создания HTML форм
input Определяет поле ввода HTML формы
keygen Определяет поле-генератор ключей
label Определяет метку для элемента <input>
legend Определяет заголовок для элемента <fieldset>
optgroup Используется для группирования родственных вариантов выбора
option Определяет отдельные пункты в выпадающем списке выбора
output Представляет результаты вычислительных операций
select Используется для создания выпадающего списка
textarea Определяет многострочное текстовое поле ввода
frame Определяет фрейм внутри фреймовой структуры
frameset Определяет фреймовую структуру
iframe Определяет встроенный фрейм
noframes Определяет информацию, которая выводится, когда нет поддержки фреймов
area Определяет активные области в карте-изображении
canvas Определяет область, в которой можно рисовать при помощи скриптов
figcaption Определяет подпись к элементу <figure>
figure Используется для группирования различных самодостаточных элементов
img Вставляет изображение
map Определяет карту-изображение
audio Позволяет в браузере проигрывать звуковые файлы
source Определяет медиа ресурс для медиа элементов
track Определяет текстовую дорожку для медиа элементов
video Позволяет в браузере проигрывать видео файлы
a Определяет гипертекстовую ссылку
link Определяет ссылку на внешний ресурс
nav Определяет набор ссылок навигации
dd Используется для создания определения термина в списке определений
dir Определяет список директорий (системных папок)
dl Создает список определений
dt Создает термин в списке определений
li Создает элемент списка
menu Определяет список/меню команд
menuitem Определяет команду/пункт меню
ol Создает упорядоченный (нумерованный) список
ul Создает неупорядоченный (маркированный) список
caption Определяет пояснительный заголовок таблицы
col Определяет свойства для каждого столбца таблицы
colgroup Определяет группу из одного или более столбцов таблицы для форматирования
table Определяет HTML таблицу
tbody Группирует основное содержимое HTML таблицы
td Определяет стандартную ячейку HTML таблицы
tfoot Группирует содержимое нижнего колонтитула HTML таблицы
th Определяет заголовочную ячейку HTML таблицы
thead Группирует содержимое верхнего колонтитула HTML таблицы
tr Определяет строку HTML таблицы
article Определяет автономный контент
aside Определяет блок сбоку от основного контента
details Определяет дополнительную информацию
dialog Создает диалоговое окно
div Определяет блок кода HTML документа
footer Определяет "подвал" документа или раздела
header Определяет "шапку" документа или раздела
main Определяет основное содержимое документа
section Определяет раздел документа
span Используется для группирования строчных элементов
style Определяет CSS стили на уровне веб-страницы
summary Определяет заголовок для элемента <details>
base Определяет базовые URL для ссылок на странице
basefont Определяет цвет, размер и шрифт текста по умолчанию
head Является контейнером для всех головных элементов документа
meta Определяет мета-информацию о HTML документе
applet Вставляет в код страницы Java апплет
embed Определяет контейнер для внешнего приложения
noscript Определяет контент, который будет отображаться, если браузер не поддерживает скрипты
object Вставляет в код страницы программный объект
param Определяет параметры для программных объектов
script Определяет скрипты, исполняемые на стороне пользователя

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *