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

Содержание

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

Приветствую, Хабр! Представляю вашему вниманию перевод статьи «9 Extremely Useful HTML Tricks» автора Klaus.

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

Нативка от автораНо я хочу убедиться, что сайт работает в Internet Explorer и других браузерах.

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


Netflix использует ту же платформу для тестирования своих веб-приложений.

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

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

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

• Геолокация
• Оператор if
• Циклы
• Загрузка файлов в ваши тесты
• API Endtest, для легкой интеграции с вашей системой CI / CD
• Расширенные утверждения
• Мобильные тесты на мобильных устройствах
• Тестирование электронной почты с помощью Endtest Mailbox

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


Ниже приведены 9 чрезвычайно полезных трюков HTML.

1. Тег «figure»

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

Элемент «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.


Вы также можете встроить прямой эфир, используя getUserMedia() или WebRTC

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>

4. Тег «progress»

Тег «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>

И вот они:

6. Тег «map»

Тег «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>

7. Атрибут contenteditable

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

<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, но уверены ли вы, что ваше веб-приложение работает правильно на всех браузерах и устройствах?

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

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

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

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.



Еще примеры

Пример

Использовать стиль CSS в <figure> и <figcaption>:




figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

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>

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

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

Пропуск тегов: закрывающий тег элемента <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>, <audio>, <del>, <ins>, <map>, <noscript> или <video>.

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

Элемент <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>Автор: [email protected] 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.

Элемент <li>

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

Контекст, в котором этот элемент может быть использован: внутри элемента <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.

Элемент <dl>

Категории контента: потоковое содержимое. Если имеется хотя бы одна пара <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

HTML-теги
Новые теги в 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 фигура Тег


Пример

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

для разметки фотографии в документе и
элемент для определения подписи к фотографии:

<рисунок>
Трулли

Рис.1 - Трулли, Апулия, Италия.

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


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

Тег

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

Хотя содержимое элемента

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

Совет: Элемент

используется для добавления заголовка для элемента
.


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

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

Элемент
<рисунок> 8,0 9,0 4,0 5,1 11,0

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

Тег

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


Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.



Другие примеры

Пример

Используйте CSS для стилизации

и
:




рисунок {
border: 1px #cccccc solid;
отступ: 4 пикселя;
маржа: авто;
}

figcaption {
цвет фона: черный;
цвет: белый; Стиль шрифта
: курсив;
отступ: 2 пикселя;
выравнивание текста: по центру;
}



 Трулли
Рис.1 - Трулли, Апулия, Италия


Попробуй сам "

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

Ссылка на модель

HTML DOM: объект рисунка


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

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

Пример

цифра {
дисплей: блок;
margin-top: 1em;
нижнее поле: 1em;
маржа слева: 40 пикселей;
margin-right: 40 пикселей;
}

Попробуй сам "

HTML5 Рисунок Тег - Учебник Республика

Тема: Справочник по тегам HTML5 Назад | След.

Описание

Элемент

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

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

Размещение: Блок
Содержимое: Элемент
, за которым следуют элементы Block, Inline и text, и наоборот
Начальный / конечный тег: Начальный тег: требуется , Конечный тег: требуется
Версия: Новое в HTML5

Синтаксис

Базовый синтаксис тега

задается следующим образом:

HTML / XHTML: <рисунок>...

Пример ниже показывает действие тега

.

  <рисунок>
    Спейс шаттл
    
НАСА - открытие космического корабля

Примечание: Однако содержимое элемента

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


Атрибуты, специфичные для тегов

Тег

не имеет какого-либо специального атрибута.


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

Как и все другие теги HTML, тег

поддерживает глобальные атрибуты в HTML5.


Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML5.


Совместимость с браузером

Тег

поддерживается во всех основных современных браузерах.

Базовая поддержка -

  • Firefox 4+
  • Google Chrome 6+
  • Internet Explorer 9+
  • Apple Safari 5.1+
  • Opera 11.1+

