Энциклопедия HTML5 » Теги HTML5 http://html-5.ru Сайт HTML-5.ru - это онлайн учебник и справочник по HTML5 (2015 года). Thu, 02 Jul 2015 19:46:05 +0000 ru-RU hourly 1 https://wordpress.org/?v=4.2.26 Footer HTML5 http://html-5.ru/teg-footer-html5 http://html-5.ru/teg-footer-html5#comments Mon, 22 Jun 2015 10:47:07 +0000 http://html-5.ru/?p=98 Тег footer в языке HTML5 Тег footer в HTML5, обрамляет подвал, на странице сайта. В тегах <footer> </footer> оычно содержится инфрмация относящаяся к самому сайту, а не к основному контенту, например: правовая информация (копирайты), имя автора, название сайта и/или компании, телефон и/или адрес компании и т.п. Приведём пример расположения тегов footer в типичном коде шаблона... Читать далее

Запись Footer HTML5 впервые появилась Энциклопедия HTML5.

]]> Тег footer в языке HTML5

Тег footer в HTML5, обрамляет подвал, на странице сайта.

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

Приведём пример расположения тегов footer в типичном коде шаблона страницы, созданной с помощью языка HTML5:

<!DOCTYPE html>
<html lang="ru">
    
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="css/normalize.css" />
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">
            <header>Шапка страницы</header>

            <nav>Основное меню страницы</nav>
            
            <div class="main">
                <article>Основная статья страницы</article>
                <aside>Сайдбар</aside>
            </div> <!-- .main -->
            
            <footer>
                Подвал страницы
            </footer>
        
        </div> <!-- .wrapper -->
    </body>
</html>

Тег footer — это блочный элемент.
Семантика — используется для обозначения подвала страницы сайта, где располагается так называемая служебная информация.

Запись Footer HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-footer-html5/feed/ 0 Aside HTML5 http://html-5.ru/teg-aside-html5 http://html-5.ru/teg-aside-html5#comments Mon, 22 Jun 2015 08:18:47 +0000 http://html-5.ru/?p=94 Тег aside в языке HTML5 Тег aside в HTML5, обрамляет боковую панель (сайдбар), на странице сайта. Тегами <aside> </aside> оычно обрамляют блок виджетов на сайте. В качестве виджетов могут выступать: блок категориев, меток, последних записей, последних комментариев, популярных страниц, поисковая строка и т.п. Приведём пример возможного расположения тегов aside в типичном коде шаблона страницы, созданной... Читать далее

Запись Aside HTML5 впервые появилась Энциклопедия HTML5.

]]> Тег aside в языке HTML5

Тег aside в HTML5, обрамляет боковую панель (сайдбар), на странице сайта.

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

Приведём пример возможного расположения тегов aside в типичном коде шаблона страницы, созданной с помощью языка HTML5:

<!DOCTYPE html>
<html lang="ru">
    
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="css/normalize.css" />
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">
            <header>Шапка страницы</header>

            <nav>Основное меню страницы</nav>
            
            <div class="main">
                <article>Основная статья страницы</article>
                
                <aside>
                    Сайдбар
                </aside>
            
            </div> <!-- .main -->
            
            <footer>Подвал страницы</footer>
        </div> <!-- .wrapper -->
    </body>
</html>

Сайдбар можно расположить не только сбоку, но и внизу над подвалом страницы.

Тег aside — это блочный элемент.
Семантика — используется для обозначения сопутствующей информации основной статьи страницы сайта, но при этом не являющейся частью основной статьи.

Запись Aside HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-aside-html5/feed/ 0 Section HTML5 http://html-5.ru/teg-section-html5 http://html-5.ru/teg-section-html5#comments Mon, 22 Jun 2015 07:35:58 +0000 http://html-5.ru/?p=92 Тег section в языке HTML5 Тег section в HTML5, может обрамлять повторяющиеся элементы (разделы), на странице сайта. Данный тег довольно сложен для понимания, попробуем разобраться когда же его применять. Теги <section> </section> могут обрамлять комментарии на сайте, ответы темы на форуме, анонсы (цитаты) новостей или постов на главной странице, страниц категориев, меток и т.д. Также... Читать далее

Запись Section HTML5 впервые появилась Энциклопедия HTML5.

]]> Тег section в языке HTML5

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

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

Приведём пример возможного расположения тегов section в типичном коде шаблона страницы, созданной с помощью языка HTML5:

