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 теги – перенос строки |
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS