Figure html5

Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальные атрибуты.

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

  • Мета содержимое
  • Потоковое содержимое
  • Секционное содержимое
  • Заголовочное содержимое
  • Текстовое содержимое
  • Встроенное содержимое
  • Интерактивное содержимое

Описание HTML5-элементов

  • Содержание:
  • 1. Элемент <header>
  • 2. Элемент <nav>
  • 3. Элемент <article>
  • 4. Элемент <section>
  • 5. Элемент <aside>
  • 6. Элемент <footer>
  • 7. Элемент <address>
  • 8. Элемент <main>
  • 9. Элемент <figure>
  • 10. Элемент <figcaption>
  • 11. Элемент <time>
  • 12. Элемент <mark>
  • 13. Элемент <bdi>
  • 14. Элемент <wbr>
  • 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header>   <h1>Site description</h1>   <nav>   <ul>   <li><a href="">About</a>   <li><a href="">Forum</a>   <li><a href="">Download</a>   </ul>   </nav>  </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>   <h1>Заметки о природе</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>  <section>   <h1>Исторические заметки</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside>   <h2>...</h2>   <p>...</p>  </aside>
<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

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

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <li><a href="#app">Внешний вид</a></li>   <li><a href="#temp">Характер</a></li>   </ul>   </nav>   </header>   <section id="basic">   <h3>Разновидности</h3>   <p>...</p>   </section>   <section id="app">   <h3>Внешний вид</h3>   <p>...</p>   </section>   <section id="temp">   <h3>Характер</h3>   <p>...</p>   </section>   <footer>   <a href="#basic">Разновидности</a>   <a href="#app">Внешний вид</a>   <a href="#temp">Характер</a>   </footer>   </section>   </main>   <footer>   <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>   </footer>  </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

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

14. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru

HTML5 Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

Не используйте тег <section> в качестве обёртки для оформления

Одна из наиболее общих проблем, замеченных мною, — банальная замена <div>’ов на структурные элементы HTML5, особенно на <section>’ы. Т.е. когда то, что в XHTML или HTML4 выглядит так:

<!-- Код в стиле HTML 4 -->  <div id="wrapper">   <div id="header">    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </div>   <div id="main">   <!-- Контент страницы -->   </div>   <div id="secondary">   <!-- Дополнительный контент -->   </div>   <div id="footer">   <!-- Содержиме футера -->   </div>  </div>  

Переписывают так:

<!-- Не используйте этот код! Он неверен! -->  <section id="wrapper">   <header>    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </header>   <section id="main">   <!-- Контент страницы -->   </section>   <section id="secondary">   <!-- Дополнительный контент -->   </section>   <footer>   <!-- Содержимое футера -->   </footer>  </section>

Это просто неправильно: <section> не обёртка. Этот элемент означает семантический блок Вашего контента, использующийся для построения «структуры документа» (document outline), и должен содержать заголовок. Если Вам нужен элемент для обёртки, попробуйте обойтись <body> (Kroc Camen может предложить кое-что). Если это не решает проблему необходимости дополнительных обёрток, используйте старые добрые <div>’ы. С приходом HTML5 <div>’ы не умерли, и именно они отлично подходят в этом случае.

Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:

<body>   <header>    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </header>   <div role="main">   <!-- Контент страницы -->   </div>   <aside role="complementary">   <!-- Дополнительный контент -->   </aside>   <footer>   <!-- Содержимое футера -->   </footer>  </body>

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

Используйте <header> и <hgroup> только при необходимости

Нет смысла писать код, если в этом нет необходимости, правда? Увы, но я часто наблюдаю, как <header> и <hgroup> там, где они не нужны. Вы можете почитать об элементах <header> и <hgroup> подробнее, я же коротко обозначу ключевые моменты:

  • Элемент <header> представляет группу вводных или навигационных средств и обычно содержит заголовок секции
  • Элемент <hgroup> группирует набор элементов <h1>-<h6>, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)
Избыток элементов <header>

Я уверен, Вы прекрасно знаете, что элемент <header> можно использовать несколько раз в документе. Поэтому часто встречается такое:

<!-- Не используйте этот код! Здесь header не нужен! -->  <article>   <header>    <h1>My best blog post</h1>   </header>   <!-- Содержимое статьи -->  </article>

Если Ваш <header> содержит только один заголовочный элемент, то он не нужен. В данном случае элемент <article> уже гарантирует, что заголовок будет включен в «структуру документа» (document outline), и раз <header> не содержит нескольких элементов (согласно определению), его можно безопасно удалить. Достаточно просто этого:

<article>    <h1>My best blog post</h1>   <!-- Содержимое статьи -->  </article>
Неправильное использование <hgroup>

И снова о заголовках: я часто вижу некорректное использование элемента <hgroup>. Не следует использовать <hgroup> вместе с <header>, если:

  • Присутствует только один заголовок
  • <hgroup> хорош сам по себе (т.е., без <header>).

Первый случай:

<!-- Не используйте этот код! Здесь hgroup не нужен -->  <header>   <hgroup>    <h1>My best blog post</h1>   </hgroup>   <p>by Rich Clark</p>  </header>

В этом случае просто уберите hgroup.

<header>   <h1>My best blog post</h1>   <p>by Rich Clark</p>  </header>

Второй случай — это еще один пример использования элемента без необходимости.

<!-- Не используйте этот код! Здесь header не нужен -->  <header>   <hgroup>    <h1>My company</h1>   <h2>Established 1893</h2>   </hgroup>  </header>

Если единственный ребёнок <header>’а это <hgroup>, зачем нужен <header>? Если у Вас нет дополнительных элементов в <header>’е (т.е. сестринских по отношению к <hgroup>), просто уберите <header>.

<hgroup>   <h1>My company</h1>   <h2>Established 1893</h2>  </hgroup>

Подробнее об элементе <hgroup> можно почитать тут.

Не обрамляйте все ссылки в <nav>

В HTML5 было введено 30 новых элементов, чтобы дать нам возможность создавать структурированную и осмысленную разметку. Но не следует злоупотреблять новыми семантическими элементами. К сожалению, это как раз то, что происходит с <nav>. Спецификация описывает <nav> так:

Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).

Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации. Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc). В этом случае одного footer’а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.

WHATWG HTML spec

Ключевая фраза — «основная навигация». Можно долго спорить о том, что понимать под основной, но для меня это:

  • Первичная навигация
  • Поиск по сайту
  • Вторичная навигация (спорно)
  • Внутристраничная навигация (внутри длинной статьи, например)

Хотя в этом случае сложно судить, что есть правильно, а что — нет, я считаю, что не стоит заключать в <nav>:

  • Переключатели страниц
  • Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
  • Теги поста
  • Категории поста
  • Третичная навигация
  • Объемные футеры

Если Вы не уверены, обрамлять ли список ссылок в <nav>, задайте себе вопрос: «Это основная навигация?». Примите во внимание следующее:

  • “Не используйте <nav>, если Вы считаете, что <section> с заголовком <hx> тоже подойдёт” — Hixie в IRC
  • Возможно стоит добавить «Перейти к» для удобства?

Если ответ на эти вопросы — «Нет», это, видимо, не место для <nav>.

Общие ошибки в использовании элемента <figure>

Ах, <figure>. Разобраться с правильным использованием этого элемента, как и его собрата <figcaption>, непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.

Не каждое изображение <figure>

Ранее, я советовал не писать больше кода, чем необходимо. Здесь похожая ситуация. Я встречал сайты, где каждая картинка была обрамлена в <figure>. Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.

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

Вышеупомянутая блок-схема выбора элемента поможет Вам справиться с <figure>.

Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно не <figure>. Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не <figure> (возможно, <aside>). Если да, спросите себя, «Могу ли я переместить это в приложение?». Если ответ на оба вопроса Да, то, возможно, <figure> подойдёт.

Ваш логотип — не <figure>

Тоже самое касается и логотипа. Часто я вижу такое применение:

