Вёрстка под HTML5

PanSoul · April 21, 2011

Привет Всем

Вот решил переходить на новые стандарты и сверстал на HTML5.

Просьба оценить, в Первую очередь, верно ли Я употребил новые теги, по назначению ли? - конечно, Я прошу это у тех, кто смыслит в этом...

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

Enter in

P.S. источник "вдохновения"

Edited April 21, 2011 by PanSoul

psywalker · April 21, 2011

Блин, вот реально не дано мне понять наверное, зачем браться за новое, если старое даже ещё не понял ни капли

Походу и правда поржать наверное.

PanSoul · April 21, 2011

Блин, вот реально не дано мне понять наверное, зачем браться за новое, если старое даже ещё не понял ни капли
Походу и правда поржать наверное.

Можно и поржать...

Но прежде, пожалуйста, скажите что не так? Ведь ради этого Я и выкладываю, со стороны виднее ошибки...

psywalker · April 21, 2011

Можно и поржать...
Но прежде, пожалуйста, скажите что не так? Ведь ради этого Я и выкладываю, со стороны виднее ошибки...

Я тебе сказал, что не так.

PanSoul · April 21, 2011

Я тебе сказал, что не так.

Вот этой фразой чтоли?

зачем браться за новое, если старое даже ещё не понял ни капли

Я что-то не понял...

Edited April 21, 2011 by PanSoul

LunatiK · April 21, 2011

Я вот тоже не особо разглядел над чем тут можно поржать? Макс, разъясни!

по коду заметил тока div'ы которым там не место.

Мож конечно что-то упустил, ну и в css не заглядывал.

Serlutin · April 21, 2011

По HTML5 есть что покритиковать, но это только вечером, если Светлана до меня всё не выскажет.

PanSoul · April 21, 2011

Я вот тоже не особо разглядел над чем тут можно поржать? Макс, разъясни!
по коду заметил тока div'ы которым там не место.
Мож конечно что-то упустил, ну и в css не заглядывал.

Да вроде Я над каждым дивом думал, стоит ли его писать или нет...

Вот только над чем Я думал долго: это стоит ли div'ы оставлять как div'ы, или же их нужно в section - если данные div'ы служат для разметки?!

По HTML5 есть что покритиковать, но это только вечером, если Светлана до меня всё не выскажет.

Жду-жду

Edited April 21, 2011 by PanSoul

LunatiK · April 21, 2011

Да вроде Я над каждым дивом думал, стоит ли его писать или нет...
Вот только над чем Я думал долго: это стоит ли div'ы оставлять как div'ы, или же их нужно в section - если данные div'ы служат для разметки?!

некоторые можно было сделать aside'ом

swetlana · April 21, 2011

<body onload="makeStripe(document.getElementById('zebra'));">

какой кошмар Зачем?

А как же :nth-child(even)? А скриптик можно и под условным комментарием подключить.

 alt="" title=""

Мрак! (глядючи в этот код, я скоро обучусь части лексикона Эллочки-людоедки, да-да). Зачем? Это же не xhtml с его массой непонятных ограничений и неразумных требований.


		<section class="logo">
			<a href="#"><img src="images/logotype.gif" alt="BusinessName.com" title="BusinessName.com" width="235" height="35" />
			<span>Veroeros etiam dolore</span></a>
		</section>

…

@#$%!!!!

Таких слов, чтобы описать это, нет даже в словаре русском матерном.

Это зачем? Это как? Это что? Это раздел чего? При чём тут <section>? При чём тут <span>?

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Почему без версий?

Для устаревших всего лет на пять версий IE (9-10) такое не нужно. Это только для безнадёжно устаревших версий IE (7-8).

Форма поиска комментированию просто не поддаётся. Там просто непонятно что. Какие-то навороты, характерные не просто для xhtml, а для xhtml, написанного студентом-халтурщиком.

Общее обилие контейнеров. А смысл? Зачем? Ведь в данном конкретном случае управление потоком примитивнейшее.

А вот там, где контейнеры были бы уместны из соображений семантики (например, лента новостей), их почему-то нет. И для оформительских целей там одна из страшных ересей: <br class="clear">. Эту ересь в принципе мало что может оправдать. А в данном случае — просто ничто.

<p class="space"></p>

