Jump to content
  • 0

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


Быколай
 Share

Question

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

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


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

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

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

Link to comment
Share on other sites

Recommended Posts

  • 0

Если честно, то я никогда не понимал семантичности списков. Давайте думать вообще для чего нужна семантика?

Семантика нужна (начался список):

1. Для поисковых ботов

2. Для голосовых движков

3. Для чувство собственного величия

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

На странице объёмная статья (article можно перевести как статья), после небольшого вступления (div class="intro") идут части (section) с пронумерованными (цифру можно и в HTML поставить) подзаголовками (h2), то есть описываться по порядку некий процесс. В каждом пункте пара абзацев (p) и иллюстрации (если нужно figure и figcaption).

Получается что-то такое:

<article>
<h1>Cоздание атомной бомбы в домашних условиях</h1>
<section>
<h2>1. Продумывание</h2>
<figure>
<img src="#" alt="Атомная бомба в разрезе">
<figcaption>
Атомная бомба в разрезе
</figcaption>
</figure>
<p>Бла-бла бла</p>
</section>

<section>
<h2>2. Покупка запчастей</h2>
<figure>
<img src="#" alt="Запчасть">
<figcaption>
Вот так выглядит запчасть.
</figcaption>
</figure>
<p>Бла-бла бла</p>
</section>
</article>

На счёт заголовков. В section можно использовать и h1, но мне как-то это не очень по душе.

Каждую главу оборачивать в section можно только ради удобства ориентирования в коде. А ещё для того, чтобы показать знание HTML5 :(

Link to comment
Share on other sites

  • 0

цифру можно и в HTML поставить

но если вырвать из контекста фрагмент с нумером в заголовке, то не ясно что несёт эту цифра. поэтому мне кажется предпочтительней нумерация именно в контексте конструкции, то есть при помощи списка. html 5 круто, но как я давал понять задачу надо было решить средствами xhtml, тик что ваши рассуждения носят уже более теоретический, отвлечённый характер :(

Блин, хоть бы это никогда не заканчивалось :(

что не кончалось?

Link to comment
Share on other sites

  • 0
если вырвать из контекста фрагмент с нумером в заголовке, то не ясно что несёт эту цифра

Зато однозначно показывает, что это именно фрагмент, один из многих. И, чтобы сделать эту атомную бомбу (или о чем мы там говорили?), нужно пройти весь квест и собрать все остальные :(

А вообще через CSS можно пронумеровать всё что угодно. Если бы не IE7-...

P.S. не удержался...

проект не html 5, а XHTML 1.0 Transitional

...попробуйте объяснить это свежевыпущенному FF и актуальным Хромам :(

Link to comment
Share on other sites

  • 0

html 5 круто, но как я давал понять задачу надо было решить средствами xhtml

Тогда делайте так, как указано в первом сообщении (заголовок, картинка, параграф).

Из-за какой-то цифры делать статьи нумерованным списком - слишком мудрённо. Список определений тоже не в тему.

Я обычно пытаюсь применить семантику к реальной жизни. Если следовать вашей логике, то получается, что страницы в книге — нумерованный список?

Link to comment
Share on other sites

  • 0

Тогда делайте так, как указано в первом сообщении (заголовок, картинка, параграф).

Из-за какой-то цифры делать статьи нумерованным списком - слишком мудрённо. Список определений тоже не в тему.

Я обычно пытаюсь применить семантику к реальной жизни. Если следовать вашей логике, то получается, что страницы в книге — нумерованный список?

Вот +1 кстати :(

Link to comment
Share on other sites

  • 0

Тогда делайте так, как указано в первом сообщении (заголовок, картинка, параграф).

Из-за какой-то цифры делать статьи нумерованным списком - слишком мудрённо. Список определений тоже не в тему.

Я обычно пытаюсь применить семантику к реальной жизни. Если следовать вашей логике, то получается, что страницы в книге — нумерованный список?

Страницы конечно нет, а вот оглавление очень даже.

Вообще даже немного удивило.

Ведь это же хрестоматийный случай.

И вот тут есть пример строго по вопросу автора темы.

Какие ещё списки? Зачем они тут?

Вот Светлана - светлая голова. На самом деле это самое верное решение.

  • Like 1
Link to comment
Share on other sites

  • 0

А то, что это не пашет в ИЕ6-7, не смущает?

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

Link to comment
Share on other sites

  • 0

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

А, ну тогда и проблем нет.

Link to comment
Share on other sites

  • 0

Вот Светлана - светлая голова. На самом деле это самое верное решение.

Тут в любом случае, хоть нумерацию получать прямо с сервера, хоть джсом нумеровать ( для кроссбраузерности полной ), хоть с помощью css нумеровать.

Но в любом случае лучше это делать не списком.

Особенно начинающие верстальщики норовят всунуть в список все что видят.

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