Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Html5 справочник тегов: HTML уроки с нуля — учебник для начинающих

Содержание

Справочник по HTML5 с примерами 2019 года.


HTML 5

LaYouT
no problem

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

Строчные и блочные элементы  
Иерархия элементов  
Значения rel=  
События  

Layout no problem

Поможет учить html

Ускорит поиск нужного тега

Поддержка уровня знаний

Ты всегда впереди

Зачем HTML5

HTML5 является основой открытой веб-платформы W3C и предназначен для поддержки инноваций и реализации всего потенциала, который может предложить Интернет. Предлагая эту революционную коллекцию инструментов и стандартов, система идентификации HTML5 предоставляет визуальный словарь, чтобы четко классифицировать и сообщать о нововведениях .

— Оранжевая подсказка, обозначает новые теги и атрибуты и их версию HTML5.

— Глобальные атрибуты, упомянутые во многих местах, можно найти в таблице под названием «Глобальные атрибуты».

— В дополнение к атрибутам, которые вы видите для каждого тега , на странице самого тега, вы также можете использовать и глобальные атрибуты для этих тегов.

Новые API

Помимо указания разметки, HTML5 определяет интерфейсы прикладного программирования (API) для сценариев. Существующие интерфейсы объектной модели документов (DOM) расширены, а функции де-факто задокументированы. Есть также новые API, такие как:

— Элемент canvas для непосредственного режима 2D-рисования.

— База данных автономного хранения (автономные веб-приложения).

— Обмен документами между документами

— Управление историей браузера

— MIME тип и регистрация обработчика протокола

— Время воспроизведения мультимедиа

— Редактирование документов

— Перетягивание документов

— Microdata

Отличия HTML5 от HTML 4.01 и XHTML 1 .x

— Возможность использовать встроенные SVG и MathML в text / html

— Новые элементы: article, aside, audio, bdi, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

— Новые типы элементов управления формы: dates and times, email, url, search, color

— Глобальные атрибуты (которые могут применяться к каждому элементу): id, tabindex, hidden, data-* (пользовательские атрибуты данных)

— Элементы которые будут полностью удалены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u.

Кажется что в языке HTML5 очень мало команд и все очень просто. Но вод беда! — в зависимости от очередности расположения и вложености елементов верстки — свойства их могут менятся. Иногда весь дизайн сьежает через этот фактор.

Размеры екранов в пикселях:
Десктоп  — от 1024 до 1980рх
Планшет — от 480 до 1024рх
Мобилка — от 320 до 480рх


1. Таблица оcновных элементов html5:

Корневой элемент
<html></html>корневой элемент html-документаblock
Служебные теги
<!—…—>комментарийnone
<!DOCTYPE>объявление типа документаnone
<head></head>контейнер для метаданных html-документаnone
<title></title>заголовок / имя html-документаnone
<meta>мета-данные веб-страницыnone
<link>подключает внешние таблицы стилейnone
<script></script>подключает сценарии к страницеnone
<style></style>подключает встраиваемые таблицы стилейnone
<base>базовый url-адрес, относительно которого вычисляются относительные адресаnone
<noscript></noscript>секция, не поддерживающая скриптblock
Таблицы
<table></table>html-таблицаtable
<tr></tr>строка таблицыtable-row
<th></th>заголовок столбца таблицыtable-cell
<td></td>ячейка таблицыtable-cell
<thead></thead>блок заголовков таблицыtable-header-group
<tbody></tbody>тело таблицыtable-row-group
<tfoot></tfoot>нижний колонтитул таблицыtable-footer-group
<caption></caption>подпись к таблицеtable-caption
<col>выбирает для форматирования столбцыtable-column
<colgroup></colgroup>контейнер для одного или нескольких <col>table-column-group
Текст
<h2></h2> - <h6></h6>заголовки шести уровнейblock
<p></p>параграфы в текстеblock
<br>перенос текста на новую строкуnone
<hr>горизонтальная линияblock
<wbr>возможное место разрыва длинной строкиnone
<blockquote></blockquote>большая цитатаblock
<cite></cite>источник цитированияinline
<q></q>краткая цитатаinline
<code></code>фрагмент программного кодаinline
<kbd></kbd>текст, вводимый пользователем с клавиатурыinline
<pre></pre>выводит текст с пробелами и переносамиblock
<samp></samp>результат выполнения сценарияinline
<var></var>выделяет переменные из программinline
<del></del>перечёркивает текст, помечая как удаленныйinline
<s></s>перечёркивает неактуальный текстinline
<dfn></dfn>выделяет термин курсивомinline
<em></em>выделяет важные фрагменты текста курсивомinline
<i></i>выделяет текст курсивом без акцентаinline
<strong></strong>выделяет полужирным важный текстinline
<b></b>задает полужирное начертание отрывка текста, без дополнительного акцентаinline
<ins></ins>подчёркивает изменения в текстеinline
<u></u>выделяет отрывок текста подчёркиванием, без дополнительного акцентаinline
<mark></mark>выделяет фрагменты текста желтым фономinline
<small></small>отображает текст шрифтом меньшего размераinline
<sub></sub>подстрочное написание символовinline
<sup></sup>надстрочное написание символовinline
<time></time>дата / время документа или статьиinline
<abbr></abbr>аббревиатура или акронимnone
<address></address>контактные данные автора документа или статьиblock
<bdi></bdi>изолирует текст, читаемый справа налевоinline
<bdo></bdo>задаёт направление написания текстаinline
<ruby></ruby>контейнер для Восточно-Азиатских символов и их расшифровкиinline
<rp></rp>тег для скобок вокруг символовnone
<rt></rt>расшифровка символовblock
Изображения
<img>html-изображенияinline
<map></map>активные области на карте-изображенииinline
<area>гиперссылка с текстом или активная область внутри карты-изображенияinline
<canvas></canvas>холст-контейнер для динамического отображения изображенийinline-block
Ссылки
<a></a>гиперссылкаinline
Списки
<ol></ol>упорядоченный нумерованный списокblock
<ul></ul>маркированный списокblock
<li></li>элемент спискаlist-item
<dl></dl>контейнер для термина и его описанияblock
<dt></dt>задаёт терминblock
<dd></dd>расшифровывает терминblock
Группировка контента
<body></body>тело html-документаblock
<div></div>контейнер для разделов html-документа, группирует блочные элементыblock
<span></span>контейнер для строчных элементовinline
<header></header>секция для вводной информации сайта или группы навигационных ссылокblock
<footer></footer>секция для нижнего колонтитула документа или разделаblock
<section></section>логическая область (раздел) страницы, обычно с заголовкомblock
<article></article>раздел контента, образующий независимую часть документа или сайтаblock
<aside></aside>контент страницы, имеющий косвенное отношение к основному контентуblock
<nav></nav>раздел документа, содержащий навигационные ссылки по сайтуblock
<figure></figure>независимый контейнер для такого контента как изображения, диаграммы и т.п.block
<figcaption></figcaption>заголовок для элемента <figure>block
<details></details>контейнер с дополнительными сведениями, который можно открыть или закрытьblock
<summary></summary>видимый заголовок для элемента <details>block
<main></main>контейнер для уникального основного содержимого в пределах одной страницы сайтаblock
Формы
<form></form>html-формаblock
<input>многофункциональные поля формыinline-block
<textarea>многострочное поле формыinline-block
<label></label>текстовая метка для элемента <input>inline
<datalist></datalist>контейнер для выпадающего списка элемента <input> с <option>-значениямиnone
<select></select>элемент управления с выбором значений из предложенных вариантов <option>inline-block
<optgroup></optgroup>контейнер с заголовком для группы элементов <option>block
<option></option>вариант (опция) в раскрывающемся спискеblock
<fieldset></fieldset>группирует связанные элементы в формеblock
<legend></legend>заголовок элементов формы, сгруппированных с помощью <fieldset>block
<button></button>интерактивная кнопкаinline-block
<keygen>генерирует закрытый и открытый ключиinline-block
<progress></progress>индикатор выполнения задачиinline-block
<meter></meter>индикатор измерения в заданном диапазонеinline-block
<output></output>поле для вывода результата вычисленияinline
Встраиваемый контент
<audio></audio>добавляет аудио-файлыinline-block
<video></video>добавляет видео-файлыinline-block
<source>указывает местоположение и тип альтернативных файлов для <audio> и <video>none
<track>субтитры для элементов <audio> и <video>none
<embed>встраивает внешний интерактивный контент или плагинinline-block
<object></object>контейнер для встраивания мультимедиаinline-block
<param>задаёт параметры для плагинов, встраиваемых с помощью элемента <object>none
<iframe></iframe>создаёт встроенный фреймblock
2.1. Мета содержимое

<base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>

К мета содержимому относятся элементы, которые содержат информацию о HTML-документе, устанавливают взаимосвязь HTML-документа с другими документами (например, таблицами стилей css), отвечают за внешний вид или поведение контента на странице. Элементы из другого пространства имён, чей смысл связан с метаданными, также относятся к мета содержимому.

2.2. Потоковое содержимое

<a>, <abbr>, <address>, <area> (если он является потомком элемента <map>), <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link> (если его присутствие внутри тела документа допускается), <main>, <map>, <mark>, MathML, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>, текст

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

2.3. Секционное содержимое

<article>, <aside>, <nav>, <section>

Секционное содержимое — содержимое, определяемое областью заголовков и колонтитулов. Каждый элемент секционного содержимого потенциально имеет заголовок и схему (outline).

2.4. Заголовочное содержимое

<h2>, <h3>, <h4>, <h5>, <h5>, <h6>

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

2.5. Текстовое содержимое

<a>, <abbr>, <area> (если он является потомком элемента <map>), <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link> (если его присутствие внутри тела документа допускается), <map>, <mark>, MathML, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <template>, <textarea>, <time>, <u>, <var>, <video>, <wbr>, текст

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

2.6. Встроенное содержимое

<audio>, <canvas>, <embed>, <iframe>, <img>, MathML, <math>, <object>, <picture>, SVG, <svg>, <video>

Встроенное содержимое — содержимое, которое импортируется в документ из других источников, другого языка разметки или пространства имён. Некоторые элементы могут иметь резервный контент, который будет задействован, если внешний ресурс не может быть использован (например, в случае неподдерживаемого формата видео).

2.7. Интерактивное содержимое

<a> (если присутствует атрибут href), <audio> (если присутствует атрибут controls), <button>, <details>, <embed>, <iframe>, <img> (если присутствует атрибут usemap), <input> (если значение атрибута type не равно hidden), <label>, <select>, <textarea>, <video> (если присутствует атрибут controls)

Интерактивное содержимое предполагает взаимодействие с пользователем. Атрибут tabindex также может сделать любой элемент интерактивным содержимым.

3. Дополнительные категории содержимого

3.1. Явное содержимое

<a>, <abbr>, <address>, <article>, <aside>, <audio> (если присутствует атрибут controls), <b>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, <data>, <details>, <dfn>, <div>, <dl> (если он содержит по крайней мере одну пару термин-описание), <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, <input> (если значение атрибута type не равно hidden), <ins>, <kbd>, <label>, <main>, <map>, <mark>, MathML, <math>, <menu> (если значение атрибута type равно toolbar), <meter>, <nav>, <object>, <ol> (если он содержит по крайней мере один элемент <li>), <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <textarea>, <time>, <u>, <ul> (если он содержит по крайней мере один элемент <li>), <var>, <video>, текст, не являющийся пробелом между элементами

Как правило, элементы, принадлежащие модели потокового или текстового содержимого, должны иметь минимум один узел, который имеет явное содержимое и для него не задан атрибут hidden. Явное содержимое делает элемент непустым. Это обеспечивается тем, что элемент содержит потомка с текстом или каким-либо содержимым, которое пользователь может слышать (элемент kbd><audio>), видеть (элемент <canvas>, <img> или <video>) или каким-либо образом взаимодействовать с ним (интерактивные элементы форм).

Это требование не является жёстким, так как в некоторых случаях элемент может быть пустым по очевидным причинам (например, он в последствии будет наполняться с помощью скрипта).

3.2. Элементы, поддерживающие скрипт

<script>, <template>

Элементы, поддерживающие скрипт, не отображаются на экране. Они используются для поддержки сценариев, например, для обеспечения функциональных возможностей для пользователя.

3.3. Корневое секционное содержимое

<blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure>, <td>

Кроме секционного содержимого есть несколько элементов, являющихся корневыми секционными. Они выделены из секционного содержимого, но также могут иметь собственную структуру заголовков, а разделы и заголовки внутри этих элементов не взаимодействуют со структурой заголовков их родителей.

4. Прозрачная модель содержимого

<a>, <audio>, <canvas>, <del>, <ins>, <map>, <object>, <video>

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

Мультимедиа

Аудио и видео — первоклассные граждане в сети HTML5, живущие в гармонии с вашими приложениями и сайтами. Свет, камера, мотор!

Оффлайн & Хранение

Веб-приложения могут запускаться быстрее и работать, даже если нет подключения к Интернету, благодаря кэш-памяти приложений HTML5, а также локальному хранилищу, индексированной БД и спецификациям File API.

Производительность и Интеграция

Сделайте свои веб-приложения и динамический веб-контент быстрее с помощью различных методов и технологий, таких как Web Workers и XMLHttpRequest 2. Ни один пользователь никогда не должен ждать.

Семантика

Придавая смысл структуре, семантика находится впереди и в центре HTML5. Более богатый набор тегов, наряду с RDFa, микроданными и микроформатами, обеспечивает более полезный веб-интерфейс, управляемый данными, как для программ, так и для ваших пользователей.

CSS3

CSS3 предоставляет широкий спектр стилизации и эффектов, улучшая веб-приложение, не жертвуя своей семантической структурой или производительностью. Кроме того, Web Open Font Format (WOFF) обеспечивает типографскую гибкость и контроль далеко за пределами того, что раньше предлагалось в Интернете.

3D графика и эффекты

Среди возможностей SVG, Canvas, WebGL и CSS3 3D вы наверняка поразите своих пользователей потрясающими визуальными эффектами, встроенными в браузер.

Быстрая Связь

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

Доступ к устройству

Начиная с API геолокации, veb-приложения могут предоставлять богатые, ориентированные на устройство функции и возможности. Разрабатываются и внедряются невероятные инновации в доступе к устройствам — от доступа к аудио и видеовходу до микрофонов и камер, до локальных данных, таких как контакты и события, и даже ориентации наклона.

Трюки в .htaccess

Что и как можно настроить в .htaccess Работает только на: ОС — Linux, сервер — Apache, включен модуль — Mod-Rewrite.

Как указать путь к файлу в css / html

Есть 4 способа указать путь к файлу, обычно используют относительный путь (первых три варианта), а вот 4-й вариант самый надежный для сервера но при просморе на компютере из обычной папки при 4-м варианте Виндовс не сможет понять путь.

SSI вставки на стороне сервера

HTML5
525 1
 

SSI вставки на стороне сервера — малоизвестый язык для динамической «сборки» веб-страниц на сервере реализованы в веб-сервере Apache при помощи модуля mod_include. Шаблонизатор SSI — HTML5-SSI-RULLAN

Нужна помощь

Пытаюсь сделать 3D сайт — зашел в тупик может кто выдел подобные проэкты. Буду рад за ссылку на сайт.

Списки ul и ol

Оба элемента <ol> и <ul> представляют собой список элементов. Они отличаются тем, что в элементе <ol> соблюдается числовой порядок со смыслом.

clip-path — примеры использования

HTML5
646 0
 

Свойство CSS clip-path создает область отсечения, которая устанавливает, какая часть элемента должна отображаться. Нужно помнить что части находящиеся внутри области — отображаются, а те, что снаружи, скрыты. По сути мы должны указать координаты точек, через запятую, по которым произойдет обрезка. Способы которыми можно сделать обрезку:

Список описаний dl, dt и dd

Список описаний хорош для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

Table — таблицы

HTML таблицы раньше даже использовали для создания сеток, а тепер таблицы являються декоративным элементом при оформлении страницы.

Подключение шрифтов

Как можо подключить шрифт к своему сайту и какие есть способы подключения шрифтов?

Элемент select

The HTML <select> element represents a control that provides a menu of options:


Версия:Появился:Стандарт:
5.020122014
5.120152016
5.220172017
5.32017N/A

Семантика тела

:


header  
nav
div

main
<h2></h2>
<h3></h3>
<h4></h4>
div


section
<h3></h3> 
article
article 
div


aside
div

heder
article
<h5></h5>


article
div



 


«Верстка без проблем»

Этот сайт — FAQ по HTML5 + CSS3, который я создал для повседневной работы и для тех кто хочет изучать верстку.

Козак Руслан — дизайнер, верстальщик, аниматор, СЕО-оптимизатор + поддержка сайтов.
Заказать у меня — создание сайта (Цена сайта стартует от 400$ )

КОНТАКТЫ


(P.S. — Вибачаюсь перед усіма українцями за відсутність перекладу на рідну мову. Нажаль в програмуванні української не існує… Хто хоче перекласти — надам доступ і можливість створювати дублі сторінок українською.)

Для усіх любителів Анекдотів українською існує чудовий сайт з безліччю приколів, смішних історій та відео:

Справочник HTML — теги на U, V и !DOCTYPE

Содержание:

Тег UL

ТегАтрибутыТипIEHTML5HTML 4.01 | XHTML 1.0XHTML 1.1Универ.
атрибуты,
события
TransitionalFramesetStrict***
<UL>+блочный++++++
type+++

Тег ul — применяется для создания маркированного списка. Читать урок Создание списков.

Применение:

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
</ul>

Атрибут: type — указывает тип маркеров. Значения: disk — круглый (по умолчан.), circle — окружность, square — квадратный (в CSS — свойство list-style-type).

Тег VAR

ТегАтрибутыТипIEHTML5HTML 4.01 | XHTML 1.0XHTML 1.1Универ.
атрибуты,
события
TransitionalFramesetStrict***
<VAR>строчный++++++

Тег var — применяется для выделения переменных компьютерных приложений, отображается курсивом.

Тег VIDEO

ТегАтрибутыТипIEHTML5HTML 4.01 | XHTML 1.0XHTML 1.1Универ.
атрибуты,
события
TransitionalFramesetStrict***
<VIDEO>+9.0 и выше++
autoplay9.0 и выше+
controls9.0 и выше+
height9.0 и выше+
loop9.0 и выше+
poster9.0 и выше+
preload9.0 и выше+
src9.0 и выше+
width9.0 и выше+

Тег video — новый тег HTML5, размещает видео на веб-странице. Читайте урок о вставке видео на веб-страницу.

Атрибуты тега VIDEO »

autoplay — автоматическое воспроизведение. Значения: false — нет, true — да.
controls — определяет, нужно ли показывать панель управления видео.
height — высота кадра.
loop — варианты воспроизведения. Значения: false — однократное, true — циклическое.
poster — URL изображения-заставки.
preload — определяет, нужно ли предварительно загружать видеозапись в сам элемент. Значения: auto — загружает на усмотрение браузера, metadata — загрузить только метаданные видеозаписи, none — не загружать (по умолчан.).
src — URL видеозаписи.
width — ширина кадра видео.

Тег WBR

ТегАтрибутыТипIEHTML5HTML 4.01 | XHTML 1.0XHTML 1.1Универ.
атрибуты,
события
TransitionalFramesetStrict***
<WBR>9.0 и выше+

Тег wbr — инструктирует браузер о месте возможного переноса строки в случае необходимости. Примечание: нет закрывающего тега.

Тег !DOCTYPE

ТегАтрибутыТипIEHTML5HTML 4.01 | XHTML 1.0XHTML 1.1Универ.
атрибуты,
события
TransitionalFramesetStrict***
<!DOCTYPE>+++++

Тег !DOCTYPE — занимает первую строку и указывает тип документа. Примечание: нет закрывающего тега. Подробнее о разнице версий html, xhtml и html5.
HTML5:
<!DOCTYPE html>
HTML 4.01 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ТегАтрибутыТипIEHTML5HTML 4.01 | XHTML 1.0XHTML 1.1Универ.
атрибуты,
события
TransitionalFramesetStrict***
<!--...-->+++++

Тег <!--Комментарии--> — применяется для обособления комментариев (для себя), содержимое не отображается. Примечание: нет закрывающего тега.

Содержание:

Поделиться с друзьями:

Энциклопедия HTML5 » Сайт HTML-5.ru

Энциклопедия HTML5

22 Июн 2015

Тег footer в языке HTML5 Тег footer в HTML5, обрамляет подвал, на странице сайта. В тегах <footer> </footer> оычно содержится инфрмация относящаяся к самому сайту, а не к основному контенту, например: правовая информация (копирайты), имя автора, название сайта и/или компании, телефон и/или адрес компании и т.п. Приведём пример расположения тегов footer в типичном коде шаблона… Читать далее

22 Июн 2015

Тег aside в языке HTML5 Тег aside в HTML5, обрамляет боковую панель (сайдбар), на странице сайта. Тегами <aside> </aside> оычно обрамляют блок виджетов на сайте. В качестве виджетов могут выступать: блок категориев, меток, последних записей, последних комментариев, популярных страниц, поисковая строка и т.п. Приведём пример возможного расположения тегов aside в типичном коде шаблона страницы, созданной… Читать далее

22 Июн 2015

Тег section в языке HTML5 Тег section в HTML5, может обрамлять повторяющиеся элементы (разделы), на странице сайта. Данный тег довольно сложен для понимания, попробуем разобраться когда же его применять. Теги <section> </section> могут обрамлять комментарии на сайте, ответы темы на форуме, анонсы (цитаты) новостей или постов на главной странице, страниц категориев, меток и т.д. Также… Читать далее

16 Июн 2015

