HTML5 ТЕГИ

Структура документа


<header>    Определяет «шапку» сайта или раздела
<article>    Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др.
<footer>    Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация
v
<nav>        Задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в
<nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов
<nav> в документе. Запрещается вкладывать
<nav> внутрь
<address>
<section>    Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Допускается вкладывать один тег
<section> внутрь другого.



Элементы уровня блока
v
<aside>        Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, если он расп олагается сбоку, называется, как правило, «сайдбар» или «боковая панель»
<figure>    Используется для группирования любых элементов, например, изображений и подписей к ним
<figcaption> Содержит описание для тега
<figure>. Тег
<figcaption> должен быть первым или последним элементом в группе.
<dialog>    служит для оформления диалога между несколькими собеседниками
<dl>
<dt>
<dd>

Семантические элементы уровня текста


<mark>        фрагмент текста отмечен каким-либо образом (необязательно подчеркнут), скажем, для выделения важных эпизодов в книге
<time>        Помечает текст внутри тега <time> как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime
<meter>
<progress>

Элементы мультимедиа


<video>
<audio>

Интерактивные элементы


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

?


<hgroup>    Используется для группирования заголовков веб-страницы или раздела
<canvas>
<keygen>
<main>        предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.
<meter>
<output>
<rp>        Элементы для поддержки языков Восточной Азии
<rt>        Элементы для поддержки языков Восточной Азии
<ruby>        Элементы для поддержки языков Восточной Азии
<source>
<summary>
<wbr>
iframe
<pre>
k b d        Пиш.слит.
Address        Если тэг
<address> помещен в элементе
<article> он указывает контактную информацию автора чей текст располагается в тэге article, если данный тэг располагается в тэге body он указывает контактную информацию автора целого документа

Элементы HTML5


<a href="#" class="scroll">Перейти к Съёмки фильма Полипропилен</a>

    <p class="info-display">Ширина экрана </p>

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

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

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

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

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

    <details>
        <summary>Флагманы 2015</summary>
        <ul>
            <li>iPhone 6S Plus</li>
            <li>Nexus 6P</li>
            <li>Galaxy S6 Edge</li>
            <li>Lumia 950 XL</li>
        </ul>
    </details>

    <article>
        <h2>Добро пожаловать!</h2>
        <p>Рада приветствовать вас на своем сайте.</p>
        
        <p>Опубликовано: <time datetime="2012-12-23T08:23:11+07:00">сегодня</time></p>
        <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
        
        <figure>
            <p><img src="http://placehold.it/100x100" alt="" /></p>
            <figcaption>Польский костёл</figcaption>
        </figure>

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

        <menu label="Правка">
            <button type="button">Копировать</button>
            <button type="button">Вырезать</button>
            <button type="button">Вставить</button>
        </menu>

        <menu>
            <command type="command checkbox radio" label="Use Command" title="Use Command does stuff" icon="/icons/command.png" onclick="alert('Слава роботам!')" >
        </menu>

        <dl>
            <dt>Онтология</dt>
            <dd>Раздел философии, изучающий фундаментальные принципы бытия</dd>
        </dl>

    </article>

    <footer>
        <address> 
            Контакты для связи <a href="mailto:js@example.com">Кристина</a>.
        </address>
        <p>© copyright 2016 Example Corp.</p>
    </footer>

Элементы управления HTML5

  • Элемент <form>...</form>Open or Close

  • Группировка элементов формы <fieldset>...</fieldset>Open or Close

  • Поля форм <input>...</input>Open or Close

  • Текстовые поля ввода <textarea>...</textarea>Open or Close

  • Раскрывающийся список <select>...</select>Open or Close

  • Надписи к полям формы <label>...</label>Open or Close

  • Кнопки <button>...</button>Open or Close