Структура HTML5

<header>Шапка</header> 
<nav>Главное меню</nav> 
<section id = “sidebar”>Сайдбар</section> 
<section id = “content”> 
<h1>Заголовок</h1> 
<aside>Второстепенная информация о статье</aside> 
<article>Сама статья</article> 
</section> 
<footer>Подвал</footer>

1

Тег <article>

Описание

Тег <article> задает содержание сайта вроде новости, статьи, записи блога, форума или др.

Синтаксис

<article>
</article>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

<article> История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось. </article>

Тег <aside>

Описание

Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель».

Синтаксис

<aside>
</aside>

Атрибуты

Для этого тега доступны универсальные атрибуты.

Закрывающий тег

Обязателен.

Пример

<style> aside {
background: #f0f0f0; 
padding: 10px; 
width: 200px; 
float: right; 
} 
article 
{ 
margin-right: 240px; 
display: block; 
}
 </style> 
<aside> 
<p>Экономьте электричество</p> 
<p>Хороший язык</p> 
<p>Чья палка больше</p> 
</aside>

Тег <audio>

Описание

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.

2

Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.

Синтаксис

<audio src="URL"></audio>
<audio>
<source src= "URL">
</audio>

Атрибуты

autoplay

Звук начинает играть сразу после загрузки страницы.

controls

Добавляет панель управления к аудиофайлу.

loop

Повторяет воспроизведение звука с начала после его завершения.

preload

Используется для загрузки файла вместе с загрузкой веб-страницы.

src

Указывает путь к воспроизводимому файлу.

Закрывающий тег

Обязателен.

Пример

<audio controls>
 <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
 <source src="audio/music.mp3" type="audio/mpeg"> Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>
</audio>

Тег <canvas>

Описание

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

Синтаксис

<canvas id="идентификатор">
</canvas>

Атрибуты

height

Задает высоту холста. По умолчанию 300 пикселов.

width

Задает ширину холста. По умолчанию 150 пикселов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

<canvas id="smile" width="200" height="200">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>

Тег <command>

Описание

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

Синтаксис

<menu>
<command параметры>
</menu>

Атрибуты

checked

Активирует команду. Доступно только если type установлен как radio или checkbox.

disabled

Задает, доступна команда или нет.

icon

Адрес картинки, которая показывается как команда.

label

Название команды.

radiogroup

Задает имя группы переключателей. Доступно только если type установлен как radio.

type

Определяет тип команды (checkbox, command, radio). По умолчанию command.

Закрывающий тег

Не нужен.

Пример

<command onclick="alert('Слава роботам!')" label="Выполнить директиву №1"> 
<command onclick="alert('Сдавайтесь, людишки!')" label="Выполнить директиву №2"> 
<command onclick="alert('Убить всех человеков!')" label="Выполнить директиву №3">

Тег <datalist>

Описание

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

Синтаксис

<input list="<идентификатор>">
<datalist id="<идентификатор>">
<option value="Текст1">
<option value="Текст2">
</datalist>

Атрибуты

Список, создаваемый тегом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list тега <input>.

Закрывающий тег

Обязателен.

Пример

<datalist id="character">
<option value="Чебурашка">
</option>
<option value="Крокодил Гена">
</option> 
<option value="Шапокляк">
</option>
</datalist>

Тег <details>

Описание

Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.

Синтаксис

<details open="open">Текст</details>

Атрибуты

open

Показывает информацию внутри тега.

Закрывающий тег

Обязателен.

Пример

<details>Покажи, что у тебя есть!</details>

Тег <figcaption>

Описание

Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.

Синтаксис

<figure>
<figcaption>Описание</figcaption>
</figure>

Атрибуты

Нет.

Закрывающий тег

Обязателен

Пример

