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

[cyklop77]

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

сомнения такие:

1. по совету опытного верстальщика попробовал шорты заключать в article(как самостоятельный контент). получилось не очень логично по-моему

2. не уверен по поводу выделения двух aside, но более логичного решения не нашёл

[xeLL]

http://www.scribd.com/doc/92533332/HTML5-Element-Flowchart-by-HTML5-Doctor

Вот можете ознакомиться с этим - это правильно!

[mrnobody]

http://www.scribd.com/doc/92533332/HTML5-Element-Flowchart-by-HTML5-Doctor

Вот можете ознакомиться с этим - это правильно!

Хорошо, если бы перевод был, а то я пробовал перевести у меня не очень получилось.

[Viper]

оцените пожалуйста семантику

1. советую проверять правильность назначения заголовков, структуру сайта. Можно, например, тут или с помощью плагинов для браузеров.

2. По каким соображениям вы каждую рекламу поместили в article и все это обернули в aside? Структурные теги в HTML5 достаточно гибкие, но article, насколько я понимаю, не в каких случаях не должен находиться в aside. И у вас не отображаеться блок Реклама на сайте(или только у меня?).

3. Навигация в футере не должна находиться в теге <nav>, потому-что, она - дубликат меню в header.

4. В артиклах(article), что в Latest events, я бы не использовал <header>, так как там нету контента(ну разве-что, изображение): получаеться как-то не логично, шапка есть, а основной части... Может и спорно, но считаю, что в данном случае вы переборщили с семантикой... ИМХО

5. Брать текст, что под заголовками в <strong> не имеет никакого смысла, с точки зрения семантики, ИМХО. Например, в большенстве устройств чтения с экрана, такой тег будет озвучиваться более громко, чем остальной текст(в том числе и сам заголовок). Это не логично. Например, слово "WELCOME!", отлично подошло бы для тега <strong>, с точки зрения семантики, ИМХО. Возможно, будет более семантичней использовать следущую конструкцию(зависит от их сути):

<hgroup>
   <h1>LATEST EVENTS</h1>
   <h2>LOREM IPSUM DOLOR SIT AMET, DFGTY</h2>
</hgroup>

6. Придерживаюсь мнения, что копирайт сайта(в вашем случае "Copyright © Your Company Name"), семантичнее брать в тег <small>, ИМХО

7. Предполагаю, что вы акцентировали внимание только на стуртурных/семантических тегах. По этому, я пропустил(не обращал внимание) ошибки семантики в других аспектах сайта. Но не забываете, что это только малая часть семантики сайта...

П.С. Думаю, в этом макете вы перемудрили с семантикой...) Но, возможно, неправ я)

Edited May 12, 2012 by Viper

[cyklop77]

оцените пожалуйста семантику

7. Предполагаю, что вы акцентировали внимание только на стуртурных/семантических тегах. По этому, я пропустил(не обращал внимание) ошибки семантики в других аспектах сайта. Но не забываете, что это только малая часть семантики сайта...

интересно было бы почитать и про них

а заголовок чем не понравился можно узнать? я плагин к опере использовал для проверки

4. В артиклах(article), что в Latest events, я бы не использовал <header>, так как там нету контента(ну разве-что, изображение): получаеться как-то не логично, шапка есть, а основной части... Может и спорно, но считаю, что в данном случае вы переборщили с семантикой... ИМХО

а изображение это не контент? я его именно поэтому и сделал не фоном, а img. с расчетом на то, что он будет меняться из админки(как и в случае с блоком .reklama)

Edited May 12, 2012 by cyklop77

[Viper]

а изображение это не контент?

Да, контент. Вы пропустили мое уточнение - "так как там нету контента(ну разве-что, изображение)". И как я написал: это спорный момент(4-й пункт), в котором я высказал свое мнение(ИМХО).

а заголовок чем не понравился можно узнать? я плагин к опере использовал для проверки

Не заголовок(один), а их структурированность. Но, если честно, при просмотре кода я в них запутался из-за, как мне кажется, перебора структурных тегов. Сервисы, например, этот, указали на их неправильность. Разбираться я не стал, по этому постарался только обратить внимание на них.

интересно было бы почитать и про них

Не семантические названия некоторых ID, Class, файлов(например, #h5o-8, .text_1_outer_1, /img1.png). Не семантический текст в некоторых атрибутах alt(например, alt у изображения логотипа - "Restaurant", хотя на изображении не ресторан, а логотип ресторана - его название).

Большую часть семантики занимают еще такие технологии, как: RDFa, microformats, WAI-aria и тд.(Semantic Web). Но их упоминание в данном случае, это всего лишь показать объемность семантики в вебе.

Edited May 12, 2012 by Viper

[cyklop77]

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

[Viper]

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

"Untitled Section" - означает, что структурный тег не имеет заголовка(h1-h6), которые нужны для создания содержания/плана сайта, в общем-то, их тоже можно назвать структурными тегами...

Структурные теги(такие как: section, article, aside, header, nav) должны содержать заголовок или внутри тег <header> с заголовком.

Судя из показателей этих сервисов, отсутствие заголовка в теге <nav>, они так же считают за ошибку. Всегда думал, что в этом теге заголовок не обьязателен по всем правилам... возможно, ошибался или это уже сервисы уж слишком придираються к правилам...

[cyklop77]

нет. мне кажется, это не основательно. ну каким боком можно приладить заголовок например блокам .reklama и todays_specials . а для <nav> вообще в 99% случаев его нельзя поставить. с другой стороны заключить эти блоки в другие тэги("неструктурные") не получится при всем желании

и сервис по моему ошибок не показывает

Edited May 12, 2012 by cyklop77