Тег nav в HTML5 Тег nav в HTML5, обозначет основное меню сайта (панель навигации). Обычно тегами <nav> </nav> обрамляют основное меню страницы сайта, которое расположено сразу под шапкой сайта. В меню nav, обычно располагают ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д. Рассмотрим… Читать далее

16 Июн 2015

Тег header в HTML5 Тег header в HTML5, обозначет шапку сайта. Обычно тегами <header> </header> обрамляют шапку страницы сайта. В шапке страницы сайта чаще всего располагают заголовок (девиз, слоган компании), логотип сайта (компании), контактную информацию (телефоны, часы работы). В шапке сайта можно встретить ссылки на: карту проезда, заказать звонок, поисковую строку и различные элементы типа… Читать далее

Страница 1 из 512345»

HTML5 теги | Vavik96

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

Все теги html с описанием. Справочник тегов HTML

Определяет группу строк в нижней части таблицы

— нижний колонтитул. Подробнее

Место, где допускается перенос строки.

Устаревшие теги HTML

Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.

ТегКраткое описание
Акроним. Используйте тег вместо него
Встроенный апплет. Используйтеили
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
Текст большего размера. Используйте вместо него
Отцентрованный текст. Используйте вместо него
Список директорий. Используйте
Определяет цвет, размер и семейство шрифта. Используйте вместо него
Фрейм внутри . Используйте
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько
Альтернативный текст, если фреймы не поддерживаются
Перечеркнутый текст. Используйте или вместо него
Моноширный текст. Используйте вместо него

Подчеркнутый текст. Используйте вместо него

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

Итак, ниже представлены описания распространенных html тегов, которые используются чуть ли не на каждой странице сайта. Поверьте, их уже хватит, чтобы написать целый сайт.

Список тегов html

1. HTML тег (для абзацев)

— выводит текстовый абзац (допускает атрибуты style, class, id). Самый распространенный тег, поскольку в него чаще всего помещают текст (впрочем он для этого и создан).

Например, html код:

Текстовый абзац номер один

А это другой абзац

Текстовый абзац номер один

А это другой абзац

К тегу можно ещё приписать параметр style:

С помощью этих различных значений можно редактировать внешний вид шрифта. Про эти параметры можно прочитать в отдельном уроке: стили в html и свойство css font .

Также можно прописать атрибуты CLASS
и ID
. Например:

2. HTML тег

и (выделение жирным)

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

Приведем пример. Html код:

жирный текст

Преобразуется на странице в следующее:

жирный текст

