Краткий справочник XHTML тегов включая HTML5

Автор: Admin    Категория: Основы / XHTML    Теги:  HTML    Дата: 23-02-2011, 17:54
Краткий справочник 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 теги
– перенос строки
Версия для печати
  • 100
     Просмотров: 9 304      Комментариев: 1   

Понравилась новость Краткий справочник XHTML тегов включая HTML5 на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

№ 1 Автор: тайланд 6 октября 2011 09:15

 Вот такой я - тайланд

тайланд
Гости
комментариев
публикаций

Статус:
Хм, кто б мог подумать =) Ваши слова меня заставили задуматься =)

  • Нравится
  • 0
    

Информация

Внимание!

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

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус