HTML справочник | Теги HTML
HTML справочник — это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).
Для удобства все HTML теги разбиты на категории, согласно их назначению. Если вам нужен како-то конкретный тег, то в левом меню теги отсортированы в алфавитном порядке. Чтобы посмотреть полное описание тега и его атрибутов перейдите по ссылке, нажав на интересующий вас тег.
Вставляемый контент
Интерактивные элементы
Комментарии
Корневой элемент
Метаданные документа
Метаданные — структурированная информация о веб-странице, размещаемая внутри HTML-документа в элементе head.
Разделы документа
Списки
Ссылки
Сценарии
Таблицы
Текст
Формы
Теги html
Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».
Термины «HTML элемент» и «HTML тег» обычно используются как синонимы. Но в соответствии со спецификацией W3C элемент – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега, такие элементы называются одиночными или пустыми, но несмотря на то, что они не могут содержать в себе никакого контента, они все равно считаются полноценными элементами.
На страницах сайта понятия тега и элемента используются для обозначения одного и того же – структурной единицы языка HTML, которая применяется для разметки документа.
Если вы желаете узнать больше о создании веб страниц, тегах и их применении, то можете заглянуть в наш Самоучитель по HTML.
| Тег | Описание |
|---|---|
| !, 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.
| Теги | Описание |
|---|---|
| <!—…—> | Определяет комментарий |
| <!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> | Определяет возможный разрыв линии |
| Тег | Описание |
|---|---|
| <!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 | Определяет скрипты, исполняемые на стороне пользователя |