Оцените HTML5 верстку

[stan077]

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

 

[npofopr]

выложите лучше например на http://jsfiddle.net/

 

[stan077]

Не вопрос вот http://jsfiddle.net/stan07/YFTQx/

 

[BaNru]

Ну HTML код в общем не плохо сверстан.

Очень не понравился <section id="status_bar">, как то не в тему.
И я бы nav поместил в хедер.

(ИМХО, некоторые может не согластяся :biggrin: ) Раз это HTML5, то пора отказываться от лишних оберток, типа wrapper

Так же даже в макете (рыбе) alt у картинок лучше подписывать, хотя бы "картинка".

К сожалению код выложен криво, общую картину не увидел (CSS и дизайн).

 

[stan077]

Спасибо!

 

[olgamar]

Я в верстке только начинаю и, возможно, сечас не то ляпну, но почему для ie столько отдельных костылей

<!--[if IE]>
<link rel="stylesheet" href="css/ie.css">
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]--><!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css">
<![endif]-->

в современных html5 макетах обязательно прописывается shim,

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

остальное - по необходимости. Здесь можно так же сделать?

 

[npofopr]

можно оставить только shim)

 

[stan077]

olgamar, таки можно :biggrin:
Спасибо, не знал.

 

[A-F]

nav не обязательно может быть в header он может где угодно быть, семантика же

 

[tigra60]

Ммм, да! Потешно вы section и article применяете.
<section id="header"> и <section id="footer"> это непревзойденно!!!

Совет 1. Если не знаете, что поставить section или article, ставьте DIV

Совет 2. section и article предназначены для секционирования содержимого сайта, а не для выделения блоков под представление. Поэтому слайдер или карусель будет правильно разместить в DIV, а не в section

Совет 3. article - это нечто целостное, которое будучи, например, помещено где-нибудь в другом месте, не производило бы впечатление оторванной руки. А вот section может быть как большим куском, содержащим более мелкие части контента, так и самой этой мелкой частью (вплоть до абзаца)


Розги 1. За второй элемент списка в этом примере:

<li><a class="first" href="#">главная</a></li>
<li class="divider">&nbsp;</li>

Розги 2. За <aside id="LeftSide">.
Идентификатор или имя класса должно отражать тип содержимого, а не его внешний вид или расположение

Розги 3. За <br><br> (два подряд переноса строки)

 

[stan077]

Спасибо, полезные советы, учту.
Я извиняюсь за свою непонятливость, в розги 2. За <aside id="LeftSide"> Вы написали
"Идентификатор или имя класса должно отражать тип содержимого, а не его внешний вид или расположение"
Как тогда разделить левую и правую стороны если макет , допустим, трех колоночный?

 

[tigra60]

Здесь сложность в том, что на этапе макета не всегда точно известно, что будет, например, в левом сайдбаре, что в правом, а что в нижнем (такой, кстати, тоже может быть!). Или содержимое слишком разнообразное, чтобы как то однообразно его охарактеризовать. В таком случае можно применять нумерованные имена, например, mix-one или aside2. То есть, вы как бы группируете информацию по отдельным частям какого-то общего блока. Имя этого блока соответствует тому, что он содержит, а части просто нумеруем по порядку (например, mix-one, mix-two, mix-three). И то, какая часть будет расположена справа, а какая слева, определяет CSS и только CSS.

Конечно, если у вас, например, трехколоночный макет, проще всего глобально разделить его на три блока и назвать их, например, left-box, center-box и right-box. Ну, что на это ответить? Еще проще будет это таблицей сделать. У Лебедева так и делают (см. их студию и яндекс).
В таком случае, говорить о семантике, документе и прочих заумных вещах нет никакого смысла. В конце концов, под штанами не видно, в каком состоянии ваши трусы.

 

[stan077]

Понятно, ещё раз спасибо!!!