как семантически вернее

[Быколай]

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

По вашему мнению как семантически будет трушнее?

/* вступление ..... */
<h2>1. Первое бла</h2>
<img .....>
<p>....</p>

<h2>2. Второе бла</h2>
<img .....>
<p>....</p>

или каждый эпизод - заворачивать в li и нумеровать, костыляво получится если цифру к заголовку пытаться приилепить... Или составить список определений, и попытаться ему применить list-style-type: decimal?

[psywalker]

Я бы сделал отдельный блок див, назвал бы его class='article'. И в него бы уже пихал

<h2>1. Первое бла</h2>
<img .....>
<p>....</p>

И т.д. Сколько статей, столько и блоков.

[Быколай]

Я бы сделал отдельный блок див, назвал бы его class='article'. И в него бы уже пихал

<h2>1. Первое бла</h2>
<img .....>
<p>....</p>

И т.д. Сколько статей, столько и блоков.

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

[zSpx]

Я думаю тут можно было бы использовать список. Т.е. конструкцию вида

 <ul>
  <li>
   <h2>1. Первое бла</h2>
   <img .....>
   <p>....</p>
  </li>
  <li>
   ...
  </li>
 </ul>

но тогда загромождается код

Edited March 24, 2011 by zSpx

[psywalker]

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

Да, всё же лучше список.

Я думаю тут можно было бы использовать список. Т.е. конструкцию вида

 <ul>
  <li>
   <h2>1. Первое бла</h2>
   <img .....>
   <p>....</p>
  </li>
  <li>
   ...
  </li>
 </ul>

но тогда загромождается код

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

[Быколай]

Да, всё же лучше список.

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

и пожалуй таки нумерованный список

<style type="text/css">
li, h2 {font-size: 14pt;}
p {font-size: 14pt;}
</style>
<ol>
	<li>
		<h2>Первое бла</h2>
		<p>рыба рыба рыба кит</p>
	</li>	<li>
		<h2>Второе бла</h2>
		<p>Утка Утка Утка гусь</p>
	</li>
</ol>

[psywalker]

и пожалуй таки нумерованный список

<style type="text/css">
li, h2 {font-size: 14pt;}
p {font-size: 14pt;}
</style>
<ol>
	<li>
		<h2>Первое бла</h2>
		<p>рыба рыба рыба кит</p>
	</li>	<li>
		<h2>Второе бла</h2>
		<p>Утка Утка Утка гусь</p>
	</li>
</ol>

Именно!

[Great Rash]

Рискую быть закиданным помидорами...

<article>?

[psywalker]

<article>
         <section>
           <h1>Первое бла</h1>

        <p>
            рыба рыба рыба кит
        </p>
</section>
</article>

Рискую быть закиданным помидорами...

<article>?

А почему бы и нет?

[rediskavet]

Зачем <article>, если это нумерованный список?

[psywalker]

Зачем <article>, если это нумерованный список?

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

[SelenIT]

Я бы, если честно, ни во что не оборачивал. Формально, да, последовательность стадий процесса ложится в семантику <ol>, но возня со стилизацией этого дела под нормальный текст (если я верно понимаю задачу) не стоит своих трудозатрат. Последовательность заголовков на одном уровне в рамках единого контекста сама по себе более-менее отражает последовательную зависимость, никакой паук/агрегатор портить эту последовательность не станет. Так что острой необходимости во что бы то ни стало делать это списком я не вижу.

<article> тут однозначно не годится — стадия процесса не самостоятельная сущность, в отрыве от целого процесса она бессмысленна. <section>, в принципе, подходит, но заголовки и так создают неявные секции.

И еще мелочь, но не нравятся мне ни во что не обернутые картинки между блоками. Strict-валидатору они тоже часто не нравятся. Хотя это, наверное, наш с ним личный пунктик...

[psywalker]

<article> тут однозначно не годится — стадия процесса не самостоятельная сущность, в отрыве от целого процесса она бессмысленна. <section>, в принципе, подходит, но заголовки и так создают неявные секции.

1. Т.е. это значит, что <article> подходил бы, если бы например в нём содержались ВСЕ стадии процесса со своими заголовками и описаниями?

2.

<section>, в принципе, подходит, но заголовки и так создают неявные секции.

А вот это объясни поподробнее пожалуйста. Что значит заголовки и так создают неявные секции?

[Быколай]

Рискую быть закиданным помидорами...

<article>?

в частном случае нет, всё таки статья едина. Тогда уж несколько <section> возможно в одном <article>. Но проект не html 5, а XHTML 1.0 Transitional, так что в любом случае нет.

И еще мелочь, но не нравятся мне ни во что не обернутые картинки между блоками. Strict-валидатору они тоже часто не нравятся. Хотя это, наверное, наш с ним личный пунктик...

а картинки будут в блоке li, а что бы их оформить, ещё в div завернуть. так что всё нормально. вот как-то так

<ol>
	<li>
		<h2>Первое бла</h2>
		<p>рыба рыба рыба кит</p>
		<div class="images">
			<img src="..." alt=""/>
		</div>
		<p>рыба рыба рыба кит</p>
	</li>	<li>
		<h2>Второе бла</h2>
		<div class="images">
			<img src="..." alt=""/>
			<img src="..." alt=""/>
		</div>
		<p>Утка Утка Утка гусь</p>
		<p>Утка Утка Утка гусь</p>
	</li>
</ol>

[rediskavet]

И еще мелочь, но не нравятся мне ни во что не обернутые картинки между блоками.

А чем грозит картинка без обертки?

