Jump to content
  • 0

Тип элементов figure и figcaption


PavelTkachev
 Share

Question

12 answers to this question

Recommended Posts

  • 0

И значит я не могу их помещать внутри тега a...


А где про это сказано в спецификации? Я не нашёл.


Для тех, кому лень читать всю статью: в HTML нет «блочных» и «строчных» элементов. Это деление — историческая ошибка, чистая условность и анахронизм времен конца 90-х. Элементы HTML различаются между собой не формой и внешним видом, а смыслом и предназначением, именно оно определяет, что во что можно вкладывать. А блочностью, инлайновостью, любыми их комбинациями и др. чисто внешними чертами заведует исключительно CSS.

 

http://css-live.ru/articles/blochnyx-i-strochnyx-elementov-v-html-bolshe-net.html

Link to comment
Share on other sites

  • 0

Они оба допускают потоковое содержимое (flow content), <figure> и сам является потоковым. Формально <figure> может быть внутри <a> (HTML5 запрещает вкладывать в <a> лишь интерактивные элементы, напр. <input>-ы или другие <a>). Но по логике, необходимость в этом не должна возникать, т.к. семантика <figure> — самостоятельная единица контента, на которую ссылается основной контент (иллюстрация, таблица, пример кода и т.п.), а не что-то, что целиком ссылается куда-то наружу. Конечно, случаи всякие бывают, но выглядит такая задача странно и наводит на мысли о недостаточно продуманной структуре.

<figcaption> может быть лишь непосредственным потомком <figure>.

Link to comment
Share on other sites

  • 0

У меня новостная лента: картинка, краткий текст, заголовок. Всё это я поместил в figure. А поверх сделал тег a, чтобы всё целиком куда не нажми было ссылкой.

Link to comment
Share on other sites

  • 0

Мне кажется, для новостной ленты с анонсами всё-таки <article> с заголовком уместнее. Потому что такой блок сохраняет смысл и в RSS-фиде, например. А вот остальной поток контента никак к нему не обращается, в отличие от <figure>.

  • Like 1
Link to comment
Share on other sites

  • 0
  On 2/20/2015 at 6:24 AM, SelenIT said:

Мне кажется, для новостной ленты с анонсами всё-таки <article> с заголовком уместнее. Потому что такой блок сохраняет смысл и в RSS-фиде, например. А вот остальной поток контента никак к нему не обращается, в отличие от <figure>.

 

Вначале так и было. Но потом я почитал статью http://htmlbook.ru/blog/elementy-figure-i-figcaption и мне показалось отличной идеей использовать figure. Ещё и в силу того, что я внедрил микроформат изображений из schema.org. Как раз есть картинка, название и описание.

Link to comment
Share on other sites

  • 0

По блок-схеме, предлагаемой теми же «HTML5-докторами» (адаптированный перевод), выбор в пользу article делается на шаг раньше. Впрочем, если это агрегатор новостей на опред. тему, и каждая новость служит дополнительной иллюстрацией какого-то тезиса (напр. актуальности рекламируемой технологии) — наверное, может подойти и figure :).

 

А микроданные, по-моему, вполне могут ужиться и в article (в конце концов, фото в галерее — и картинка с подписью, и самодостаточная единица контента, никакого противоречия нет).

Link to comment
Share on other sites

  • 0

Не могу расположить нужным образом элементы.

<figure><figcaption></figcaption><img><time></time><span></span><b></b></figure>

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

 

Я делаю для figcaption display:inline. Для img - float:left. Остальным display:block; margin-left: 150px;

Всё работает пока текст в figcaption короче одной строки. В противном случае он заполняет всю первую строке, а img располагается под figcaption.

 

Моя задача решаема? figcaption по спецификации может быть либо первым, либо последним внутри figure.

Link to comment
Share on other sites

  • 0
  On 2/22/2015 at 9:30 PM, Aleksandr.L said:

 

  On 2/22/2015 at 8:34 PM, PavelTkachev said:
Мне нужно, чтобы картинка была в верхнем правом углу, а тексты справа не обтекая ей.

 

Так

 

 

Нет По спецификации figcaption должен быть на первом или последнем месте. Нельзя сделать его вторым.

Link to comment
Share on other sites

  • 0
  On 2/22/2015 at 8:34 PM, PavelTkachev said:
Я делаю для figcaption display:inline. Для img - float:left. Остальным display:block; margin-left: 150px;

Картинке всё же float: right, наверное?

 

Как вариант — для figcaption float: left; width: calc(100% - 150px). Но ради чего так изворачиваться?

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy