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

[PavelTkachev]

Блочными или строчными являются элементы figure и figcaption?

[Great Rash]

По идее они оба блочные.

[PavelTkachev]

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

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

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

 

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

[SelenIT]

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

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

[PavelTkachev]

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

[SelenIT]

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

[PavelTkachev]

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

 

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

[SelenIT]

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

 

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

[PavelTkachev]

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

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

[Aleksandr.L]

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

 

Так? 

[PavelTkachev]

 

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

 

Так? 

 

 

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

[SelenIT]

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

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

 

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

[PavelTkachev]

Переделал всё на article, как Вы и советовали. Почитал докторов html5. Спасибо за помощь!