<style>
figure { 
background: #d9dabb; /* Цвет фона */ 
display: block; /* Блочный элемент */ 
width: 150px; /* Ширина */ 
height: 190px; /* Высота */ 
float: left; /* Блоки выстраиваются по горизонтали */ 
margin: 0 10px 10px 0; /* Отступы */ 
text-align: center; /* Выравнивание по центру */ } 
figure img { 
border: 2px solid #8b8e4b; /* Параметры рамки */ }
figure p { margin-bottom: 0; /* Отступ снизу */ } 
</style> 
 
<figure>
<p>
<img src="images/thumb3.jpg" alt="">
</p>
<figcaption>Купеческий клуб</figcaption>
</figure>
<figure>
<p>
<img src="images/thumb4.jpg" alt="">
</p>
<figcaption>Памятник Св. Владимиру</figcaption>
</figure>

Тег <figure>

Описание

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

Синтаксис

<figure>

</figure>

Атрибуты

Нет

Закрывающий тег

Обязателен.

Пример

<style>
 figure { 
background: #5f6a72; /* Цвет фона */ 
padding: 10px; /* Поля вокруг */ 
display: block; /* Блочный элемент */ 
width: 150px; /* Ширина */ 
float: left; /* Блоки выстраиваются по горизонтали */ 
margin: 0 10px 10px 0; /* Отступы */ 
text-align: center; /* Выравнивание по центру */ } 
figcaption { color: #fff; /* Цвет текста */ } 
</style> 
 
<figure>
<p>
<img src="images/thumb1.jpg" alt="" />
</p>
<figcaption>Софийский собор</figcaption>
</figure>
<figure>
<p><img src="images/thumb2.jpg" alt="" />
</p>
<figcaption>Польский костел</figcaption>
</figure>

Тег <footer>

Описание

Тег <footer> задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

Синтаксис

<footer>
</footer>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

<footer> Copyright Кристина Ветрова </footer>

3

Тег <header>

Описание

Тег <header> задает «шапку» сайта или раздела, в которой обычно располагается заголовок.

Синтаксис

<header>
</header>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

<header> 
<h1>Персональный сайт Кристины Ветровой</h1>
</header>

3

Тег <hgroup>

Описание

Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>. Данный тег исключён из версии HTML от W3C, но остался в версии WHATWG, будущее элемента пока не определено.

Синтаксис

<hgroup>
</hgroup>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

<hgroup> 
<h1>Кристина Ветрова</h1> 
<h2>Персональный сайт</h2> 
</hgroup>

Тег <keygen>

Описание

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

Синтаксис

<form>
<keygen> </keygen>
</form>

Атрибуты

autofocus

Передает фокус элементу при загрузке страницы.

challenge

Определяет, должно ли значение изменяться при отправке формы.

disabled

Отключает этот элемент.

form

Идентификатор формы к которой применяется шифрование.

keytype

Задает алгоритм шифрования ключа. К примеру, значение rsa использует криптографический алгоритм RSA.

name

Имя элемента.

Закрывающий тег

Не обязателен.

Тег <main>

Описание

Элемент <main> предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.

Синтаксис

<main></main>

Атрибуты

Для этого тега доступны только универсальные атрибуты.

Закрывающий тег

Обязателен

Пример

<h1>Следы невиданных зверей</h1>
<main> История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось. </main>

Тег <mark>/h1>

Описание

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Синтаксис

<mark>текст</mark>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

<style> mark {
background: #ffec82; 
padding: 0 3px; 
border: 1px dashed #333; 
} </style> 
 
<mark>шестью пальцами</mark>

3

Тег <menu>

Описание

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.
В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

Синтаксис

3

Атрибуты

label

Устанавливает видимую метку для меню.

type

Задает тип меню.

Закрывающий тег

Обязателен.

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 применение тега <menu> корректно.

Пример 1

<menu> 
<li>Русская кухня. Уха бурлацкая</li> 
<li>Украинская кухня. Вареники</li> 
<li>Молдавская кухня. Паприкаш</li>
 <li>Кавказская кухня. Суп-харчо</li> 
<li>Прибалтийская кухня. Вертиняй</li> 
</menu>

3

Пример 2

<body> 
<menu type="toolbar"> 
<li> 
<menu label="Файл"> 
<button type="button">Новый...</button> 
<button type="button">Открыть...</button> 
<button type="button">Сохранить</button> 
</menu> 
</li> 
<li> <menu label="Правка"> 
<button type="button">Копировать</button> 
<button type="button">Вырезать</button> 
<button type="button">Вставить</button> 
</menu> 
</li> 
</menu> 
</body>

Тег <meter>

Описание

Используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.

Синтаксис

<meter value="значение">текст</meter>

Атрибуты

value

Устанавливает значение. Обязательный атрибут.

min

Задает минимально возможное значение.

max

Задает максимально возможное значение.

low

Определяет предел, при достижении которого значение считается низким.

high

Определяет предел, при достижении которого значение считается высоким.

optimum

Определяет наилучшее или оптимальное значение.

Закрывающий тег

Обязателен.

Пример

<meter value="0" max="100" low="10" high="60">Низкая</meter>
<meter value="30" max="100" low="10" high="60">Нормальная</meter>
<meter value="80" max="100" low="10" high="60">Горячая</meter> 
<meter value="100" max="100">Кипяток</meter>

3

Тег <nav>

Описание

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

Синтаксис

<nav>ссылки</nav>

Атрибуты

Нет

Закрывающий тег

Обязателен

Пример

<nav>
<a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
<a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a>
</nav>

3

Тег <output>

Описание

Определяет область в которую выводится информация, преимущественно с помощью скриптов.

Синтаксис

<output>
</output>

Атрибуты

for

Определяет идентификатор одного и более элементов для связывания с тегом <output>.

form

Задает имя формы, которой принадлежит область для вывода.

name

Задает уникальное имя элемента.

Закрывающий тег

Обязателен

Пример

<p>Длина в дюймах: <output name="result">0</output>
</p>

3

Тег <progress>

Описание

Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.

Синтаксис

<progress value="<число>" max="<число>">
Текст
</progress>

Атрибуты

value

Текущее значение прогресса.

max

Максимальное значение прогресса.

Закрывающий тег

Обязателен

Пример

<progress max="100" value="25"> Загружено на <span id="value">25</span>% </progress>

3

Тег <rp>

Описание

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>. В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти до или после тега <rp>.

Синтаксис

<ruby>
текст
<rp>текст</rp><rp>аннотация</rp><rp>текст</rp>
</ruby>

Атрибуты

Нет.

Закрывающий тег

Не обязателен, если идет последним.

Пример

<rp>(</rp><rt>zì</rt><rp>)</rp>

Тег <rt>

Описание

Тег <rt> добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом.
Такая форма записи преимущественно используется для азиатских языков вроде китайского или японского, но также может применяться для других языков, если требуется написать один текст над другим.

Синтаксис

<ruby>
текст
<rt>аннотация</rt>
</ruby>

Атрибуты

Нет.

Закрывающий тег

Не обязателен, если идет последним.

Пример

<style> 
.date { font-size: 1.5em; } 
.date ruby { background: #0078c9; color: #fff; } 
.date rt { background: #a0dae8; color: #000; padding: 2px; } 
</style> 
23<rt>ноябрь</rt></ruby>

3

Тег <ruby>

Описание

Тег <ruby> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.
Сам тег <ruby> выступает контейнером для тега <rt>, он и формирует аннотацию к тексту, после которого идет; а также <rp>, этот тег предназначен для браузеров, которые не поддерживают <ruby>.
Название тега происходит от слова «рубин», которым в типографии обозначается небольшой шрифт.

Синтаксис

<ruby>
текст
<rt>аннотация</rt>
<ruby>

Атрибуты

Нет.

Закрывающий тег

Обязателен

Пример

<style> 
p:lang(zh-CN) {
 font-size: 2em; 
} 
</style>
 
<ruby> 汉<rt>hàn</rt> 字<rt>zì</rt> </ruby>

3

Тег <section>

Описание

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого.

Синтаксис

<section>
</section>

Атрибуты

Для этого тега доступны глобальные атрибуты и события.

Закрывающий тег

Обязателен

Пример

<section> 
<h1>Съёмки фильма Полипропилен</h1> 
<p>История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.</p>
 </section> 
<section> <h1>Хороший язык</h1> 
<p>История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.</p> 
</section>

Тег <source>

Описание

Вставляет звуковой или видеофайл для тегов <audio> и <video>. Обобщенно такие файлы называются медийными.

Синтаксис

<audio>
<source src="URL">
</audio>
<video>
<source src="URL">
</video>

Атрибуты

media

Определяет устройство, для которого будет воспроизводиться файл.

src

Адрес файла.

type

MIME-тип медийного источника.

Закрывающий тег

Не обязателен.

Пример

<video width="400" height="300" controls="controls"> 
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>
</video>

3

Тег <summary>

Описание

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации. Тег <summary> должен идти первым внутри <details>.

Синтаксис

<details>
<summary>Текст</summary>
</details>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

<summary>Информация об авторе</summary>

Тег <time>

Описание

Помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.

Синтаксис

<time>дата и время</time>
<time datetime="<дата и время>">текст</time>

Атрибуты

datetime

Задает дату, время или оба значения для текста.

pubdate

Указывает дату публикации документа.

Закрывающий тег

Обязателен.

Пример

<style> time {
 background: #f0f0f0;
 }
</style>
 
<p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
<p><time>1960-08-19</time> первый полет собак в космос.</p> 
<p><time>1961-04-12</time> первый полет человека в космос.</p> 
<p><time>1963-06-16</time> первый полет женщины-космонавта.</p> 
<p><time>1969-07-21</time> высадка человека на Луну.</p>

Тег <video>

Описание

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег.Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в табл. 1.
Табл. 1. Кодеки и браузеры
3
Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).

Синтаксис

<video>
<source src="URL">
</video>

Атрибуты

autoplay

Видео начинает воспроизводиться автоматически после загрузки страницы

controls

Добавляет панель управления к видеоролику.

height

Задает высоту области для воспроизведения видеоролика.

loop

Повторяет воспроизведение видео с начала после его завершения.

poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.

preload

Используется для загрузки видео вместе с загрузкой веб-страницы.

src

Указывает путь к воспроизводимому видеоролику.

width

Задает ширину области для воспроизведения видеоролика.

Закрывающий тег

Обязателен.

Пример

<video width="400" height="300" controls="controls" poster="video/duel.jpg"> 
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a> 
</video>

3

Тег <wbr>

Описание

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Синтаксис

Текст<wbr>текст

Закрывающий тег

Не требуется.

Атрибуты

Нет.

Пример

<p class="word">метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>

3

Пример

<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8">
   <title></title>
    <meta name="author" content="" />
    <meta name="description" content="" />
  <link rel="stylesheet" href="assets/css/style.css" />
   <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
 <body>
    <header>
        <h1><a href="/">Page Title</a></h1>
        <nav>
            <ol>
                <li><a href="">Nav Link 1</a></li>
                <li><a href="">Nav Link 2</a></li>
                <li><a href="">Nav Link 3</a></li>
            </ol>
        </nav>
    </header>
    <article>
        <h1>Article Header</h1>
        <p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>
         <h2>Article Subhead</h2>
        <p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>
     </article>
     <aside>
        <h2>Sidebar Content</h2>
    </aside>
     <footer>
        <p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
    </footer>
 </div>
 <script src="scripts/js/scripts.js"></script>
</body>
</html>

Добавить комментарий