[psywalker]

А чем грозит картинка без обертки?

Да, и почему нельзя например заменить обёртку обычным классом?

[SelenIT]

psywalker, насколько я понял объяснения корифеев, <article> — это любой блок информации, который можно целиком выдрать со страницы и воткнуть в какой-то другой контекст (напр., RSS-ленту), причем смысл его от этой процедуры не изменится. Т.е. критерий применимости <article> — самодостаточность.

А про неявные секции — это п. 4.4.1 спеки HTML5. Для каждой страницы создается план, или схема документа (document outline), все элементы типа sectioning context (article, aside, nav и section) и все заголовки (кроме находящихся в элементах со своей собственной структурой разделов — blockquote, details, fieldset, figure и td) создают новую отметку (новый пункт) в этой схеме. И для этого плана/схемы два заголовка одного уровня, идущих друг за другом в одном контексте, равнозначны (семантически эквивалентны) двум последовательным <section> с заголовком любого уровня в начале каждой из них. В спеке по ссылке есть три примера создания одного и того же плана — один с одними заголовками и два с явными секциями.

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

rediskavet, тем, что браузеру придется выводить его в анонимном блоке уровня абзаца, а анонимные блоки гораздо сложнее стилизовать, чем явные (по отдельности — вообще невозможно). Структура HTML предполагает иерархичность: блоки абзацев — абзацы — текстовое содержимое абзацев. Нарушать эту иерархию — всё равно, что выкладывать штабель из коробок с каким-то товаром (напр. чайниками) вперемежку с чайниками без коробок. Оно, конечно, может и не развалиться... но когда в коробках всё, как-то спокойнее Хотя, если твердо знаешь, что делаешь — на обертке вполне можно и сэкономить.

[mishka]

Да, всё же лучше список.

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

Где вы в списке (ul, ol) гибкость нашли?

А если в той маленькой статье попаднтся вложенный список?

Что будете лепить:

ol {
    width: ...;
    list-style: ...;
}
ol li {
    margin: ...;
    padding: ....;
    background: ....;
}
ol ol {
    width: auto;
    list-style: ....;
}
ol ol li {
    padding: none;
    margin: none;
    background: none;
}

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

Но главное - если каждый элемент такого списка - самостоятельная единица ( типа короткие статьи ) то эту лишку нельзя выдернуть из списка и всунуть в другой блок. Обязательно нужно будет обернуть ( ol или ul ).

Вобщем гибкостью тут и не пахнет.

[zSpx]

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

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

Но главное - если каждый элемент такого списка - самостоятельная единица ( типа короткие статьи ) то эту лишку нельзя выдернуть из списка и всунуть в другой блок. Обязательно нужно будет обернуть ( ol или ul ).

Это почему нельзя? Вполне таки можно. Или что имелось в виду?

Edited March 24, 2011 by zSpx

[psywalker]

Где вы в списке (ul, ol) гибкость нашли?

А если в той маленькой статье попаднтся вложенный список?

Что будете лепить:

ol {
    width: ...;
    list-style: ...;
}
ol li {
    margin: ...;
    padding: ....;
    background: ....;
}
ol ol {
    width: auto;
    list-style: ....;
}
ol ol li {
    padding: none;
    margin: none;
    background: none;
}

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

Но главное - если каждый элемент такого списка - самостоятельная единица ( типа короткие статьи ) то эту лишку нельзя выдернуть из списка и всунуть в другой блок. Обязательно нужно будет обернуть ( ol или ul ).

Вобщем гибкостью тут и не пахнет.

А откуда у тебя вообще появилась мысль про вложенные списки? Разве ТС об этом где то упоминает?

[Быколай]

А откуда у тебя вообще появилась мысль про вложенные списки? Разве ТС об этом где то упоминает?

просто невинный опрос мнения плавно разворачивается в холивар

[mishka]

А откуда у тебя вообще появилась мысль про вложенные списки? Разве ТС об этом где то упоминает?

Мысли эти появились уже очень давно.

Так как неоднократно с таким сталкивался, когда нужно внутрь добавить список, простой дэфолтный список. А тут, как видишь, внутри будет текст и откуда уверенность что никогда не будет там списка?

Ребята, список - это список, а не все то что похоже на повторяющиеся блоки.

Вот тут очень бы хотелось узнать мнение Sorrow.

В общем делай каркас блоками/секциями. Да и стилизации это поддастся лучше чем нумерованный список.

[SelenIT]

потом ковыряйся с ними

Вот и я говорю — в идеальном сферическом вакууме OL вроде бы в тему, но стоит подумать о том, как этот абстрактный сферический идеализм стилизовать для реального мира... то лучше ну его-с.

откуда ... вообще появилась мысль про вложенные списки?

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

невинный опрос мнения плавно разворачивается в холивар

Сколько помню, в вопросах семантики всегда так бывает

[Быколай]

В общем делай каркас блоками/секциями. Да и стилизации это поддастся лучше чем нумерованный список.

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

Спасибо всем за мнения, семантика это всегда интересно

Edited March 24, 2011 by Быколай

[mishka]

Вот и я говорю — в идеальном сферическом вакууме OL вроде бы в тему, но стоит подумать о том, как этот абстрактный сферический идеализм стилизовать для реального мира... то лучше ну его-с.

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

+100500

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

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

Спасибо всем за мнения, семантика это всегда интересно

Если работает - здорово. Полностью удовлетворяет задачам - вообще супер.

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

Насчет семантики - я не нахожу, в данном случае, список более семантическим чем блоки.

[psywalker]

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