Html тег figure: Тег | htmlbook.ru

9 полезных трюков HTML / Хабр

У HTML есть много практических секретов, которые могут вам пригодиться.

Я использую Endtest для создания автоматизированных тестов и выполнения их в кросс-браузерном облаке.

Умение обращаться с Endtest даже входит в список необходимых навыков для некоторых их рабочих вакансий.

У Endtest есть несколько действительно полезных функций, таких как:

• Кросс-браузерная сетка, работающая на компьютерах с Windows и MacOS
• Редактор без кода для автоматических тестов
• Поддержка веб-приложений
• Поддержка как собственных, так и гибридных приложений для Android и iOS

Вы можете просмотреть документы.

Его можно использовать для разметки фотографии.

Элемент «figure» также может содержать «figcaption»:

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>
 

Fig.1 — SWAT Kats

2. Тег «video»

Он позволяет встроить медиаплеер для воспроизведения видео.

Например, вы можете загрузить свое видео на AWS S3 и использовать тег «video», чтобы вставить его на свой веб-сайт.

Использование YouTube для этого может показаться непрофессиональным.

И Vimeo не позволяет вам вставлять свои видео без оплаты.

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

<video autoplay="" loop="" controls="">
<source type="video/mp4" src="https://endtest-videos. s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
</video> 

Your browser does not support HTML5 video.

3. Тег «picture»

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

Он должен содержать один или несколько тегов «source» и один тег «img».

Тег «img» будет использоваться только в случае, если окно просмотра не соответствует ни одному из тегов «source» или если не поддерживается браузером.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

Тег «progress» отображает ход выполнения задачи.

Этот тег не следует путать с тегом «meter» (который представляет собой датчик).

<progress value="63" max="100">
</progress>

5. Тег «meter»

Вы можете использовать тег «meter» для измерения данных в заданном диапазоне (датчик).

Результат может быть установлен через минимальные и максимальные значения или в процентах.

<meter value="2" min="0" max="10">2 out of 10</meter>

<meter value="0.6">60%</meter>

Тег «map» используется для определения клиентской карты изображений.

Карта изображения — это изображение с интерактивными областями.

Все, что вам нужно сделать, это ввести координаты X и Y в элементах из «map».

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

<img src="solar_system.png" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

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

<p contenteditable="true">This is an editable paragraph.</p>

8. Предложения по вводу

<input type="text" list="planets">
<datalist>
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>
 

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

9. Тег «noscript»

Содержимое внутри элемента «noscript» отображается браузером, только если отключён JavaScript.

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

<noscript><h3>JavaScript is disabled in your browser.</h3></noscript>

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

Серьезно, просто прочитайте документы.

HTML — Веб учебники

Пример

Использовать элемент <figure>, чтобы сделать пометки на фото в документе, и элемент <figcaption>, чтобы определить подпись для фото:

<figure>
  <img src=»pic_trulli. jpg» alt=»Трулли» style=»width:100%»>
  <figcaption>Рис.1 — Трулли, Апулия, Италия.</figcaption>
</figure>

Определение и использование

Тег <figure> определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т.д.

В то время как содержание элемента <figure>

Совет: Элемент <figcaption> используется для добавления подписи к элементу <figure>.

Поддержка браузеров

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

Элемент
<figure>	8. 0	9.0	4.0	5.1	11.0

Глобальные атрибуты

Тег <figure> также поддерживает Глобальные атрибуты в HTML.

События атрибутов

Тег <figure> также поддерживает События атрибутов в HTML.

Еще примеры

Пример

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>

<figure>
  <img src=»pic_trulli.jpg» alt=»Trulli»>
  <figcaption>Рис.1 — Трулли, Апулия, Италия</figcaption>
</figure>

</body>
</html>

Связные страницы

HTML DOM справочник: Объект figure

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <figure> со следующими значениями по умолчанию:

Группировка содержимого в HTML5

HTML-элементы для группировки содержимого веб-страниц

