figcaption - коротко о figure

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

---

figure - она важна, нужно беречь =)

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

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

figcaption дочерний элемент элемента figure. Если он есть, то представляет заголовок figure содержания элемента. Если нет никакого дочернего элемента figcaption элемент, тогда нет никакого заголовка.

Пример использования:

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence<byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

Здесь мы видим figure элемент для разметки фотографии:

<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>

Здесь часть стихотворения приведено с использованием figure:

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

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

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

---

dd - определяет сущее

dd элемент представляет описание, определение, или значение, часть термина описания группы в описании списка ( dl элемента).

dl может быть использован для определения списка лексики, как в словаре. В следующем примере каждый элемент dt задается с dfn и имеет несколько dd, показывая различные части определения.

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

---

dt - и было Слово

dt элемент представляет термин, или имя, часть группы описания термина в списке описания (dl элемент).

Сам элемент dt, при использовании в dl элемент, не означает, что его содержание термина быть определены, но оно может быть обозначено, используя dfn элемент.

Еще один пример списка терминов:

<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>

---

dl - термины

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

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

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

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

Можно объединить, к примеру, двух авторов:

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

В следующем примере одно определение соединено с двумя сроками.

<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>

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

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

---

li - требует закрытия

Категории
Нет.
Контекст, в котором этот элемент может быть использован:
Внутри ol элементов.
Внутри ul элементов.
Внутри menu элементов.
Содержимое модели:
Поток содержание .
Содержимое атрибутов:
Глобальные атрибуты
Если элемент является дочерним ol элементом: value

li элемент представляет элемент списка. Если его родительский элемент ol, ul, или menu элемент, тогда li элемент - элемент списка родительского элемента, как определено для тех элементов. Иначе, у элемента списка нет никакого определенного связанного со списком отношения.

Если родительский элемент ol элемент, то li элемент имеет порядковый номер.
value атрибута, если присутствует, должно быть целое число дает порядковый номер элемента списка.

В следующем примере, топ 10 фильмов перечислены в обратном порядке. Обратите внимание на способ присвоения списку названия с помощью figure элемента и его figcaption элемента.

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

А можно используя атрибут списка OL

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

Если li элемент является дочерним menu элемента и самого есть ребенок, который определяет команду , то li элемент будет соответствовать псевдо-классам :enabled и :disabled так же, как первый такой элемент-ребенок.

---

ul - универсальный солдат разметки

Категории
Поток содержание .
Контекст, в котором этот элемент может быть использован:
Там, где поток содержание не ожидается.
Содержимое модели:
Ноль или более li элементы.
Содержимое атрибутов:
Глобальные атрибуты

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

Элементы списка li дочерние узлы элемента ul элемент.

---

ol - упорядочиваем списки

Категории
Поток содержание .
Контекст, в котором этот элемент может быть использован:
Там, где поток содержание не ожидается.
Содержимое модели:
Ноль или более li элементы.
Содержимое атрибутов:
Глобальные атрибуты
reversed
start
type

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

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

reversed атрибут - логический атрибут. Если существует, то указывает, что список - убывающий список (..., 3, 2, 1). Если атрибут опущен, список - возрастающий список (1, 2, 3...).

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

type атрибут может использоваться, чтобы определить вид маркера, который будет использоваться в списке в случаях, где это имеет значение (например, потому что на элементы должно сослаться их число/буква). Значение атрибута чувствительно к регистру, и должно соответсвовать одному из символов: A | a | I | i | 1.
Табл 1. Параметры нумерованного списка

Код	Пример
< ol type=""A""> ... < /ol >	Чебурашка Крокодил Гена Шапокляк
< ol type=""a""> ...< /ol >	Чебурашка Крокодил Гена Шапокляк
< ol type=""I""> ... < /ol >	Чебурашка Крокодил Гена Шапокляк
< ol type=""i""> ... < / ol >	Чебурашка Крокодил Гена Шапокляк
< ol type=""1""> ... < /ol >	Чебурашка Крокодил Гена Шапокляк

---

ПЧ начали убегать :)

