Краткий справочник XHTML тегов включая HTML5
Краткий справочник XHTML тегов включая HTML5
Спецификация HTML5 доступна с 25 Августа 2009 года на официальном сайте W3C.HTML5 по сути является дополненным новыми элементами и атрибутами XHTML.
HTML5 предлагает более широкую функциональность и упрощает процесс создания интерактивных сайтов и web-приложений. Кроме этого, HTML5 содержит дополнительные элементы для внедрения в web-страницы мультимедийного контента.
HTML5 пока не получил статус рекомендации, а его новые теги, на данном этапе, распознаются только некоторыми свежими версиями браузеров, например, Firefox и Chrome.
Справочник составил для себя, может кому пригодится.
| Тег(синтаксис) | Описание |
|---|---|
<!-- --> |
Тег добавляет комментарий в код документа |
<!DOCTYPE> |
Определяет тип документа |
<a> </a> |
Устанавливает ссылку или якорь |
<abbr> </abbr> |
Указывает, что последовательность символов является аббревиатурой |
<acronym> </acronym> |
Указывает на то, что текст является акронимом
Не поддерживаются в HTML 5 |
<address> </address> |
Предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д |
<area /> |
Определяет активные области изображения, которые являются ссылками |
<article> </article> |
Задает содержание сайта вроде новости, статьи, записи блога, форума или др
Новые HTML теги – oпределяют внешний контент |
<aside> </aside> |
Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации
Новые HTML теги – дополнительный контент |
<audio> </audio> |
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице
Новые HTML теги – определяют фоновый звук |
<b> </b> |
Устанавливает жирное начертание шрифта |
<base параметры />
|
Инструктирует браузер относительно полного базового адреса текущего документа |
<bdo> </bdo> |
Устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево |
<big> </big> |
Увеличивает размер шрифта на единицу по сравнению с обычным текстом
Не поддерживаются в HTML 5 |
<blockquote> </blockquote> |
Предназначен для выделения длинных цитат внутри документа |
<body> </body> |
Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера |
<br /> |
Устанавливает перевод строки в том месте, где этот тег находится |
<button> </button> |
Создаёт кнопку и предлагает расширенные возможности по созданию кнопок |
<canvas id="идентификатор"> </canvas>
|
Новые HTML теги
– можно создавать рисунки, анимацию, игры и др.
Создает область, в которой при помощи javascript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства |
<caption> </caption> |
Предназначен для создания заголовка к таблице |
<center> </center> |
выравнивает содержимое контейнера по центру относительно родительского элемента
Не поддерживаются в HTML 5 |
<cite> </cite> |
Помечает текст как цитату или сноску на другой материал
Браузеры обычно устанавливают текст внутри контейнера <cite> курсивом. |
<code> </code> |
Предназначен для отображения одной или нескольких строк текста, который представляет собой программный код
Браузеры обычно отображают содержимое контейнера <code> как моноширинный текст уменьшенного размера. |
<col /> |
Задает ширину и другие характеристики одной или нескольких колонок таблицы |
<colgroup> </colgroup> |
Предназначен для задания ширины и стиля одной или нескольких колонок таблицы |
<command> </command> |
Создает команду в виде переключателя, флажка или обычной кнопки
Новые HTML теги – добавляют команду к кнопке |
<datalist> </datalist> |
Создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса
Новые HTML теги – определяют допустимые значения |
<dd> </dd> |
Входит в тройку элементов <dl>, <dt>, <dd>, задаёт определение термина |
<del> </del> |
Используется для выделения текста, который был удален в новой версии документа
Браузеры обычно помечают текст в контейнере <del> как перечеркнутый |
<details> </details> |
Используется для хранения информации, которую можно скрыть или показать по требованию пользователя
Новые HTML теги – определяют детали документа |
<dialog> </dialog> |
Используется для создания диалогов между пользователями(используется вместо <dl>)
Новые HTML теги – определяют диалог |
<dfn> </dfn> |
Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение.
Браузеры отображают содержимое контейнера <dfn> с помощью курсивного начертания. |
<dir> </dir> |
Создает список, содержащий названия директорий (системные папки)
Не поддерживаются в HTML 5 |
<div> </div> |
Является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого |
<dl> </dl> |
Тег <dl> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. |
<dt> </dt> |
Входит в тройку элементов <dl>, <dt>, <dd> определет термин |
<em> </em> |
Предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием |
<embed width="..." height="..."></embed>
|
Используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.)
Новый HTML тег – внедряет интерактивный объект |
<fieldset> </fieldset> |
Предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащих большое число данных |
<figure> </figure> |
Используется для группирования любых элементов, например, изображений и подписей к ним.
Новые HTML теги – группируют элементы страницы |
<figure>
<figcaption>
Описание
</figcaption>
</figure>
|
Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.
Новые HTML теги – группируют элементы страницы |
<footer> </footer> |
Задает «подвал» сайта или раздела, в нем может располагается имя автора, дата документа, контактная и правовая информация
Новые HTML теги – нижняя часть документа |
<form> </form> |
Устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. |
<h1> </h1> – <h6> </h6> |
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным |
<head> </head> |
Содержит служебную информацию о документе, инструкции |
<header> </header> |
Задает «шапку» сайта или раздела, в которой обычно располагается заголовок
Новые HTML теги – верхняя секция документа |
<hgroup> </hgroup> |
Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>
Новые HTML теги – определяют группу заголовков |
<hr /> |
Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера |
<html> </html> |
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body> |
<i> </i> |
Устанавливает курсивное начертание шрифта |
<iframe> </iframe> |
Создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы |
<img /> |
Предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG |
<input /> |
Является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков |
<ins> </ins> |
Предназначен для выделения текста, который был добавлен в новую версию документа
Браузеры обычно помечают текст в контейнере <ins> как подчеркнутый |
<kbd> </kbd> |
Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш.
Браузеры обычно помечают текст в контейнере <kbd> моноширинным шрифтом |
<form>
<keygen>
</keygen>
</form>
|
Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается вместе
с формой. Сами ключи необходимы для шифрования и расшифровке данных, создания и проверки цифровой подписи
Новые HTML теги –генерация пары ключей |
<label> </label> |
Устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам |
<fieldset>
<legend>
Текст
</legend>
</fieldset>
|
Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега <fieldset>. Группа элементов обозначается в браузере с помощью рамки, а текст, который располагается внутри контейнера <legend>, встраивается в эту рамку |
<li> </li> |
Определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный |
<link /> |
Определяет ссылку на внешний источник. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку |
<map> </map> |
Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы |
<mark> </mark> |
Помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей
Новые HTML теги – определяют важную часть текста |
<menu> </menu> |
Предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li> |
<meta /> |
Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем |
<meter value="значение">текст</meter>
|
Используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления
и др.
HTML теги –отображение числовых значений |
<nav> </nav> |
Задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылкиНовые Новые
HTML теги – определяют группу ссылок |
<noscript> </noscript> |
Показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег и все, что располагается внутри него |
<object width="ширина" height="высота"></object>
|
Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы |
<ol> </ol> |
Устанавливает нумерованный список |
<optgroup> </optgroup> |
Представляет собой контейнер, внутри которого располагаются теги <option> объединенные в одну группу |
<option> </option> |
Определяет отдельные пункты списка, создаваемого с помощью контейнера <select>. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей |
<output> </output>
|
Определяет область в которую выводится информация, преимущественно с помощью скриптов
Новые HTML теги |
<p> </p> |
Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки |
<param /> |
Предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов <applet> или <object> |
<pre> </pre> |
Определяет блок предварительно форматированного текста |
<progress value="<число>" max="<число>"> Текст </progress>
|
Используется для отображения прогресса завершенности задачи. Изменение значения происходит через javascript |
<q> </q> |
Используется для выделения в тексте цитат |
<ruby>
текст <rt>аннотация</rt>
</ruby>
|
Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но
может применяться и для других языков, если требуется написать один текст над другим. Сам тег <ruby> выступает контейнером для тега <rt>, он и формирует аннотацию к тексту, после которого
идет; а также <rp>, этот тег предназначен для браузеров, которые не поддерживают <ruby>
Новые HTML теги |
<ruby> текст
<rp>
текст
</rp>
<rt>аннотация</rt>
<rp>
текст
</rp>
</ruby>
|
Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>. В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти
до или после тега <rt>
Новые HTML теги |
<ruby> текст
<rt>
аннотация
</rt>
</ruby>
|
Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом
Новые HTML теги |
<samp> </samp> |
Используется для отображения текста, который является результатом вывода компьютерной программы или скрипта.
Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта |
<script> </script> |
Предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке |
<section> </section> |
Задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Допускается вкладывать один тег <section> внутрь другого
Новые HTML теги – определяют секцию документа |
<select> </select> |
Позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором |
<small> </small> |
Уменьшает размер шрифта на единицу по сравнению с обычным текстом |
<source src="URL">
|
Вставляет звуковой или видеофайл для тегов <audio> и <video>. Обобщенно такие файлы называются медийными |
<span> </span> |
Предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль |
<strong> </strong> |
Предназначен для акцентирования текста.
Браузеры отображают такой текст жирным начертанием |
<style> </style> |
Применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head> |
<sub> </sub> |
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера |
<sup> </sup> |
Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера |
<details>
<summary>
Текст
</summary>
</details>
|
Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации. Тег <summary> должен идти первым внутри <details>
Новые HTML теги |
<table> </table> |
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr> |
<tbody> </tbody> |
Предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты |
<td> </td> |
Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table> |
<textarea> </textarea> |
Представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста |
<tfoot> </tfoot> |
Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег <tfoot> в исходном коде должен быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы |
<th> </th> |
Предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру |
<thead> </thead> |
Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде сразу после тега <table> |
<time> </time> |
Помечает текст внутри тега <time> как дата, время или оба значения
Новые HTML теги – определяют дату или время |
<title> </title> |
Определяют основной заголовок документа |
<tr> </tr> |
Служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега < TH> или <td> |
<tt> </tt>
|
Отображает текст моноширинным текстом. Этот тег относится к группе тегов физического форматирования |
<ul> </ul> |
Устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства |
<var> </var> |
Используется для выделения переменных компьютерных программ.
Браузеры обычно помечают текст в контейнере <var> курсивным начертанием |
<video> </video> |
Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>
Новые HTML теги – внедряют видео в web-страницу |
Текст<wbr>текст |
Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента
Новые HTML теги – перенос строки |
Понравилась новость Краткий справочник XHTML тегов включая HTML5 на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Краткий справочник XHTML тегов включая HTML5 из категории Основы / XHTML
- Меню навигации ⋙ Горизонтальное меню CSS3 мутный текст
- Основы / CSS ⋙ Текст с тенью css3 text-shadow примеры
- Основы / CSS ⋙ Мини Курс Основы CSS Часть 1
- Основы / CSS ⋙ Мини Курс Основы CSS Часть 2
- Основы / HTML ⋙ Мини Курс Основы HTML Часть 2
- Основы / HTML ⋙ Мини Курс Основы HTML Часть 1
- Советы ⋙ Обзор форматов электронных книг .chm .DjVu .doc (Word) .exe .exe (exebook) .fb2 .pdb .PalmDOC (он же — AportisDoc) .pdf .rtf .txt
- Основы / XHTML ⋙ XHTML основы Основное различие между HTML и XHTML
- Основы / XML ⋙ XML основы или Что такое XML
- Фотошоп ⋙ Вдавленный текст Photoshop CS5 RUS
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