Зачем? Что это? Что несёт читателю этот абзац?


		<h3 class="mini-header">Lorem ispsum sed amet</h3>
		<aside class="mini-block">
			<img src="images/foto-woman.jpg" alt="" title="" width="240" height="92"  />
			<strong>Lorem ipsum dolor</strong> amet dolore eart. Nam dapi bus lorem ipsum dolor consqquat semper. Nulla blandit sed amet volutpat. Tempus sed dolore etiam lorem ipsum et nullam. <a href="#" class="href">Learn more ...</a>
		</aside>

Почему заголовок вынесен из блока?

Это всё только при поверхностном взгляде.

Редко я оцениваю работу именно как плохо. Но в данном случае однозначно плохо.

С html5 это ничего общего не имеет. Разве что в угоду моде натыканы наугад новые тэги. Но это не html5. Суть как минимум не понята.

html5 предполагает простоту и естественность.

Здесь нет ни того, ни другого.

psywalker · April 21, 2011

Я вот тоже не особо разглядел над чем тут можно поржать? Макс, разъясни!

Да нет проблем. Поржать - это я образно выразился и отреагировал на то, как поприветствовал всех ТС (похоже на то, что он сам решил выставить свою работу, ради поржать ), имелось ввиду, что ни к чему совершенно переходить на новые фичи, если ты ещё даже как следует не понял суть самых азов.

swetlana · April 21, 2011

По HTML5 есть что покритиковать, но это только вечером, если Светлана до меня всё не выскажет.

да, есть что покритиковать.

Но Светлана не может высказать всё. Нервы стоит поберечь

…ни к чему совершенно переходить на новые фичи, если ты ещё даже как следует не понял суть самых азов.

html5 — это не фича, это принципиальный подход.

К этому всё давно уже шло, и тот же подход уместен и при старых доктайпах.

Но вот использование новых тэгов не к месту — это можно расценить лишь как дань моде.

Отсутствие внятной структуры документа — да, как непонимание основ.

psywalker · April 21, 2011

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

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

swetlana · April 21, 2011

не обязательно.

в старых стандартах довольно мало внимания уделяется структуре документа.

А это и есть основа.

А в xhtml и вовсе само понятие структуры документа извращено. Делается упор на синтаксис разметки, и при этом декларируется полное безразличие к контенту.

Я вот тоже не особо разглядел над чем тут можно поржать? Макс, разъясни!

Макс ошибся.

Тут не ржать, тут плакать в самый раз.

psywalker · April 21, 2011

не обязательно.
в старых стандартах довольно мало внимания уделяется структуре документа.
А это и есть основа.
А в xhtml и вовсе само понятие структуры документа извращено. Делается упор на синтаксис разметки, и при этом декларируется полное безразличие к контенту.

Неважно, это основы и их нужно знать и понимать, знать грань между ul и ol и т.д.

Макс ошибся.
Тут не ржать, тут плакать в самый раз.

Нет, Макс не ошибся. И плакать тут нужно именно потому-что Макс был прав.

Justnewone · April 21, 2011

с картинками нехорошо получилось, пережатый градиент, недожатые картинки.

LunatiK · April 21, 2011

Макс и Светлана, т.е. вы не двузначно намекаете, что без ортодоксального понятия в семантике за HTML5 лучше не браться ?

psywalker · April 21, 2011

Макс и Светлана, т.е. вы не двузначно намекаете, что без ортодоксального понятия в семантике за HTML5 лучше не браться ?

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

Gaspode · April 21, 2011

Объясните тёмному семантическую разницу между <section> и <article>. Я всё сайты на хтмл5 просматриваю и не могу уловить принципа.

Justnewone · April 21, 2011

http://noteskeeper.ru/54/

может это поможет?

Gaspode · April 21, 2011

Как я сейчас понимаю, section - это "большой" блок (вроде <div id="content">), а article - это уже блок внутри него (например заголовок нижнего уровня + несколько абзацев)

И ещё: куски вроде <header><h1>Заголовок</h1></header> - по-моему, это масло масляное. Или нет?

может это поможет?

Если честно, только больше запутало =D Походу, мой разум не готов постичь это.

*вздохнул и пошёл верстать дивами*

Edited April 21, 2011 by Gaspode

Serlutin · April 21, 2011

Так сначала просто про семантику расскажу (вдруг кто-то быстрее меня расскажет), а потом уже про саму вёрстку.