<!-- Не используйте этот код! Он неверен! -->  <header>   <h1>   <figure>   <img src="/img/mylogo.png" alt="My company" class="hide" />   </figure>   My company name   </h1>  </header>
<!-- Не используйте этот код! Он неверен! -->  <header>    <figure>   <img src="/img/mylogo.png" alt="My company" />   </figure>  </header>

Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в <h1>, но мы сейчас не об этом. Настоящая ошибка — злоупотребление элементом <figure>. <figure> следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:

<header>   <h1>My company name</h1>   <!-- Еще что-нибудь -->  </header>
<figure> может быть не только изображением

Другой частый случай недопонимания элемента <figure> заключается в предположении, что его можно применять только для картинок. Но это не так. В <figure> может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании <figure> одними картинками. Наша задача как приверженцев веб-стандартов — описать контент нашей разметки.

Не так давно я писал об элементе <figure> подробнее. Советую почитать, если Вы хотите разобраться получше или освежить воспоминания.

Не используйте ненужный атрибут type

Это, возможно, наиболее общая проблема, встречаемая в HTML5 галерее. Хотя это и не ошибка, я считаю, что лучше избегать этого.

В HTML5 нет необходимости указывать атрибут type для элементов <script> и <style>. Хотя от них может быть непросто избавиться, если они автоматически добавляются Вашей CMS, нет смысла включать их в код, если Вы пишете его самостоятельно или можете управлять шаблонами. Т.к. все браузеры по-умолчанию считают, что все скрипты написаны на JavaScript, а стили — это CSS, такая разметка становится избыточной:

<!-- Не используйте этот код! Его разметка перегружена! -->  <link type="text/css" rel="stylesheet" href="css/styles.css" />  <script type="text/javascript" src="js/scripts"></script>

Вместо этого Вы можете просто написать:

<link rel="stylesheet" href="css/styles.css" />  <script src="js/scripts"></script>

Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.

Некорректное использование атрибутов форм

Вы, должно быть, уже в курсе, что в HTML5 введено множество новых атрибутов форм. Мы рассмотрим их в ближайшее время, сейчас же я коротко расскажу, как делать не стоит.

Логические атрибуты

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

Некоторые из новых атрибутов форм являются логическими, т.е. их наличие в разметке определяет поведение элементов. В том числе это:

  • autofocus
  • autocomplete
  • required

Я редко встречаю их, но в случае с required я видел такое:

<!-- Не используйте этот код! Он неверен! -->  <input type="email" name="email" required="true" />
<!-- Еще один плохой пример -->  <input type="email" name="email" required="1" />

В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?

<!-- Не используйте этот код! Он неверен! -->  <input type="email" name="email" required="false" />

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

Логическое значение возможно применить тремя способами: (Второе и третье характерны для XHTML)

  • required
  • required=""
  • required=«required=»

Применительно к нашему примеру выше, мы могли бы написать так (в HTML):

<input type="email" name="email" required />

habr.com

Теги <figure> </figure>

Теги <figure> </figure> группируют элементы web-страницы по смыслу:

<!DOCTYPE HTML>
<html>
<body>
<figure>
<h4>W3C</h4>
<p>W3C &ndash; oрганизация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины...</p>
</figure>
</body>
</html>

Результат:

W3C

W3C – oрганизация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины…

Теги <figure> </figure> впервые представлены в спецификации HTML 5.

Распространение телевизионного вещания в интернете

Интернет-телевидение охватывает как услуги телевизионных компаний, которые транслируют посредством телевизионных интернет-каналов, так и частные источники видео, поддерживаемые социальными сетями, например, YouTube.com. Телевидение в интернете развивается вместе с инфраструктурой сети интернет. С распространением ADSL-технологии (на английском: Asymmetric Digital Subscriber Line, ассиметрическая цифровая абонентная линия – широко распространенная технология предоставления широколентного доступа к интернету), качество видеопотока улучшается. Телевидение в интернете становится доступно не только посредством компьютеров, но и с помощью мобильных устройств – это карманные компьютеры, мобильные телефоны. Но существуют также и проблемы: качество видеосигнала или авторские права на видеоматериалы. В первом случае проблема решается увеличением скорости связи и снижением стоимости услуги интернета, а во втором – через модерирование содержания, если говорим о социальных сайтах типа YouTube.

ab-w.net

You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.