Блоки новостей. Как семантичнее верстать?

[novicheG]

Ориентируюсь в верстке примерно на первую десятку фрилансеров-верстальщиков. Блоки новостей верстают по-разному - кто <dt> кто <ul> кто <em> <p> и пр.

И все-таки кто-как считает - как семантичнее верстать?

Edited April 7, 2011 by novicheG

[SelenIT]

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

<article> с <time>

Не DL однозначно (текст новости — ни разу не определение и даже не "значение" даты). Просто список — можно поспорить, но имхо тоже притянут (если уж на то пошло, скорее напрашивается OL, т.к. новости обычно идут в определенном порядке — хронологически). Если ограничиться семантикой HTML4(XHTML1), то, на мой теперешний взгляд, пожалуй, самое здравое — заголовки какого-нибудь минимального ранга и обычные абзацы, сплошняком, без каких-либо оберток вообще.

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

[swetlana]

эхъ…

такой вопрос. Так хотелось ответить.

А пришёл SelenIT и всё разъяснил так, что и добавить нечего.

Вот так всегда.

Автор, простите, а что это за легендарная первая десятка фрилансеров-верстальщиков, которая даже dl как-то притягивает под ленту новостей?

[Serlutin]

<article> с <time>

Я вот задумываюсь. А может быть всё-таки <section> c <time>, а весь блок завернуть в <article> и заголовок "Company news".

Вообще, если честно, то иногда очень не хватает какого-нибудь русского сайта по HTML5 семантике. Иногда в поисках банального вопроса перероешь и html5doctor и html5gallery, а ответа так и не найдешь. Так мало того, что не найдёшь, так и ещё куча противоречивых мнений получишь.

[swetlana]

ну нет, section тут совсем не в тему.

каждая новость сама по себе самодостаточна. А это основной признак article.

[SelenIT]

ещё куча противоречивых мнений получишь

Так почти всегда бывает. Семантика в вебе — штука достаточно условная, гибкая и субъективная, выразительных средств, даже со всеми вкусными добавками нового "живого стандарта", увы, маловато, и эта голь бывает хитрой на выдумки. Достаточно логичные на первый взгляд аргументы "за" можно притянуть практически к любой, сколь угодно абсурдной идее (типа списка для частей страницы). После нескольких лет мучительной неясности и отчаянных криков в пустоту на меня снизошло что-то типа просветления, порядком перекликающееся с правилом №1 в подписи несравненной Светланы . Я понял, что надо выдумывать аргументы не за, а против каждого из вызывающих сомнения вариантов структуры — и отсекать их один за другим в порядке убывания убедительности этих аргументов. Пока, методом исключения, не останется единственный наименее спорный. Он-то скорее всего и будет верным.

что это за легендарная первая десятка фрилансеров-верстальщиков, которая даже dl как-то притягивает под ленту новостей?

К сожалению, кое-где такое прямо советуют. И подтверждаю по себе, соблазн расширенной семантики списка "имя-значение" велик. Каюсь, года три назад в одном интранетном (к счастью) портале и я заюзал как-то такую бяку...

[novicheG]

<article> с <time>

Не DL однозначно (текст новости — ни разу не определение и даже не "значение" даты). Просто список — можно поспорить, но имхо тоже притянут (если уж на то пошло, скорее напрашивается OL, т.к. новости обычно идут в определенном порядке — хронологически). Если ограничиться семантикой HTML4(XHTML1), то, на мой теперешний взгляд, пожалуй, самое здравое — заголовки какого-нибудь минимального ранга и обычные абзацы, сплошняком, без каких-либо оберток вообще.

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

+1 Согласен со всем, тоже не считаю что здесь уместны списки, логичнее <h></h><p></p>. (Но я верстаю xhtml 1.0.)

Автор, простите, а что это за легендарная первая десятка фрилансеров-верстальщиков, которая даже dl как-то притягивает под ленту новостей?

Ну собственно вот они

Ну и дабы не быть голословным - вот применение dl, ul li - верстальщиками первыми в списке.

Вывод: все же логичнее делать <h></h><p></p>? Я просто макет верстаю не за деньги а на "выставку" показать здесь на форуме, поучиться и собрать критику/коментарии .

Edited April 8, 2011 by novicheG

[Быколай]

Ну собственно вот они

сомнительные авторитеты...

сайт Андрея Провёрстки №2-ой http://провёрстка.рф/ - заходим на главную страницу - ужасающие коридоры.

сайт Макса Гриневича №5-ый http://www.grinmax.com/kontakt.php может и сочно, но не труЪ

<div class="forma">
<div class="email" id="em">Email: </div>
<form method="post" action="kontakt.php">
<p><input  value="flint_ant@mail.ru"  id="in" style="margin-left:13px;" type="text" name="email"  size="31"/>
<br/><span class="email" style="margin-left:-15px">Oт кого:</span><input style="margin-left:12px;" type="text" name="name" size="31"/>

<br/><span class="email"style="margin-left:-5px">Текст:</span><textarea style="margin-left:13px;" rows="8" name="txt" cols="31"></textarea>
<br/><input style="margin-left:45px;" type="submit" value="Отправить" name="B1"/>
<input  type="reset" value="Очистить" name="B2"/></p></form>
</div>

это те у кого собственные сайты увидел.

[swetlana]

Ну и дабы не быть голословным - вот применение dl, ul li - верстальщиками первыми в списке

ну и там же видим конструкции:

		<i class="cn tl"></i>
		<i class="cn tr"></i>
		<i class="cn bl"></i>
		<i class="cn br"></i>

Такое ни на выставку, ни в продакшн.

Это просто хлам.

Это за ответ сгодится?

[novicheG]

ну и там же видим конструкции:

		<i class="cn tl"></i>
		<i class="cn tr"></i>
		<i class="cn bl"></i>
		<i class="cn br"></i>