Сначала стоит понять, что <header>, <aside> и др. теги — не аналоги <div id="header"> (кстати, одна из ошибок в этой вёрстке). Новые теги — структурные элементы, которые разделяют всю страницу или статью, или комментарий на логические блоки.

<header> — это логическая шапка. Если проводить аналогию с письменными документами, то это верхний колонтитул. Не заголовок. header может использоваться для шапки сайта, для шапки статьи ит.д. Обычно в нём содержится заголовок, если заголовков несколько, то используется <hgroup>.

<hgroup> — группирует несколько подряд идущих заголовков. Как вариант, может заменить собой header, а может и входить в него, тут уже нужно смотреть по ситуации.

<article> — часть информации, которая может быть обособлена (да, я не умею объяснять). Если проще, это то, ради чего и создавался сам сайт. Выбрасываем весь дизайн, всё навигацию по страницам, и остаётся она — информация. article может использоваться для статей, комментариев (каждый коммент в отдельный article), новостей. Является одним из важнейшими элементами на странице.

<section> — логический раздел. Предназначается для структурирования контента. Может использоваться, например, для разделения статьи на главы. В качестве ещё одного примера, можно привести подвал на главной странице htmlbook.ru Блоки "О сайте", "Основные разделы" ит.д. — это разделы подвала.

<aside> — выполняется роль дополнительного контента. Например, небольшая историческая справка или интересные факты в статье. Как вариант, можно использовать его для сносок (footer правда подходит немного лучше, но опять всё зависит от ситуации). Если рассматривать всю страницу с точки зрения логики, то <aside> используется (кто бы мог подумать) для боковых колонок. Можно, также использовать для информации, которая менее важна на странице (только тут главное не перемудрить). Ещё одно предназначение, о котором практически никто не знает — это кнопки для лайков и рассшариваний в соц. сетях. Те, кто скажет, что это <nav>, будут не правы, так как нажатие этих кнопок приводит не к переходу к другому контенту, а к какому-либо действию. Те, кто скажет, что это <menu> будут тоже не правы, так как это не производит никаких действий с самим контентом, а нацелено на сторонний ресурс.

<nav> — используется для навигации. Теоретически, уже можно отказаться от меню на списках и фигачить на таблицах оставлять одни ссылки без лишних контейнеров. Однако whatwg и w3c, всё-таки рекомендуют оборачивать меню в список ul или ol, но всё-равно нужно смотреть по обстоятельствам. Нужны вам дополнительные контейнеры в виде ul и li, то делайте списком, не нужны, то оставляйте одни ссылки.

Внимание! Элементы <nav>, <article>, <section> и <aside> формируют новую логическую единицу структуры. Что это значит? В идеале, в html5 (ну то есть новый html) страничка логически разбивается на структурные элементы, в зависимости от этих четырёх сематических блоков и заголовков. Поэтому желательно, чтобы в каждом семантическом блоке (<nav>, <article>, <section> и <aside>) был заголовок. Если заголовка нет, то подумайте подразумевается ли он. Например, главное меню, да и вообще любая навигация вполне может обойтись без заголовка. С небольшой натяжкой, боковая колонка может обойтись без заголовка. Однако, <article> практически всегда имеет заголовок. Исключения есть, но они только подтверждают правила. Например, безымянное стихотворения. Для проверки логичности разметки нужно использовать outliner (вот ещёoutliner в виде букмарклета). Чем меньше у вас безымянных блоков, тем лучше. В будущем, возможно, это поможет вывести устройства чтения с экрана на новый уровень. Те, кто возможно сталкивался с ними сейчас, понимает, как тяжело с помощью них бродить по интернету).

<footer> — используется для некой побочной информации, которая обычно изображается снизу. Для всей старицы — это адреса, телефоны, название дизайн-студии, SEO-ccылки и пр. Для статей, это информация о авторе, о дате публикации. Кстати, если footer не обязательно должен идти снизу. Логически, он может быть использован вверху статьи, если там содержится информация об авторе. Правда такой приём ломает привычный вид на оформление блоков, поэтому право использовать <header> или <footer> для указание инфо об авторе в верхней части статьи, лежит полностью на верстальщике.

<menu> — используется для панелей инструментов.

<time> — для времени.

Не забывайте ещё про семантические элементы из html 4: <abbr>, <code>, <dfn>. А также про немного переиначенные <small>, <cite>, <strong>, <em>, <b>, <i>

Edited April 21, 2011 by Serlutin

PanSoul · April 22, 2011