1.

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован:

Пропуск тегов: закрывающий тег элемента <p> может быть пропущен, если сразу за ним следует <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <header>, <hr>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table> или <ul> элемент, или если в родительском элементе больше нет содержимого, а родительский элемент не является <a>

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

Элемент <p> представляет абзац. Абзацы — это блоки текста, физически отделенные от смежных блоков пустыми строками.

<p>Маленький котенок осторожно уселся на кусок ковра. Позже в его жизни это будет упоминаться как время, когда кошка сидела на коврике.</p>

<fieldset>
  <legend>Персональная информация</legend>
  <p>
    <label>Имя: <input name="n"></label>
    <label><input name="anon" type="checkbox"> Скрыть от других пользователей</label>
  </p>
  <p><label>Адрес: <textarea name="a"></textarea></label></p>
</fieldset>

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

<section>
  ...
  <p>Последнее изменение: 2001-04-23</p>
  <p>Автор: fred@example. com</p>
</section>

Тем не менее, это было бы лучше разметить как:

<section>
  ...
  <footer>Последнее изменение: 2001-04-23</footer>
  <address>Автор: [email protected]</address>
</section>

Или так:

<section>
  ...
  <footer>
  <p>Последнее изменение: 2001-04-23</p>
  <address>Автор: [email protected]</address>
  </footer>
</section>

Элементы списка (в частности, элементы <ol> и <ul>) не могут быть дочерними элементами <p>. Поэтому, когда предложение содержит маркированный список, его можно разметить следующим образом:

<p>Например, в этом фантастическом предложении есть элементы маркированного списка, относящиеся к</p>
<ul>
  <li>волшебникам,
  <li>путешествию быстрее скорости света,
  <li>телепатии,
</ul>
<p>и это обсуждается ниже. </p>

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

Категории контента: потоковое содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

Элемент <address> представляет контактную информацию о человеке или организации. Он должен включать физическое и / или цифровое местоположение / контактную информацию и средства идентификации лица (лиц) или организации, к которой относится эта информация. В браузере обычно отображается курсивом.

Например, твиттер-аккаунт W3C:

<address>
<p>W3C в Twitter:
<p><a href="https://twitter.com/w3c">@w3c</a>
</address>

Адрес, телефон и факс организации:

<address>      
Центральный офис АО «Почта России»<br>
131000, Москва, Варшавское шоссе, 37<br>
Тел. : +7 (495) 956-20-67 | Факс: +7 (495) 956-99-51
</address>

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

Категории контента: потоковое содержимое.

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

Пропуск тегов: отсутствует закрывающий тег.

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

Элемент <hr> представляет собой тематический разрыв на уровне абзаца, например, изменение сцены в рассказе или переход к другой теме в разделе справочника.

<section>
<h2>Общение</h2>
<p>Существуют различные способы общения. Этот раздел охватывает несколько важных, используемых проектом.</p>
<hr>
<p>Камни связи, кажется, приходят парами и имеют загадочные свойства:</p>
<ul>
  <li>Они могут передавать мысли в двух направлениях после активации, если используются в одиночку.</li>
  <li>Если оба камня используются с другим устройством, сознание переключается на другое тело. </li>
</ul>
<hr>
<p>Радиоприемники используют электромагнитный спектр в метровом диапазоне и дольше.</p>
<hr>
<p>Сигнальные вспышки используют электромагнитный спектр в нанометровом диапазоне.</p>
</section>

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

Элемент <hr> не влияет на структуру документа.

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

Категории контента: потоковое содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

Элемент <pre> представляет собой блок предварительно отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементами.

В синтаксисе HTML ведущий символ новой строки, следующий сразу за начальным тегом <pre>, удаляется.

Для представления блока компьютерного кода, элемент <pre> может использоваться с элементом <code>. Для представления результата выполнения программного кода или скрипта элемент <pre> может использоваться с элементом <samp>. Аналогично, элемент <kbd> может использоваться в элементе <pre> для указания текста, который должен ввести пользователь.