Стойкие переживут приступ моего спама Остальные - жаль что вы уходите не попрощавшись.
То, что я сейчас пишу - нужная вещь. Потому что этого нет в русском переводе... Мой перевод тоже хромает на все ноги, что у него есть... Но все же это поможет не только мне в будущем.
Потерпите немного)

---

blockquote - цитируем наизусть

Категории
Поток содержание .
Секционирование корень .
Форматирование содержания.
Контекст, в котором этот элемент может быть использован:
Там, где поток содержание не ожидается.
Содержимое модели:
Поток содержание .
Содержимое атрибутов:
Глобальные атрибуты
cite

blockquote элемент представляет раздел, в котором цитируется что либо из другого источника.

Содержимое внутри blockquote должны быть указаны из другого источника, адрес которого, если он есть, может быть приведен в cite атрибут.
Если cite атрибут присутствует, это должен быть допустимый URL, потенциально окруженный пробелами.

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="http://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...
<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of 
the issue will be recognized, let alone that it will 
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat 
of breakdown in negotiations at any given moment and not 
be cowed by the possiblity.</blockquote>
<p>We shall now discuss these points...

---

pre - пишем хореем на страницах

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

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

Некоторые примеры случаев, когда pre элемент может быть использован:
1 фрагменты программного кода, со структурой указанных в соответствии с соглашениями этого языка.
2 Отображение ASCII искусства.
3 Для стихов

Представлять блок машинного кода, pre элемент может использоваться с code элементом; представлять блок компьютерной продукции pre элемент может использоваться с элементом samp. Точно так же kbd элемент может использоваться в пределах pre элементa, чтобы указать текст, который должен ввести пользователь.

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

Или:

<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>

Пример современного стихотворения, которое использует pre элемент, чтобы сохранить свое необычное форматирование, которое является неотъемлемой его частью.

<pre>                  maxling

it is with a           heart
                 heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

---

hr - подвести черту

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

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

<section>
 <h1>Communication</h1>
 <p>There are various methods of communication. This section
 covers a few of the important ones used by the project.</p>
 <hr>
 <p>Communication stones seem to come in pairs and have mysterious
 properties:</p>
 <ul>
  <li>They can transfer thoughts in two directions once activated
  if used alone.</li>
  <li>If used with another device, they can transfer one's
  consciousness to another body.</li>
  <li>If both stones are used with another device, the
  consciousnesses switch bodies.</li>
 </ul>
 <hr>
 <p>Radios use the electromagnetic spectrum in the meter range and
 longer.</p>
 <hr>
 <p>Signal flares use the electromagnetic spectrum in the
 nanometer range.</p>
</section>
<section>
 <h1>Food</h1>
 <p>All food at the project is rationed:</p>
 <dl>
  <dt>Potatoes</dt>
  <dd>Two per day</dd>
  <dt>Soup</dt>
  <dd>One bowl per day</dd>
 </dl>
 <hr>
 <p>Cooking is done by the chefs on a set rotation.</p>
</section>

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

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

---

p - разбиваем текст на абзацы

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

р- элемент представляет параграф.

Пример:

<p>The little kitten gently seated himself on a piece of
carpet. Later in his life, this would be referred to as the time the
cat sat on the mat.</p>

<fieldset>
 <legend>Personal information</legend>
 <p>
   <label>Name: <input name="n"></label>
   <label><input name="anon" type="checkbox"> Hide from other users</label>
 </p>
 <p><label>Address: &lt;textarea name="a">&lt;/textarea></label></p>
</fieldset>

<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

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

<section>
 
 <p>Last modified: 2001-04-23</p>
 <p>Author: [e-mail]</p>
</section>

И технически это будет правильно. Тем не менее более лучшей разметкой будет являться этот пример:

<section>
 
 <footer>Last modified: 2001-04-23</footer>
 <address>Author: [e-mail]</address>
</section>

Или:

<section>
 
 <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: [e-mail]</address>
 </footer>
</section>

---

address - мухи отдельно, котлеты отдельно