Дополнительная литература

См. Учебник по теме: Изображения HTML.

Связанные теги:

, .

HTML5 - Когда использовать тег рисунка

Все дело в семантике в современной веб-разработке.Но с этой семантикой возникает путаница с тем, какие теги и когда должны использоваться. Когда HTML5 представил кучу новых семантических элементов, был один такой элемент <рисунок>. Итак, у нас уже был , так что лишнего делает тег figure добавить к нему?

Определение тега рисунка по W3C

В соответствии с W3C,

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

Разница между цифрой

и img tag

Разница между рисунком и тегом изображения довольно проста. Тег изображения используется для встраивания изображения в документ HTML, тогда как тег рисунка используется для семантически организовать содержимое изображения в HTML-документе.
Важно отметить, что эти два элемента не взаимозаменяемы. Оба эти элементы одинаково важны на своих местах. Вы не можете использовать рисунок, чтобы встроить изображение в документ HTML5, попробуйте добавить атрибут src в тег figure так же, как тег img, и вы заметите, что изображение не отображается.Итак, для добавления изображения в HTML5 ничего не изменилось. документации мы по-прежнему используем тег img для того же. Тогда что изменилось?
До HTML5, если нам нужно было добавить подпись к изображению, у нас было использовать какой-либо тег p или span, и, определив для него какой-то класс, мы могли бы стилизовать эти подписи. Итак, не было возможности добавить подпись к изображению семантически. через HTML, но с тегом figure есть специальный тег только для подписи к изображению, известные как

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


Семантическая разница

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

 
                                
                                
                                
                                
                                    
                                     Изображение без тега рисунка 
                                
                                
                                
                                    

См. Ниже, я буду прикреплять изображение ноутбука.

Изображение ноутбука

Вот изображение ноутбука.

Давайте посмотрим на выходную веб-страницу этого примера кода.

Рис.1 - Изображение без тега рисунка

Теперь давайте посмотрим на тот же пример с тегом figure вместо тега div для организация контента.

 
                                
                                
                                
                                
                                    
                                     Изображение с тегом рисунка 
                                
                                
                                
                                    

См. Ниже, я буду прикреплять изображение ноутбука.

<рисунок> Изображение ноутбука
Вот изображение ноутбука.

Давайте посмотрим на результат этого кода.

Рис.2 - Изображение с тегом рисунка

Увидеть разницу! Как вы могли заметить, я не использовал никаких свойств стиля в код, все равно есть разница в выравнивании изображения и подписи, тег рисунка отвечает за все это.Но помимо выравнивания по умолчанию и изменения стиля, которые предоставляет тег фигуры, основное преимущество, которое он имеет Это также позволяет различным компьютерным программам лучше понимать ваш контент. Для человека довольно легко отличить абзац от изображения, но для машины, это не годится для того же. Под машинами я подразумеваю Google Поисковая система или даже ваш веб-браузер, если на то пошло.
Весь смысл семантики состоит в том, чтобы разговаривать с этими машинами и инструктировать им какая часть документа HTML5 что передает. В первом случае наши пример с тегом div, при выполнении этих инструкций компьютер программы не понимали, что находится под этим тегом div. Мы можем вставить что угодно под тегом div, откуда наш веб-браузер должен знать об этом? Но во втором случае с тегом фигуры вместо тега div он сообщает сети браузер, в который будет встроено изображение под этим тегом.
Предположим, у вас есть куча изображений в документе HTML, вы можете использовать тег фигуры чтобы вложить все эти изображения в этот тег figure.
Только один элемент

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

Примечание : Тег рисунка не только ограничен изображениями, но мы также можем используйте тег фигуры, чтобы обернуть некоторые аудио, видео или даже некоторые диаграммы или таблицы, блоки кодов.
Но его нельзя использовать, чтобы обернуть что-нибудь и все. Например, любой графическое содержимое не должно встраиваться под тегом рисунка.Вместо этого используйте img тег.


Различия между