Также можно прописать атрибуты CLASS и ID (как и в случае с
Примечание

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

3. HTML тег

(создание курсива)


— курсивный шрифт (допускает параметр style, class, id)

Например, html код:

курсивный текст

Преобразуется на странице в следующее:

4. HTML тег

(подчеркнутый текст)


— подчеркнутый шрифт (допускает параметр style, class, id)

Например, html код:

подчеркнутый текст

Преобразуется на странице в следующее:

подчеркнутый текст

5. HTML тег (создание гиперссылки)

Создает ссылку на странице (допускает параметр style, class и другие).

Например, html код:

текст ссылки

Преобразуется на странице в следующее:

Все параметры и атрибуты тега
будут рассмотрены в отдельном уроке: html тег .

6. HTML тег

,…,

— заголовочные теги внутри контента (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.

Например, html код:

Тег

Необходимо использовать эти теги только по назначению, т.е. только когда в статье необходим заголовок. Это связано с тем, что теги

,…,

имеют большое влияние на поисковые машины. Если их использовать правильно, то шансы попасть на верхние строчки выдачи очень высоки.

7. HTML тег (выравнивание)

— выравнивает контент по центру.

Например, html код:

Этот текст будет в центре

Преобразуется на странице в следующее:

Этот текст будет в центре

Примечание

  • — для текста
  • — для всего (например, изображение)

8. HTML тег

(подстрочный текст)


— выводит подстрочный шрифт.

Например, html код:

Обычный текст,
подстрочный текст

Преобразуется на странице в следующее:

Обычный текст, подстрочный текст

9. HTML тег

(надстрочный текст)


— выводит надстрочный шрифт.

Например, html код:

Обычный текст,
надстрочный текст

Преобразуется на странице в следующее:

Обычный текст, надстрочный текст

10. HTML тег ,

,
— выводит шрифт на один пиксель больше/меньше текующего размера (допускает параметр style, class, id).

Например, html код:

Обычный шрифт,
этот шрифт больше на один пиксель

Преобразуется на странице в следующее:

Обычный шрифт, этот шрифт больше на один пиксель

11. HTML тег

    (создание списков)

Выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между

  • и
  • .

    Например, html код:

    Список:

    • первый элемент списка
    • второй элемент списка

    Преобразуется на странице в следующее:

    Список:

    • первый элемент списка
    • второй элемент списка

    12. HTML тег

    (создание таблиц)

    — создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами

    , а столбец

    .

    Например, html код:

    1-строка 1 элемент1-строка 2 элемент
    2-строка 1 элемент2-строка 2 элемент

    Преобразуется на странице в следующее:

    Все возможности тега

    13. HTML тег

    (перенос строки)

    — переход на следующую строку, представляет собой одиночный тег.

    Например, html код:

    Строка 1

    2-строка

    3-строка

    А этот текст будет на 3ей строке, поскольку перехода не было

    Преобразуется на странице в следующее:

    1-Строка

    2-строка

    3-строка
    А этот текст будет на 3ей строке, поскольку перехода не было

    14. HTML тег


    (горизонтальная линия)


    — чертит линию, представляет собой одиночный тег (допускает параметр style, class).

    Например, html код:

    Какой-то текст над линией


    А этот текст будет уже под линией

    Преобразуется на странице в следующее:

    Какой-то текст над линией
    А этот текст будет уже под линией

    15. HTML тег (вывод картинки)

    Например, html код:

    http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg
    «>

    Преобразуется на странице в следующее:

    Все возможности тега
    будут рассмотрены в отдельном уроке: .

    16. HTML тег (форматирование текста)

    — для форматирования текста, изменения стиля и т.п. (допускает параметр style, class, id). Его вес в глазах поисковых машин отсуствует, поэтому его можно использовать сколько хотите.

    Например, html код:

    Этот текст зеленый,
    а его размер 15 пикселей

    Преобразуется на странице в следующее:

    Примечание

    Аналогичным тегом является
    .

    17. HTML тег

    (создание формы)

    — создание формы на странице (допускает параметр style, class).

    Например, ввод логина и пароля, любые кнопки, любая форма регистрации — все это формы.

    18. HTML тег (создание блоков)

    — служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега
    задача упростилась. Практически все сайты содержат
    блоки, как удобную альтернативу таблицам.

    HTML-теги
    — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

    Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

    Все HTML-элементы делятся на пять типов:

    • пустые элементы
      — , ,
      ,

    ,,


    , , ,

    Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.
    Индикатор измерения в заданном диапазоне.
    Раздел документа, содержащий навигационные ссылки по сайту.
    Определяет секцию, не поддерживающую сценарий (скрипт).
    Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег.
      Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
      Контейнер с заголовком для группы элементов .
      Определяет вариант/опцию для выбора в раскрывающемся списке , или .
      Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
      Параграфы в тексте.
      Определяет параметры для плагинов, встраиваемых с помощью элемента
      Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
      Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
      Индикатор выполнения задачи любого рода.

      Определяет краткую цитату.
      Контейнер для Восточно-Азиатских символов и их расшифровки.
      Определяет вложенный в него текст как базовый компонент аннотации.
      Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.
      Отмечает вложенный в него текст как дополнительную аннотацию.
      Выводит альтернативный текст в случае если браузер не поддерживает элемент .

      Отображает текст, не являющийся актуальным, перечеркнутым.

      Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
      Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
      Определяет логическую область (раздел) страницы, обычно с заголовком.
      Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .

      Отображает текст шрифтом меньшего размера.
      Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .
      Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.

      Расставляет акценты в тексте, выделяя полужирным.
      Подключает встраиваемые таблицы стилей.
      Задает подстрочное написание символов, например, индекса элемента в химических формулах.
      Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
      Задает надстрочное написание символов.

      

      © 2021, leally.ru — Твой гид в мире компьютера и интернета

      Тег для создания таблицы.
      Определяет тело таблицы.
      Создает ячейку таблицы.
      Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
      Создает большие поля для ввода текста.
      Определяет нижний колонтитул таблицы.
      Создает заголовок ячейки таблицы.
      Определяет заголовок таблицы.
      Определяет дату/время.
      Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
      Создает строку таблицы.
      Добавляет субтитры для элементов и .

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

      Выделяет переменные из программ, отображая их курсивом.
      Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
      Указывает браузеру возможное место разрыва длинной строки.

      HTML5. Структурные элементы и другие новшества

      HTML5 — это язык для структурирования и представления содержимого веб страниц. Чем же он так хорош? В данной спецификации для структуры кода введено несколько новых тегов, которые в некоторых случаях могут заменять тег div и это пожалуй самое ключевое нововведение. Эти теги ориентированы на поисковых-роботов. Поисковые системы начинают лучше индексировать сайт сверстаный с использованием технологии HTML5, потому что чётко отделяют контент страницы от вспомогательных элементов.

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

      Доктайп

      Любой код разметки начинается с объявления типа документа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. До появления спецификации HTML5 существовало несколько типов доктайпа, различающихся в зависимости от версии языка. Все они были довольно блинными и запомнить их было нереально. Теперь же у нас есть единый, коротенький тип доктайпа:

      Структурные теги разметки HTML5

      Тег <header> задает «шапку» сайта или раздела. То есть данный тег может относиться как и ко всей шапке веб-сайта, так и к отдельным его элементам, разделяющим страницу на разделы, тогда он семантически подразумевает заголовок или введение для содержимого своего родительского элемента.

      Пример:

      <div>
      <header><h2>Вставка включаемых областей в Битрикс</h2></header>
      <p>Включаемая область — это специально выделенная область на странице сайта, которую можно редактировать отдельно от основного содержания страницы. Реализуется она с помощью компонента «Включаемая область».</p>
      </div>

      <div>

      <header><h2>Вставка включаемых областей в Битрикс</h2></header>

      <p>Включаемая область — это специально выделенная область на странице сайта, которую можно редактировать отдельно от основного содержания страницы. Реализуется она с помощью компонента «Включаемая область».</p>

      </div>

      Тег <nav > является контейнером для навигации по сайту. Если на странице несколько блоков ссылок, то в <nav > обычно помещают приоритетные ссылки. Иначе говоря данный тег предназначен для основного меню.

      Пример:

      <nav>
      <a href=»/»>Главная</a>
      <a href=»/contact»>Контакты</a>
      <a href=»/about»>О нас</a>
      </nav>

      <nav>

        <a href=»/»>Главная</a>

        <a href=»/contact»>Контакты</a>

        <a href=»/about»>О нас</a>

      </nav>

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

      <main>
      <h2>Заголовок</h2>
      Текст основного контента
      </main>

      <main>

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

        Текст основного контента

        </main>

      Тег <aside> — определяет положение «сайтбара»(боковой панели) на сайте.

      <aside>
      <header>Рубрики</header>
      <p>Рубрика1</p>
      <p>Рубрика2</p>
      <p>Рубрика3</p>
      <p>Рубрика4</p>
      <p>Рубрика5</p>
      </aside>

      <aside>

      <header>Рубрики</header>

      <p>Рубрика1</p>

      <p>Рубрика2</p>

      <p>Рубрика3</p>

      <p>Рубрика4</p>

      <p>Рубрика5</p>

      </aside>

      Тег <section> — определяет тематический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле, блок новостей и так далее.

      Тег <article> — это независимый раздел документа который можно использовать в разных местах в неизменном виде. Например статья, пост в блоге, сообщение на форуме и так далее. Что-то вроде фрейма.

      <section>
      <article>
      <h3>Заголовок статьи</h3>
      <p>Текст статьи</p>
      </article>
      <article>
      <h3>Заголовок статьи</h3>
      <p>Текст статьи</p>
      </article>
      <article>
      <h3>Заголовок статьи</h3>
      <p>Текст статьи</p>
      </article>
      </section>

      <section>

        <article>

          <h3>Заголовок статьи</h3>

            <p>Текст статьи</p>

         </article>

        <article>

          <h3>Заголовок статьи</h3>

            <p>Текст статьи</p>

         </article>

        <article>

          <h3>Заголовок статьи</h3>

            <p>Текст статьи</p>

         </article>

      </section>

      Новые теги для работы с мультимедиа

      Тег <figure> — используется для группировки изображений и подписей к ним.

      <figure>
      <p>Изображение</p>
      <figcaption>Подпись к изображению</figcaption>
      </figure>
      <figure>

         <figure>

          <p>Изображение</p>

          <figcaption>Подпись к изображению</figcaption>

         </figure>

         <figure>

      Тег <audio> — используется для добавления аудио-файлов.

      <audio src=»путь к аудиофайлу» autoplay=»autoplay» loop=»5″>Здесь можно разместить информацию о мелодии</audio>

      <audio src=»путь к аудиофайлу» autoplay=»autoplay» loop=»5″>Здесь можно разместить информацию о мелодии</audio>

      Где атрибут autoplay — сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы, а loop — указывает, сколько раз необходимо проиграть файл.

      Тег <video> — используется для добавления на страницу видео-файлов.

      <video src=»путь к файлу»>Описание фильма</video>

      <video src=»путь к файлу»>Описание фильма</video>

      Атрибут для ссылок download — позволяет скачать файл указанный в ссылке.

      <a href=»docs/instrukcia.pdf» download>скачать инструкцию</a>

      <a href=»docs/instrukcia.pdf» download>скачать инструкцию</a>

      Атрибуты для работы с полями формы

      Атрибут placeholder — выводит текст внутри поля формы, который исчезает при получении фокуса.

      <input placeholder=»Ваше имя»>

      <input placeholder=»Ваше имя»>

      Атрибут autofocus позволяет установить фокус в поле сразу при загрузке страницы.

      <input placeholder=»Ваше имя» autofocus>

      <input placeholder=»Ваше имя» autofocus>

      Атрибут required позволяет сделать поле обязательным для заполнения.

      <input placeholder=»Ваше имя» required>

      <input placeholder=»Ваше имя» required>

      Атрибут autocomplete — управляет автозаполнением полей форм. То есть при вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать нужное.

      <input placeholder=»Ваше имя» autocomplete=»on»>

      <input placeholder=»Ваше имя» autocomplete=»on»>

      Автозаполнение может быть отключено в настройках браузера, в таком случае атрибут autocomplete работать не будет.[ 0-9]+$Любое число.[0-9]{6}Почтовый индекс.\d+(,\d{2})?Число в формате 1,34 (разделитель запятая).\d+(\.\d{2})?Число в формате 2.10 (разделитель точка).

      Стоит отметить тег <datalist> позволяющий создать список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

      <input type=»text» list=»team_list»>
      <datalist>
      <option>Варианты ответа</option>
      <option>Варианты ответа</option>
      <option>Варианты ответа</option>
      <option>Варианты ответа</option>
      </datalist>

      <input type=»text»  list=»team_list»>

      <datalist>

        <option>Варианты ответа</option>

        <option>Варианты ответа</option>

        <option>Варианты ответа</option>

        <option>Варианты ответа</option>

      </datalist>

      Для атрибута type добавлен ряд новых значений:

      ТипОписание
      colorВиджет для выбора цвета.
      dateПоле для выбора календарной даты.
      datetimeУказание даты и времени.
      datetime-localУказание местной даты и времени.
      emailДля адресов электронной почты.
      numberВвод чисел.
      rangeПолзунок для выбора чисел в указанном диапазоне.
      searchПоле для поиска.
      telДля телефонных номеров.
      timeДля времени.
      urlДля веб-адресов.
      monthВыбор месяца.
      weekВыбор недели.

      И последнее что стоит отметить, это метатег viewport.

      <meta name=»viewport» content=»width=device-width»>

      <meta name=»viewport» content=»width=device-width»>

      Он сообщает браузеру, что ширина просмотра равна ширине устройства. Это поможет сделать ваш сайт более презентабельным на мобильных устройствах.

      Вот пожалуй и все ключевые нововведения спецификации HTML5.

      Таблица HTML тегов

      <acronym>Определяет акроним.
      Не поддерживается в HTML5.
      <abbr>Определяет аббревиатуру или акроним.
      <address>Содержит контактную информацию об авторе/владельце документа/статьи.
      <b>Устанавливает жирное начертание текста.
      <bdi>Изолирует фрагмент текста, который может быть отформатирован в другом направлении, что позволяет браузерам корректно обрабатывать двунаправленный текст.
      Новый элемент в HTML5.
      <bdo> Переопределяет текущее направление текста.
      <big>Определяет шрифт большего размера.
      Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
      <blockquote>Определяет длинную цитату.
      <center>Определяет выровненный по центру текст.
      Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
      <cite>Помечает текст как цитату или сноску на другой материал
      <code>Определяет фрагмент компьютерного кода.
      <del>Определяет удаленный текст.
      <dfn> Содержит определение термина или слова. По умолчанию, выделяется курсивом.
      <em> Используется для акцентирования фрагмента текста. Выделяется курсивом.
      <font>Определяет шрифт, цвет и размер текста.
      Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
      <i>Выделяет фрагмент текста курсивным начертанием.
      <ins> Определяет вставленный текст, который отображается подчеркнутым.
      <kbd>Определяет вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре.
      <mark>Содержит выделенный/подсвеченный текст.
      Новый элемент в HTML5.
      <meter> Определяет скалярную величину в том же диапазоне или графическое представление дробного числа.
      <pre>Определяет предварительно отформатированный текст.
      <progress>Определяет индикатора прогресса выполнения задачи (progress bar).
      Новый элемент в HTML5.
      <q>Определяет короткую цитату.
      <rp>Содержит альтернативный текст, который показывается в браузере, не поддерживающем тег <ruby>.
      Новый элемент в HTML5.
      <rt>Содержит аннотации сверху или снизу от текста, заключенного в тег <ruby> (для западно-азиатских языков).
      Новый элемент в HTML5.
      <ruby> Содержит аннотации сверху или снизу от текста, заключенного в тег <ruby> (для восточно-азиатских языков).
      Новый элемент в HTML5.
      <s>Содержит текст, который уже не актуален.
      <samp>Содержит результат вывода компьютерной программы или скрипта.
      <small>Определяет текст, написанный мелким шрифтом.
      <strike>Содержит перечеркнутый текст.
      Не поддерживается в HTML5. Рекомендуется использовать тег <del> или <s>.
      <strong>Подчеркивает важность выделенного фрагмента текста.
      <sub>Определяет текст с нижним индексом.
      <sup>Определяет текст с верхним индексом.
      <template>Определяет шаблон.
      <time>Определяет время/дату.
      Новый элемент в HTML5.
      <tt>Отображает шрифт моноширинным текстом.
      Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
      <u>Определяет текст, стилистически отличающийся от обычного текста.
      <var>Определяет математические/переменные величины.
      <wbr>Указывает браузеру, что при необходимости можно сделать перенос строки.
      Новый элемент в HTML5.

      Справочник тегов HTML5 для начинающих — WebNots

      Тег Описание HTML5
      Тег комментариев, используется для добавления комментариев внутри документа HTML5.
      Объявляет тип документа для правильного функционирования.
      Тег привязки для создания гиперссылок в тексте и изображениях.
      Используется для определения сокращения.
      <аббревиатура> Используется для определения аббревиатуры.
      <адрес> Адресная метка для ввода адресных полей.
      Используется для указания апплета. Устарело
      Используется для указания области внутри карты изображения.
      Тег для статьи в блоге. Да
      Помимо содержимого, обычно не влияющего на основное содержимое. Да
      Вставьте аудиофайлы на свою веб-страницу. Да
      Текст полужирный.
      Базовый URL для всех гиперссылок на веб-странице.
      Укажите базовое семейство шрифтов. Устарело
      Направление текста на дисплее.
      Двунаправленный ввод текста, обычно отличный от окружающего текста. Да
      Тег для добавления фоновой музыки на страницу.
      Для отображения большего текста.
      Для отображения мигающего текста.
      Цитата отображается в двойных кавычках.
      Основное тело HTML-страницы.
      Вставьте разрыв строки.
      Создайте элемент кнопки.
      Заполнитель для графики, созданной с помощью JavaScript. Да
      Для ввода заголовка таблицы.
      Выравнивание текстового содержимого по центру. Устарело
      Используется для указания цитирования для цитат.
      <код> Используется для указания машинного кода.
      Используется для атрибутов столбцов таблицы.
      Определите группы для столбца таблицы.
      Тег для предоставления предопределенных значений для тега .
      Термин определения, используемый для определения термина внутри списка описания.
      Используется для обозначения удаленного текстового содержимого.
      <детали> Для отображения дополнительной информации, которую можно показать или скрыть.
      Определите первый экземпляр термина внутри HTML-документа.
      Создает всплывающее диалоговое окно или модальное окно. Да
      Используется для указания списка каталогов. Устарело
      Раздел или раздел в документе HTML.
      Создайте список определений или описаний.
      Определяет термин в списке определений или описаний.
      Создание выделенного текста.
      Используется для создания контейнера для встраивания внешних ресурсов на страницу. Да
      Используется для группировки связанных полей в форме.
      Используется для создания заголовка для тега

      .
      Да
      Контейнер для хранения изображений, фотографий, иллюстраций и т. Д. Да
      Используется для указания размера шрифта и цвета текстовых элементов. Устарело
      Добавить нижний колонтитул в HTML-документ или раздел. Да
      Создайте форму.
      Создайте рамку окна в. Устарело
      Используется как контейнер для хранения одного или нескольких кадров. Устарело

      to

      Заголовок 1 — Заголовок 6
      Контейнер для всех элементов головки.
      Заголовок документа или раздела. Да

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