<p>Это конструктор <code>Panel</code>:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

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

Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

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

<blockquote>
  <p>От перца, верно, начинают всем перечить... От уксуса - куксятся, от горчицы - огорчаются, от лука - лукавят, от вина - винятся, а от сдобы - добреют.  Как жалко, что никто об этом не знает... Всё было бы так просто! Ели бы сдобу и добрели!</p>
  <cite>Льюис Кэрролл. Приключения Алисы в Стране чудес</cite>
</blockquote>

<blockquote>
  <p>Моя любимая книга <cite>"О водоплавающих"</cite></p>
  <footer>- <cite>Майк Смит</cite></footer>
</blockquote>

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

Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице ниже:

Таблица 1. Атрибуты элемента <ol>

Атрибут	Описание, принимаемое значение
reversed	Логический атрибут. Если присутствует, это означает, что список является нисходящим (…, 3, 2, 1). Если атрибут опущен, список является восходящим (1, 2, 3, …).
start	Целое число, задающее порядковый номер первого элемента списка. По умолчанию равно 1 (если отсутствует атрибут reversed).
type	Используется для указания типа маркера, по умолчанию используется десятичная нумерация. Принимаемые значения: 1 — десятичная нумерация. A — нумерация списка в алфавитном порядке, прописные буквы латинского алфавита (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы латинского алфавита (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv).

Элемент <ol> представляет собой список элементов, где элементы были изначально упорядочены таким образом, что изменение порядка изменило бы смысл документа. Элементами списка являются элементы <li>.

<p>Я жил в следующих странах (приведено в порядке, когда я впервые жил там):</p>
<ol>
  <li>Швейцария
  <li>Великобритания
  <li>США
  <li>Норвегия
</ol>

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

Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

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

<p>Я жил в следующих странах:</p>
<ul>
  <li>Швейцария
  <li>Великобритания
  <li>США
  <li>Норвегия
</ul>

8.

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: внутри элемента <ol> и <ul>.

Пропуск тегов: закрывающий тег </li> может быть опущен, если элемент <li> сразу следует за другим элементом <li>, или если больше нет содержания в элементе, в который вложен тег.

Для элемента доступны ‎глобальные атрибуты. Если элемент является дочерним элементом <ol> — необязательный атрибут value.

Элемент <li> представляет собой элемент списка. Если родительским элементом является элемент <ol>, то элемент <li> имеет порядковый номер.

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

<figure>
  <figcaption>Топ 10 фильмов всех времен</figcaption>
  <ol>
      <li value="10"><cite>Джози и кошечки</cite>, 2001</li>
      <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
      <li value="8"><cite>Приключения Флика</cite>, 1998</li>
      <li value="7"><cite>История игрушек</cite>, 1995</li>
      <li value="6"><cite>Корпорация монстров</cite>, 2001</li>
      <li value="5"><cite>Тачки</cite>, 2006</li>
      <li value="4"><cite>История игрушек 2</cite>, 1999</li>
      <li value="3"><cite>В поисках Немо</cite>, 2003</li>
      <li value="2"><cite>Суперсемейка</cite>, 2004</li>
      <li value="1"><cite>Рататуй</cite>, 2007</li>
  </ol>
</figure>

9.

Категории контента: потоковое содержимое. Если имеется хотя бы одна пара <dt>—<dd> — видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

Элемент <dl> представляет список описаний, состоящий из нуля или более групп термин-описание. Термин представлен элементом <dt>, описание — элементом <dd>.

Группы термин-описание могут быть терминами и определениями, вопросами и ответами, категориями и темами и т.п.

<dl>
  <dt>Текила «Бланко»</dt>
  <dd>Кристально прозрачная текила с медовым вкусом спелой агавы...</dd>
  <dt>Текила «Репосадо»</dt>
  <dd>Текила, выдержанная в бочках из белого дуба в течение 8-10 месяцев. ..</dd>
</dl>

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

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: перед элементами <dd> или <dt> внутри элементов <dl>.

Пропуск тегов: закрывающий тег элемента <dt> может быть опущен, если за элементом <dt> сразу же следует другой элемент <dt> или элемент <dd>.

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

Элемент <dt> представляет термин в списке описаний <dl>.

При использовании в элементе <dl> элемент <dt> не обязательно представляет определяемый термин. Для этой цели можно использовать элемент <dfn>.

<dl>
  <dt lang="en-us"><dfn>Color</dfn></dt>
  <dt lang="en-gb"><dfn>Colour</dfn></dt>
  <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three
        differently filtered analyses of a view. </dd>
</dl>

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

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: после элементов <dt> или <dd> внутри элементов <dl>.

Пропуск тегов: закрывающий тег элемента <dd> может быть опущен, если за элементом <dd> сразу же следует другой элемент <dd> или элемент <dt> или если в родительском элементе больше нет содержимого.

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

Элемент <dd> представляет описание в списке описаний <dl>.

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

Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

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

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

Стили браузеров по умолчанию для элемента <figure>:

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

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

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

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как потомок элемента <figure>.

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент <figcaption> представляет заголовок или легенду для остального содержимого родительского элемента <figure>.

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

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

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

Пропуск тегов: ни один из тегов не может быть пропущен.

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

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

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

В документе должно быть не более одного элемента <main>.

<body>
<header>
  <h2>Пудель</h2>
    <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>
        <h3>О породе</h3>
          <nav>
            <ul>
              <li><a href="#basic">Разновидности</a></li>
              <li><a href="#app">Внешний вид</a></li>
              <li><a href="#temp">Характер</a></li>
            </ul>
          </nav>
      </header>
      <section>
        <h4>Разновидности</h4>
          <p>. ..</p>
      </section>
      <section>
        <h4>Внешний вид</h4>
          <p>...</p>
      </section>
      <section>
        <h4>Характер</h4>
          <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>

15. <div>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; как дочерний элемент <dl>.

Пропуск тегов: ни один из тегов не может быть пропущен.

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

Элемент <div> сам по себе ничего не значит. Он представляет свои дочерние элементы. Может использоваться с атрибутами class, lang и title для разметки семантики, общей для группы последовательных элементов.

Рекомендуется использовать элемент <div> в случаях, когда другой элемент не подходит. Использование более подходящих элементов вместо элемента <div> обеспечивает лучшую доступность для читателей и облегчает обслуживание кода.

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

<article lang="en-US">
  <h3>My use of language and my cats</h3>
  <p>My cat’s behavior hasn’t changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets. </p>
  <div lang="en-GB">
     <p>My other cat, colored black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognizes that their flat is a mirror image of ours.</p>
     <p>Hm, I just noticed that in the last paragraph I used British English. But I’m supposed to write in American English. So I shouldn’t say "pavement" or "flat" or "color"...</p>
  </div>
  <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

По материалам Grouping content

Используем семантические теги HTML5 | nohosting.ru

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

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

Рассмотрим подробно семантические элементы в HTML5.

Тег <header>

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

<article>
  <header>
    <h2>Самый важный заголовок здесь</h2>
    <h3>Менее важный заголовок здесь</h3>
    <p>Некоторая дополнительная информация здесь</p>
  </header >
  <p>Текст статьи здесь. ..</p>
</article>

Тег <footer>

Обычно используется для разметки «подвала» сайта, где публикуется информация об авторских правах, электронная почта, ссылки для навигации по сайту и т.п. Однако данный тег можно использовать и для разметки нижней части конкретного раздела или блока. Например, внутри статей (<article>) или обычных блоков (<div>).

Пример:

<footer>
  <p>Сайт создан...</p>
  <p>Email: ...</p>
</footer>

Тег <article>

Должен применяться для обозначения какого-либо независимого раздела страницы. Слово «независимый» в данном случае означает, что данный раздел содержит завершенную композицию: вы можете вставить данный блок в любое место сайта, и пользователю все равно будет понятно, что означает данный блок. Примеры: пост в блоге, карточка товара в интернет-магазине.

Пример:

<article>
  <h2>WordPress</h2>
  <p>WordPress - бесплатный движок для создания сайтов и блогов</p>
</article>

Тег <section>

Определяет разделы в документе, такие как главы, заголовки, футеры. Может содержать в себе заголовок <h2>. Тег <section> не нужно использовать как блок-обертку — для такого случая лучше подойдет тег <div>.

Пример:

<section>
 <h2>HTML5</h2>
 <p>HTML5 - это...</p>
</section>

Тег <aside>

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

Пример:

<p>Мы учили javascript в прошлом году</p>
<aside>
  <h4>Язык Javascript</h4>
  <p>Javascript - язык программирования, которые активно используется в 
  веб-разработке.</p>
</aside>

Тег <nav>

Используется для обозначения блока, в котором располагаются ссылки навигации по странице или по всему сайту. На одной странице можно расположить несколько таких блоков. Тег <nav> является «оберткой» для списков, таких как <ul> или <ol>. Стоит отметить, что тег <nav> должен применяться не для всех групп ссылок, а лишь для главных навигационных блоков.

Пример:

<nav>
  <a href="/news/">Новости</a>
  <a href="/articles/">Статьи</a>
  <a href="/contacts/">Контакты</a>
</nav>

Тег <address>

Применяется для обозначения контактной информации автора статьи или владельца сайта. Если тег <address> находится внутри тега <body>, он отражает контактную информацию для всего документа. Если тег <address> находится внутри тега <article>, он отражает контактную информацию для статьи.

Пример:

<address>
  Москва<br>
  ул. Ленина д .1
</address>

Тег <figure>

Определяет графический контент сайта (картинки, диаграммы, фотографии). Может иметь заголовок, который обозначается тегом <figcaption>.

Пример:

<figure>
  <img src="photo.png" alt="Моя фотография">
  <figcaption>Отдых на природе</figcaption>
</figure>

Тег <time>

Применяется для обозначения даты и времени. У данного тега есть атрибут datetime, с помощью которого можно установить дату и время для текста.

Пример:

<p>Наша компания работает каждый день с <time>9:00</time></p>

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

Фиксированные подписи к изображениям – Dobrovoimaster

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

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

HTML

Синтаксис(разметка html) во всех примерах будет примерно одинаков, тег <figcaption>, который содержит описание для тега <figure>, должен быть первым или последним элементом в группе, всё очень просто.
Так:

<figure>
    <figcaption>
         Подпись к изображению...
    </figcaption>
    <img src="путь до картинки">
</figure>

<figure> <figcaption> Подпись к изображению… </figcaption> <img src=”путь до картинки”> </figure>

или так:

<figure>
    <img src="путь до картинки">
    <figcaption>
         Подпись к изображению...
    </figcaption>
</figure>

<figure> <img src=”путь до картинки”> <figcaption> Подпись к изображению… </figcaption> </figure>

Внешний вид и расположение подписей будем формировать непосредственно в таблице стилей CSS, предварительно связав все элементы со стилями через определённые классы. Например, я сделал изображения в блоке <figure> «резиновыми», используя процентные значения ширины картинки width: 100%;. Как сделать картинки адаптивными, рассказывал подробно в статье Адаптивные изображения с помощью CSS, кому интересно, можете освежить память.
Во всех случаях базовому контейнеру <figure> определяем относительное позиционирование position: relative;, а подписям (элемент <figcaption>), в вариантах с наложением, определяем абсолютное позиционирование position: absolute;.

1. Подпись размещается вверху, перед изображением

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

Новые теги HTML5 — Как создать сайт

Новые теги в языке HTML5

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

Новые теги HTML5 по алфавиту

<article> </article> — основной контент страницы, тег HTML5,
<aside> </aside> — боковая панель (сайдбар) сайта, тег HTML5,
<audio> </audio> — воспроизводит аудиофайлы, создаёт панель управления ими, тег HTML5,
<bdi> </bdi> — запрещает изменять направление текста, тег HTML5,
<canvas> </canvas> — замена флэш-технологии, тег HTML5,
<command> — команда-переключатель, тег HTML5,
<datalist> </datalist> — выпадающий список, тег HTML5,
<details> </details> — спойлер, тег HTML5,
<dialog> </dialog> — диалоги, тег HTML5,
<embed> — внедряет плагины, тег HTML5,
<figcaption> </figcaption> — заголовок тега figure, тег HTML5,
<figure> </figure> — группирует различные элементы, тег HTML5,
<footer> </footer> — подвал сайта, тег HTML5,
<header> </header> — шапка сайта, тег HTML5,
<hgroup> </hgroup> — группирует заголовки, тег HTML5,
<keygen> — шифровка расшифровка данных, тег HTML5,
<mark> </mark> — выделенный текст, тег HTML5,
<menu> </menu> — обрамляет теги command, тег HTML5,
<meter> </meter> — шкала измерения, тег HTML5,
<nav> </nav> — важные ссылки страницы, тег HTML5,
<output> </output> — вывод работы скрипта, тег HTML5,
<progress> </progress> — шкала прогресса, тег HTML5,
<rp> </rp> — часть аннотации, заменяет тег ruby, если браузер его не поддерживает тег HTML5,
<rt> </rt> — аннотация, тег HTML5,
<ruby> </ruby> — обрамляет аннотацию, тег HTML5,
<section> </section> — семантически единые разделы страницы, тег HTML5,
<source> — внедряет аудио/видео файлы, с помощью тегов audio и video, тег HTML5,
<summary> </summary> — заголовок тега details, тег HTML5,
<time> </time> — дата и/или время, тег HTML5,
<track> — внедряет текстовую информацию (субтитры, характеристики медиафайлов и т. д.) в аудио/видео файлы, через теги audio и video, тег HTML5,
<video> </video> — воспроизводит видеофайлы, создаёт панель управления ими, тег HTML5,
<wbr> — указывает, где нужно перенести длинное слово, если оно не вмещается в окно браузера, тег HTML5.

Читать далее: Устаревшие теги HTML

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014

Навигация по записям

Создание компонентов (HTML, CSS) – Setka Editor

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

Примечание: о том, как добавить компонент во время редактирования поста в Setka Post Editor, вы можете узнать из этой статьи.

Компоненты для Setka Editor создаются двумя способами:

• В качестве компонента может выступать любой валидный HTML-код. В коде также используются стандартные элементы Setka Editor: сетки, колонки, параграфы, галереи и изображения. Они должны содержать соответствующие CSS-классы. Помимо стандартных классов, можно использовать и ваши собственные.
• Создавая компонент с нуля, соблюдайте правила, описанные ниже, чтобы получить HTML-код, принимаемый редактором.

Компонент может состоять из следующих элементов:

Обратите внимание: все элементы кроме подписи — обязательны.

Обратите внимание: все элементы кроме подписи — обязательны. Внутри плейсхолдера не должно быть самого изображения с тегом <img>.

Совместимость

Цитата между разделителями

<hr>
<p>
Текст цитаты
</p>
<hr>

Вложенные контейнеры

<div data-ce-tag="container">
<div data-ce-tag="container">
<p>Текст внутри контейнера</p>
</div>
</div>

Сетка с боковой и основной колонками

<div data-ce-tag="grid">
<div data-ce-tag="grid-col" data-col-width="2">
<p>
Мелкий текст в боковой колонке
</p>
</div>
<div data-ce-tag="grid-col" data-col-width="4">
<p>
Колонка с основным текстом
</p>
</div>
</div>

HTML фигура Тег

Пример

Используйте элемент