Категории
Поток содержание .
Форматирование содержания .
Контекст, в котором этот элемент может быть использован:
Там, где поток содержание не ожидается.
Содержимое модели:
Поток содержанием , но без заголовка содержание потомков, не разделяющей содержимое потомков, а не header , footer , или address потомков элемента.
Содержимое атрибутов:
Глобальные атрибуты

address - представляет контактную информацию ближайшего article или body предка элемента. Если это тело элемента , то контактная информация относится к документу в целом.

Такая информация может быть, например, именами авторов документа, ссылками на их веб-страницы, адресами электронной почты для обратной связи, почтовыми адресами, телефонными номерами и т.д. Элемент address не следует использовать для всех почтовых и e-mail адресов; сюда нужно помещать только контактную информацию людей так или иначе связанных с этим документом.

Например, страница на веб-узле W3C, связанные с HTML может включать следующую контактную информацию:

 <ADDRESS>
  <A Href="../People/Raggett/"> Dave Raggett </ A>,
  <A Href="../People/Arnaud/"> Arnaud Le Hors </ A>,
  контактные лица для <A href="Activity"> активность W3C HTML </ A>
 </ ADDRESS>

address элемента не должен содержать никакой другой информации, кроме контактной.

---

footer - теперь мы знаем, что у нас внизу

Категории
Поток содержание .
Форматирование содержания .
Контекст, в котором этот элемент может быть использован:
Там, где поток содержание не ожидается.
Содержимое модели:
Поток содержанием , но без header или footer потомков элемента.
Содержимое атрибутов:
Глобальные атрибуты

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

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/1">Part 2</a></p>
    <p><img src="kindplus.jpeg"> Tired of walking on the edge of
    a clif? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

---

header - шапка на голове

Категории
Поток содержание .
Форматирование содержания .
Контекст, в котором этот элемент может быть использован:
Там, где поток содержание не ожидается.
Содержимое модели:
Поток содержанием , но без header или footer потомков элемента.
Содержимое атрибутов:
Глобальные атрибуты

Назначение элемента состоит в создании оболочки вокруг раздела контента, который формирует верхний колонтитул страницы, содержащий обычно логотип компании/графику, заголовок основной страницы, и т.д.

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> 
  
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> 
 </header>
 <p>You have three active games:</p>
 
 ...

---

hgroup - заголовок и подзаголовок неразделимое целое

Категории
Поток содержание .
Заголовок содержание .
Форматирование содержания
Контекст, в котором этот элемент может быть использован:
Там, где поток содержание не ожидается.
Содержимое модели:
Один или несколько h1 , h2 , h3 , h4 , h5 или h6 элементов.
Содержимое атрибутов:
Глобальные атрибуты

Элемент используется для группировки набора h1 - h6 элементов, когда заголовок состоит из нескольких уровней, таких как подзаголовки, альтернативные названия или лозунги.

Другие элементы заголовка содержания в hgroup элемента указывают подзаголовки или субтитры.

Hgroup элементу присваивают звание самого высокого по рангу h1 - h6 элемента являющегося потомком hgroup элемента.

---

h1 , h2 , h3 , h4 , h5 и h6 - кричат о коротко о главном

Категории
Поток содержание .
Заголовок содержание .
Фоматирование содержания .
Контекст, в котором этот элемент может быть использован:
Как дитя hgroup элемента.
Там, где поток содержание не ожидается.
Содержимое модели:
Формулировка содержания .
Содержимое атрибутов:
Глобальные атрибуты

Эти элементы представляют собой заголовки для разделов.

Эти элементы имеют звания, которые даются числом их имени. h1 элемент - самого высокого ранга, h6 элемент имеет самый низкий ранг. Два элемента с одинаковыми именами имеют одинаковый ранг.

Кстати, это блочные элементы. И их использовать правильнее, чем писать < div class="topic"> или т.п.

---

aside - дополнительно о главном

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

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

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

---

article - структурируем контент

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

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

<article>
  <section id="Intro">
    <h2>Introduction</h2>
  </section>

  <section id="History">
    <h2>History</h2>
  </section>

  <section id="Discography">
    <h2>Discography</h2>
  </section>
</article>