Такое ни на выставку, ни в продакшн.

Это просто хлам.

Это за ответ сгодится?

Извините (см. мой никнэйм) но я вас не пониматЬ Можно чуть доступнее?)

Edited April 8, 2011 by novicheG

[swetlana]

ну а что не понимать?

куча пустых блоков.

Это семантично? А тема о семантичности.

Если «топ-верстальщик» такое себе позволяет, стоит ли на него ориентироваться в вопросах семантичности?

А вообще, топ на фрилансе никак не отражает профессиональный уровень.

[Serlutin]

ну а что не понимать?

куча пустых блоков.

Так в копирайте стоит 2009 год. В то время border-radius в тестовом режиме реализовали в Firefox и Chrome. Да уже призывы были, но тогда игнорировать кучу браузеров было бессмысленно.

А четыре пустых блока отличное решение для резиновых уголков. К тому же на семантику это никак не влияет. Пустой блок он и в Африке пустой блок. Они, конечно, не помогают, но и не мешают.

К сожалению, кое-где такое прямо советуют.

Вопрос, а что из ещё предложенного на том сайте не рекомендуется делать?

Например, можно ли с помощью списка определений делать формы? Я считаю, что можно, хотя уже начинаю сомневаться.

Диалоги, конечно, тоже можно. Ведь для этого даже собирались новый тег в HTML5 вводить, но по мне довольно сложно потом с оформлением разбираться. Проще обычным параграфом сделать.

Кстати, так что на счёт блока новостей? Просто меня немного смущает тот факт, что куча <article> будет без заголовка. Либо имеется ввиду то, что дата будет находится в <Hx>, и в <time>?

[swetlana]

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

[Быколай]

Например, можно ли с помощью списка определений делать формы? Я считаю, что можно, хотя уже начинаю сомневаться.

аналогично, присоединяюсь. Интересно авторитетное мнение Светланы по этому вопросу.

[SelenIT]

Вопрос, а что из ещё предложенного на том сайте не рекомендуется делать?

Например, можно ли с помощью списка определений делать формы? Я считаю, что можно, хотя уже начинаю сомневаться.

Диалоги, конечно, тоже можно.

Формы — имхо, да (на мой взгляд, отношение определяемое-определение между подписью поля формы и его значением вполне себе выражено, хотя форма — вообще особый случай, тут очень зыбкая грань между парами "имя-значение" и настоящей таблицей 2?n). Диалоги — имхо, определенно нет. В HTML5 это прямо запрещено (Note в самом конце), и аргументы, что разрешение на это в HTML4 было ошибкой, имхо, убеждают...

[swetlana]

…Интересно авторитетное мнение Светланы по этому вопросу.

В большинстве случаев можно.

Но не нужно.

Почему можно — опять соглашаюсь с SelenIT'ом.

Почему не нужно: всё-таки dl для форм хоть и успешно, но всё же притянут за уши.

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

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

[Быколай]

В большинстве случаев можно.

Но не нужно.

понял спасибо.

[SelenIT]

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

Вот тут я немножко не соглашусь . Label, да, привязывает подпись к полю логически и поведенчески (передает клик, в этом label схож со ссылкой на якорь), но ничего не говорит о структурной организации формы — формально он может болтаться вообще на другом конце кода и экрана. А все копья на тему "верстать форму таблицей/списком/абзацами/whatever-ом" ломаются именно вокруг этой структурной стороны. Поскольку и label, и контролы форм по дефолту инлайновые, то какая-то структурная обвязка напрашивается, иначе при отключенных стилях получится неразборчивая "колбаса" из подписей и полей в одну строку сплошняком — явно не то, чего ожидает юзер от формы с ее четкой парной структурой "подпись — поле". Филдсет для каждой пары — никак не вариант, он для группировки нескольких логически связанных полей. Абзац... ну не знаю, имхо, не похожа форма на обычный связный текст (против списка это соображение, кстати, тоже работает). Разрывы дефолтной "колбасы" <br>-ками — вообще бяка, к тому же плохо управляемая стилями. Вот как быть?

Сейчас я пришел к выводу, что для структурирования формы, как ни странно, минимальным злом (или даже вынужденно необходимым добром) является, как ни странно... таблица (кроме прочего, ее гораздо проще, чем что-то иное, модифицировать для чуть нестанартных случаев, напр., для составных полей, да и W3C, судя по примерам, вроде как давно не против). И на втором месте с приличным отрывом — dl-ка (для нечастых случаев, когда у формы четкая структура "а-ля словарик").

[sigma77]

SelenIT,

А почему списки не подходят?

ИМХО, фактически форма является зачастую аналогом анкеты. А анкеты обычно и составляются в виде списка.

Ну а так да, согласна, нужно смотреть по конкретной ситуации. Хотя я больше тяготею пока к спискам нежели к таблицам

[Serlutin]

Как мне кажется, надо смотреть на размер формы.

Например, для формы "Логин-пароль" список определений хорошо подходит.

Вот такую форму я бы тоже списком определений сделал.

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

[swetlana]

… Хотя я больше тяготею пока к спискам нежели к таблицам

а ведь и впрямь надо смотреть по ситуации, но таблица для формы чаще подходит, чем список.

Колонки: название, значение, пояснение — например так.

И в них замечательно размещаются соответствующие данные.

[Serlutin]

Раз уж зашёл разговор про список определений, то такой вопрос.

Чисто теоретически можно бы сделать вот такое сделать с помощью списков определений?

У Яндекса сделано чисто практически с помощью огромного количества div и span, а вот как с точки зрения семантики?

[swetlana]

сделать можно что угодно: списки определений, огромное количество дивов-спанов.

Но тут явно таблица.