<!DOCTYPE html>
<html lang="ru">
    
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="css/normalize.css" />
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">
            <header>Шапка страницы</header>

            <nav>Основное меню страницы</nav>
            
            <div class="main">

                <section>
                    анонс поста 1
                </section>

                <section>
                    анонс поста 2
                </section>

                <section>
                    анонс поста 3 и т.д.
                </section>

                <aside>Сайдбар</aside>
            </div> <!-- .main -->

            <footer>Подвал страницы</footer>
        </div> <!-- .wrapper -->
    </body>
</html>

Тег section — это блочный элемент.
Семантика — используется для обозначения повторяющихся блоков на сайте.

Запись Section HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-section-html5/feed/ 0 Nav HTML5 http://html-5.ru/teg-nav-html5 http://html-5.ru/teg-nav-html5#comments Tue, 16 Jun 2015 08:15:43 +0000 http://html-5.ru/?p=88 Тег nav в HTML5 Тег nav в HTML5, обозначет основное меню сайта (панель навигации). Обычно тегами <nav> </nav> обрамляют основное меню страницы сайта, которое расположено сразу под шапкой сайта. В меню nav, обычно располагают ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д. Рассмотрим... Читать далее

Запись Nav HTML5 впервые появилась Энциклопедия HTML5.

]]> Тег nav в HTML5

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

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

Рассмотрим расположение тегов nav в типичном коде шаблона страницы, созданной с помощью языка HTML5:

<!DOCTYPE html>
<html lang="ru">
    
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="css/normalize.css" />
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">
            <header>Шапка страницы</header>

            <nav>
                Основное меню страницы
            </nav>
            
            <div class="main">
                <article>Основная статья страницы</article>
                <aside>Сайдбар</aside>
            </div> <!-- .main -->
            
            <footer>Подвал страницы</footer>
        </div> <!-- .wrapper -->
    </body>
</html>

Тег nav — это блочный элемент.
Семантика — используется для обозначения наиболее важного блока ссылок на сайте.

Запись Nav HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-nav-html5/feed/ 0 Header HTML5 http://html-5.ru/teg-header-html5 http://html-5.ru/teg-header-html5#comments Tue, 16 Jun 2015 06:26:50 +0000 http://html-5.ru/?p=85 Тег header в HTML5 Тег header в HTML5, обозначет шапку сайта. Обычно тегами <header> </header> обрамляют шапку страницы сайта. В шапке страницы сайта чаще всего располагают заголовок (девиз, слоган компании), логотип сайта (компании), контактную информацию (телефоны, часы работы). В шапке сайта можно встретить ссылки на: карту проезда, заказать звонок, поисковую строку и различные элементы типа... Читать далее

Запись Header HTML5 впервые появилась Энциклопедия HTML5.

]]> Тег header в HTML5

Тег header в HTML5, обозначет шапку сайта. Обычно тегами <header> </header> обрамляют шапку страницы сайта.

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

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

Теги header нельзя помещать внутрь тегов footer, address и сам header

Рассмотрим расположение тегов header в типичном коде шаблона страницы, созданной с помощью языка HTML5:

<!DOCTYPE html>
<html lang="ru">
    
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="css/normalize.css" />
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">
            <header>
                Шапка страницы
            </header>
            
            <nav>Основное меню страницы</nav>
            
            <div class="main">
                <article>Основная статья страницы</article>
                <aside>Сайдбар</aside>
            </div> <!-- .main -->
            
            <footer>Подвал страницы</footer>
        </div> <!-- .wrapper -->
    </body>
</html>

Тег header — это блочный элемент.
Семантика — может быть использована как шапка страницы, статьи, какой-либо секции на сайте (например виджета).

Запись Header HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-header-html5/feed/ 0 Тег source HTML5 http://html-5.ru/teg-source-html5 http://html-5.ru/teg-source-html5#comments Fri, 12 Jun 2015 14:57:05 +0000 http://html-5.ru/?p=30 Элемент <source> </source> В HTML5 добавили новый тег source, он создан для решения проблемы поддержки браузерми различных аудио/видео форматов. Тег <source /> размещают между тегами <audio> </audio> и <video> </video> Примеры кода тега source в тегах audio и video Пример добавления аудиофайла при помощи тега <audio>: <audio controls="controls"> <source src="baauer-harlem-shake.ogg" /> <source src="baauer-harlem-shake.mp3" /> </audio>... Читать далее