Спасибо Всем (:

Вопрос к swetlana:

…
@#$%!!!!
Таких слов, чтобы описать это, нет даже в словаре русском матерном.
Это зачем? Это как? Это что? Это раздел чего? При чём тут <section>? При чём тут <span>?

А как же тогда быть? Ведь в этом "блоке" находится логотип и бэкграунд с изображением здания, ведь логично его было сделать в section или же...article? А если нет - то тогда как? Просто div что ли? Ну а span - не вижу ничего противоречащего, чтобы его там не было...

Форма поиска комментированию просто не поддаётся. Там просто непонятно что. Какие-то навороты, характерные не просто для xhtml, а для xhtml, написанного студентом-халтурщиком.

Извините, но если бы всё было так просто, то мне бы было бы достаточно и одного input'a. Но из-за того, что Все браузеры нормально восприняли, к примеру такое как

input{
...
background:#eee;
...
}

, КРОМЕ IE8 , -- мне Пришлось обернуть этот input в span, пришлось делать эти "новороты"

p.s. А может у меня бэкгроунд не применялся, из-за того, что Я тестил под IE8 на IEtester'e ? (во всяком случае, Я оправдал использование данного span'a)

И для оформительских целей там одна из страшных ересей: <br class="clear">

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

<p class="space"></p>
Зачем? Что это? Что несёт читателю этот абзац?

Ничего не несёт, просто мне нужен был определенный отступ, вот Я и сделал этот параграф... Но как Я уже понял - это неверно( Значит, нужно было сделать класс для групп ссылок, и уже там прописать верхний маргин, верно? (:

Serlutin, спасибо тебе, ты пролил немного света на эту тёмную сторону HTML5 (:

И вот хотелось бы узнать у тебя, а такие теги, как <header>,<footer> - они могут использоваться только раз на странице или нет?

и..

Сначала стоит понять, что <header>, <aside> и др. теги — не аналоги <div id="header"> (кстати, одна из ошибок в этой вёрстке). Новые теги — структурные элементы, которые разделяют всю страницу или статью, или комментарий на логические блоки.

Это значит, что им нельзя задавать стили? Просто мне кажется, что как раз таки и аналоги, просто для семантики решили создать именно <header>, <aside> и др. теги, чтобы визуально было легче ориентироваться...

Gaspode · April 22, 2011

Охъ, я всё равно не понял ничорта. На примере можно?

Вот обычный двухколоночник.

<body>
   <header>
      <h1><img ... /></h1><!-- логотип -->
      <form ...></form><!-- форма поиска по сайту -->
      <nav>...</nav> <!-- горизонтальное меню на всю ширину -->
   </header>
   <section id="sidebar"><-- фиксированный сайдбар -->
     <aside>
        <header><h3>Заголовок виджета</h3></header>
        Я виджет 0_0
     </aside>
     <aside>...</aside>
     <aside>...</aside>
     <footer>Находится в самом низу страницы. Тут какие-нибудь счётчики</footer>
   </section><!-- /sidebar -->
   <section id="content">
      <article>
         <header><h2>Бобро пожаловать на сайт</h2></header>
         <p>траляля</p>
      </article>
      <article>...</article>
      <footer>
         Находится на одном уровне с футером из section id="sidebar". Тут, допустим, телефон и адрес.
      </footer>
   </section><!-- /content -->
</body>

Так - адекватно или нет? И если нет, то как адекватно?

cssview · April 22, 2011

Ну я бы сделал так бы.


<body>
   <header>
   	<hgroup>
		<h1><img ... /></h1><!-- логотип -->
		<h2>...</h2><!-- слоган -->
	</hgroup>		
	  <form ...></form><!-- форма поиска по сайту -->
	  <nav>...</nav> <!-- горизонтальное меню на всю ширину -->
   </header>
   <aside><!-- фиксированный сайдбар -->

   </aside><!-- /sidebar -->
   <section id="content">
	  <article>
		 <header><h2>Бобро пожаловать на сайт</h2></header>
		 <section>траляля</section>
	  </article>
	  <article>...</article>
   </section><!-- /content -->
   <footer>
      Находится на одном уровне с футером из section id="sidebar". Тут, допустим, телефон и адрес.
   </footer>
</body>

Но сейчас придут профи и дадут свой ответ.

Edited April 22, 2011 by cssview

Sign In

Вёрстка под HTML5

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information