Запись Тег source HTML5 впервые появилась Энциклопедия HTML5.

]]> Элемент <source> </source>

В HTML5 добавили новый тег source, он создан для решения проблемы поддержки браузерми различных аудио/видео форматов.

Тег <source /> размещают между тегами <audio> </audio> и <video> </video>

Примеры кода тега source в тегах audio и video

Пример добавления аудиофайла при помощи тега <audio>:

<audio controls="controls">
    <source src="baauer-harlem-shake.ogg" />
    <source src="baauer-harlem-shake.mp3" />
</audio>

Результат:

Пример добавления видеофайла при помощи тега <video>:

<video width="560" height="315" controls="controls" poster="teg-video.jpg">
    <source src="norwegian-army-harlem-shake.ogv" />
    <source src="norwegian-army-harlem-shake.mp4" />
</video>

Результат:

На данный момент каждый браузер поддерживает только определённые аудио/видео форматы. Чтобы аудио/видеофайлы работали в каждом браузере, придумали тег <source />, который может указать путь на одну и ту же аудио/видеозапись, но записанную в разных форматах.

Для того чтобы аудио/видеофайлы работали во всех существующих популярных браузерах: FireFox, Opera, Chrome, Internet Explorer, Safari, достаточно лишь два аудио/видео формата, для аудио это .ogg и .mp3, для видео это .ogv и .mp4

Атрибуты тега <source />

media="all/braille/handheld/print/screen/speech/projection/tty/tv"
указывает на устройство, которое будет воспроизводить файл, по умолчанию имеет значение all
Определения значений:
all — все устройства,
braille — устройства созданные по системе Брайля,
handheld — планшетники, смартфоны,
print — принтеры,
screen — экран монитора,
speech — устройства воспроизводящие звук наподобие речевых синтезаторов, программ, браузеров,
projection — проекторы,
tty — телетайпы, терминалы и портативные устройства с ограниченными возможностями экрана,
tv — телевизоры.

src="адрес" — указывает путь к файлу.

type="mime-type; codecs='кодек'" — указывает на mime-type мультимедиа файла и его аудио/видео кодек, значения по умолчанию не имеет.

Значения арибута type=" " в зависимости от кодека:

Видео кодек Аудио кодек Контейнер Атрибут type
vorbis ogg type="audio/ogg; codecs='vorbis'"
speex ogg type="audio/ogg; codecs='speex'"
flac ogg type="audio/ogg; codecs='flac'"
mp3 type="audio/mpeg"
h.264 aac mp4 type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"
theora vorbis ogg type="video/ogg; codecs='theora, vorbis'"
theora speex ogg type="video/ogg; codecs='theora, speex'"
theora vorbis matroska type="video/x-matroska; codecs='theora, vorbis'"
vp8 vorbis webm type="video/webm; codecs='vp8, vorbis'"

Читать далее: тег audio

Запись Тег source HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-source-html5/feed/ 0 Тег video HTML5 http://html-5.ru/teg-video-html5 http://html-5.ru/teg-video-html5#comments Fri, 12 Jun 2015 14:53:43 +0000 http://html-5.ru/?p=28 Элемент <video> </video> В HTML5 добавили новый тег video, он отвечает за воспроизведение видеофайлов на веб-странице, причем для воспроизведения видеофайлов не нужны дополнительные плагины или кодеки сторонних производителей, поддержка видеофайлов уже включена в спецификацию HTML5. Пример кода тега <video> Пример добавления видеофайла при помощи тега <video>: <video width="560" height="315" controls="controls" poster="teg-video.jpg"> <source src="norwegian-army-harlem-shake.ogv" /> <source... Читать далее

Запись Тег video HTML5 впервые появилась Энциклопедия HTML5.

]]> Элемент <video> </video>

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

Пример кода тега <video>

Пример добавления видеофайла при помощи тега <video>:

<video width="560" height="315" controls="controls" poster="teg-video.jpg">
    <source src="norwegian-army-harlem-shake.ogv" />
    <source src="norwegian-army-harlem-shake.mp4" />
</video>

Результат:

Автор ролика: Норвежская армия,
Название: Garlem Shake.
Скачать файл можно c Яндекс.Диска: в формате OGG, в формате MP4,
Постер: http://yadi.sk/d/i24KhBiT3o0Vb

Тег <source /> содержит в себе атрибут src=" ", чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег <source /> указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение. Если ваш браузер не поддерживает файлы с расширением .ogv, то он будет проигрывать файлы с расширением .mp4

Таблица поддержки браузерами видео кодеков и форматов

Каждый браузер поддерживает только определённые видео форматы, поэтому если вы хотите чтобы ваши ролики можно было просмотреть на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp4, а другой с расширенеим .ogv

БРАУЗЕР/КОДЕК h.264 ogg/vorbis webm
Chrome 6+ да да да
FireFox 3.6+ нет да да
IE 9+ да нет нет
Opera 10.60+ нет да да
Safari 4+ да нет нет

У видео формата OGG/VORBIS, расширение файлов будет .ogv
У видео формата h.264, расширение файлов будет .mp4

DVDVideoSoft — бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.

Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…

Атрибуты тега <video>

autoplay="autoplay" — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :)).

controls="controls" — создает панель управления видеофайлом, по умолчанию атрибут отключён.

height=" " — задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение 150px или равен высоте постера, если задан атрибут poster=" ".

width=" " — задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение 300px или равен ширине постера, если задан атрибут poster=" ".

loop="loop" — заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

poster="адрес" — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.

preload="auto/metadata/none" — загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto — загружает видеофайл,
metadata — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д.,
none — не загружает видеофайл.
Атрибут preload=" " не работает, если включен атрибут autoplay=" "

src="адрес" — указывает путь к видеофайлу.

В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.

Тегом video можно управлять через CSS.

Читать далее: тег source

Запись Тег video HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-video-html5/feed/ 0 Тег audio HTML5 http://html-5.ru/teg-audio-html5 http://html-5.ru/teg-audio-html5#comments Fri, 12 Jun 2015 14:51:43 +0000 http://html-5.ru/?p=26 Элемент <audio> </audio> В HTML5 добавили новый тег audio, он отвечает за воспроизведение аудиофайлов на веб-странице, причем для воспроизведения аудиофайлов не нужны дополнительные плагины или кодеки сторонних производителей, поддержка аудиофайлов уже включена в спецификацию HTML5. Пример кода тега <audio> Пример добавления аудиофайла при помощи тега <audio>: <audio controls="controls"> <source src="baauer-harlem-shake.ogg" /> <source src="baauer-harlem-shake.mp3" /> </audio>... Читать далее

Запись Тег audio HTML5 впервые появилась Энциклопедия HTML5.

]]> Элемент <audio> </audio>

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

Пример кода тега <audio>

Пример добавления аудиофайла при помощи тега <audio>:

<audio controls="controls">
    <source src="baauer-harlem-shake.ogg" />
    <source src="baauer-harlem-shake.mp3" />
</audio>

Результат:

Автор трека: Baauer,
Название: Garlem Shake.

Скачать файл можно c Яндекс.Диска: в формате OGG, в формате MP3.

Тег <source /> содержит в себе атрибут src=" ", чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег <source /> указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение (формат). Если ваш браузер не поддерживает файлы с расширением .ogg, то он будет проигрывать файлы с расширением .mp3 и наоборот.

Таблица поддержки браузерами аудио кодеков и форматов

Каждый браузер поддерживает только определённые аудио форматы, поэтому если вы хотите чтобы ваша музыка могла звучать на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp3, а другой с расширенеим .ogg

БРАУЗЕР/КОДЕК aac mp3 ogg/vorbis wav
Chrome 6+ да да да нет
FireFox 3.6+ нет нет да да
IE 9+ да да нет нет
Opera 10.60+ нет нет да да
Safari 4+ да да нет да

DVDVideoSoft — бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.

Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…

Атрибуты тега <audio>

autoplay="autoplay" — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :))

controls="controls" — создает панель управления аудиофайлом, по умолчанию атрибут отключён.

loop="loop" — заного запускает аудиофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

preload="auto/metadata/none" — загружает аудиофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none

    Определения значений атрибута preload=" ":

  • auto — загружает аудиофайл
  • metadata — загружает только служебную информацию
  • none — не загружает аудиофайл

Атрибут preload=" " не работает, если включен атрибут autoplay=" "

src="адрес" — указывает путь к аудиофайлу.

Читать далее: тег video

Запись Тег audio HTML5 впервые появилась Энциклопедия HTML5.

]]> http://html-5.ru/teg-audio-html5/feed/ 0