bayanruby2 Posted September 26, 2011 Report Share Posted September 26, 2011 1 - когда использовать <section>?так чтоли?<section><header></header></section><section><article></article></section>и т.д.?2 - сколько можно использовать тег <nav>?И как его использовать?У меня есть меню в шапке горизонтальное и меню в сайтбаре вертикальное. Мне и то и то выделить тегом <nav>? 3 - во что обрамлять ссылки? <ul><li></li></ul>? Или чтото другое?4 - у меня в статье будут сноски, типо доп. информация.Во что мне её обрамлять? в <aside>? Или в <section>?Пока вроде всё.Заранее спасибо. Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted September 26, 2011 Report Share Posted September 26, 2011 Сугубо имхо, насколько я сейчас понимаю:1) Нет, section должен выделять смысловой блок, желательно с заголовком, достойный включения в оглавление документа. Article - сам по себе разновидность section-а (более специфичная, самодостаточный контент, который можно целиком перенести из страницы, скажем, в RSS-ленту) и дополнительно оборачивать его в section не надо.2) Сколько нужно, исходя из здравого смысла. Для двух таких меню - имхо, в самый раз.3) Без разницы.4) Aside - хорошо. Как вариант (если этих ссылок мало и они не стоят отдельного упоминания в оглавлении) можно рассмотреть footer.А вообще не стоит придавать этим тегам слишком много значения, области применения у них всех достаточно гибкие, а здравый смысл рулит в любом случае.На окончательную истину не претендую, буду рад поправкам и уточнениям! Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted September 26, 2011 Author Report Share Posted September 26, 2011 SelenIT, спасибо за ответ.Сегодня целый день HTML5 юзал в поисковиках.Блин, информации пока не очень много, у буржуев есть, но у меня с английским не ахти, а гугл транслэйт переводит дословно и получается не статья, а бред какой-то. Чем больше про HTML5 читаю, тем больше вопросов возникает.Вот например: 1 - ПС уже в свои алгоритмы внесли поправки? С логичной вёрсткой на HTML5 документы лучше ранжируются/индексируются ПС?2 - Когда наконец-то выйдет полностью HTML5?3 - Почему его так долго делают? Ведь не пару энтузиастов над ним работают.На htmlbook конечно много инфы, но там больше о HTML5 в целом говорится, о его возможностях, которые мне пока не нужны Я бы хотел полностью понять как верстать на HTML5 логичный код, как использовать новые теги на практике, ну и т.д.В этих уроках конечно подробно написано, но есть много ньюансов.Да и с СЕО непонятно както)раньше был один H1 а теперь их сколько хочешь вставляй, а как ПС вес распределяет? Короче одни вопросы...Я не ною, что типа ничего нету в сети, просто запутался. Может просветите? Ссылок надаёте полезных, кроме хтмлбук(уже всё прочитал).Заранее спасибо!С ув. Артём Quote Link to comment Share on other sites More sharing options...
0 Vlad Posted September 27, 2011 Report Share Posted September 27, 2011 1. Этого мы не узнаем, алгоритмы поисковиков держатся в секрете.2. В 2014 году выйдет, где-то пробегала подобная информация. Но что значит выйдет? CSS2.1 только недавно "закончен", а пользовались им много лет, с HTML5 аналогично. Какие-то вещи уже "устаканились", в браузерах поддерживаются, в этой части изменения будут минимальны. Семантика же самый больной вопрос HTML5, на данный момент спецификация не даёт ответов на мучившие всех вопросы, приходится гадать и делать предположения. Так что полагайтесь на собственную логику и общую информацию. В буржуйнете аналогично дело обстоит, знания английского не поможет, все отделываются общими фразами, что вполне закономерно.3. Вы похоже не работали в бюрократической системе с кучей разных отделов, когда для примера, одностраничный текст на сайт утверждается пару месяцев. Со спецификацией аналогично, с одной стороны бюрократическая машина, которая утверждает теги, тексты и содержание, с другой разработчики браузеров, которые продавливают свои интересы. В такой ситуации написание и утверждение может затянуться надолго. Но считаю, что разрабатывается довольно быстро сейчас, по сравнению со старпёрами и тормозами W3C, главный конфликт и противостояние HTML5-XHTML завершён. Quote Link to comment Share on other sites More sharing options...
0 Softlink Posted September 27, 2011 Report Share Posted September 27, 2011 Сугубо имхо, насколько я сейчас понимаю:1) Нет, section должен выделять смысловой блок, желательно с заголовком, достойный включения в оглавление документа. Article - сам по себе разновидность section-а (более специфичная, самодостаточный контент, который можно целиком перенести из страницы, скажем, в RSS-ленту) и дополнительно оборачивать его в section не надо.А я вот например блок с комментариями засовываю в section, а отдельный комментарий в article, у которого имеется свой header с датой и именем. Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted September 27, 2011 Report Share Posted September 27, 2011 А я вот например блок с комментариями засовываю в section, а отдельный комментарий в article, у которого имеется свой header с датой и именем.Группировка блока связанных article-ов в общий section (в данном случае под общим заголовком "Комментарии") - это другое дело, это логично . В примере у ТС был одиночный article в дополнительном section (насколько я понял), это избыточно. Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted September 27, 2011 Author Report Share Posted September 27, 2011 Vlad, спасибо за ответ.2. В 2014 году выйдет, где-то пробегала подобная информация. Но что значит выйдет? CSS2.1 только недавно "закончен", а пользовались им много лет, с HTML5 аналогично. Какие-то вещи уже "устаканились", в браузерах поддерживаются, в этой части изменения будут минимальны. Семантика же самый больной вопрос HTML5, на данный момент спецификация не даёт ответов на мучившие всех вопросы, приходится гадать и делать предположения. Так что полагайтесь на собственную логику и общую информацию. В буржуйнете аналогично дело обстоит, знания английского не поможет, все отделываются общими фразами, что вполне закономерно.Ну тогда можно понять почему мало информации в сети.Получается на HTML5 верстают, грубо говоря, по своей логике, кому как нравится?А спецификацию планируют скоро доделать?))Уж очень хочется!!! Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted September 27, 2011 Report Share Posted September 27, 2011 Не совсем, мало-помалу разработчики приходят к какому-то консенсусу (напр. вот хорошая статья по теме).А со спецификацией хитро. Ее делают параллельно W3C и WHATWG, каждый свою версию. И если текущая версия W3C сейчас находится в статусе "полу-окончательного черновика" (принципиальные моменты меняться уже не будут, есть с полтора десятка багов, мешающих ее переводу в "кандидаты в рекомендации", но как только их разрулят — так сразу), то WHATWG обозвали свою версию "живым стандартом", который можно считать готовым в любой момент времени (по состоянию на этот момент), но постоянно эволюционирующий по мере прогресса браузеров, понятия "окончательной готовности" для него нет в принципе. В будущем он станет более продвинутым и "зрелым", но не "более готовым, чем сейчас". Поэтому пользоваться можно смело, единственное "но" — определение валидности конформности может меняться... Quote Link to comment Share on other sites More sharing options...
0 Vlad Posted September 27, 2011 Report Share Posted September 27, 2011 Есть рекомендуемая логика по использованию основных элементов, в мелочах же начинаются споры и прения, как "правильно" сделать. Так что нельзя сказать, что верстают как кому нравится.Не ждите эту спецификацию, толку то от этого. Хотите использовать HTML5, так начинайте прямо сейчас, к тому времени как спека будет завершена все уже давно на HTML5 перейдут, а вы окажетесь в роли догоняющего. Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted September 27, 2011 Author Report Share Posted September 27, 2011 (edited) Сейчас по своей логике сверстаю каркас сайта на HTML5 без КСС.И кину сюда на суд форумчан Посмотрю на сколько я правильно понял семантику/логичность HTML5Но перед этим опять появились вопросы...1 - <html lang="ru-RU">Зачем нужен этот ланг? И на разных сайтов по разному: то так <html lang="ru">, то так <html lang="ru-RU">2 - если я взялся верстать на HTML5 мне соблюдать таки моменты как <br /> <meta ... />? Edited September 27, 2011 by bayanruby2 Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted September 27, 2011 Report Share Posted September 27, 2011 1) Насколько я понимаю, это важно, например, для поисковиков ("искать страницы только на русском" и т.п.) и автопереводчиков (Хром иногда предлагает "перевести страницу"). Код языка должен соответствовать стандарту BCP47, "ru" — самый общий вариант, "ru-RU" — более конкретный, с уточнением страны/региона.2) И так, и сяк правильно, как самому больше нравится. Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted September 28, 2011 Author Report Share Posted September 28, 2011 (edited) SelenIT, понял, дзякуй)Ну как?По назначению теги новые использую или напихал кучу мала? <!DOCTYPE html><html lang="ru-RU"> <head> <title>МОЯ ПЕРВАЯ ВЁРСТКА НА HTML5</title> <meta charset="utf-8"> <meta name="description" content=" "> <meta name="keywords" content=" "> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="index.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head><body><header><!-- ШАПКА САЙТА --> <img src="" alt="" title=""></header><aside><!-- ЛЕВЫЙ САЙТБАР --> <section><!-- ПЕРВАЯ КОЛОНКА - НАВИГАЦИЯ --> <nav> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav> </section> <section> <!-- ВТОРАЯ КОЛОНКА - РЕКЛАМА --> </section> <section> <!-- ТРЕТЬЯ КОЛОНКА - СТАТИСТИКА САЙТА --> </section></aside><article><!-- КОНТЕНТ --> <header><!-- ШАПКА КОНТЕНТА --> <h1></h1><!-- НАЗВАНИЕ СТАТЬИ --> <!-- +ЕЩЁ БУДЕТ АВТОР СТАТИ, ДАТА СОЗДАНИЕ и т.п. --> </header><p></p><p></p> <aside> <!-- ДОПОЛНИТЕЛЬНАЯ ИНФА К СТАТЬЕ --> </aside><p></p> <footer><!-- ПОДВАЛ КОНТЕНТА --> <!-- АВТОРСКИЕ ПРАВА НА СТАТЬЮ... --> </footer></article><footer><!-- ПОДВАЛ САЙТА --> <p>ВСЕ ПРАВА ЗАЩИЩЕНЫ!</p></footer></body></html> Edited September 28, 2011 by bayanruby2 Quote Link to comment Share on other sites More sharing options...
0 Nanto Posted September 28, 2011 Report Share Posted September 28, 2011 А у HTML5 есть обратная совместимость? Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>... Если обратной совместимости нет, то чего они так медленно и аккуратненько? Жахнули бы прямо с ходу абсолютно новый стандарт, который не поддерживает ни один из существующих браузеров и решайте сами куда смотреть - в прошлое или будущее! Quote Link to comment Share on other sites More sharing options...
0 Gaspode Posted September 28, 2011 Report Share Posted September 28, 2011 Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>...Что сделают? Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted September 28, 2011 Report Share Posted September 28, 2011 bayanruby2, аутлайнер строит для этой разметки такое "оглавление" (outline): Untitled BODY Untitled ASIDE Untitled SECTION Untitled NAV Untitled SECTION Untitled SECTION No text content inside H1 Untitled ASIDEМноговато безымянных секций — недостаток. Как минимум, nav в главном aside явно в добавочной section-обертке не нуждается. Но в остальном, на мой взгляд, вполне логичная структура!Nanto, обратная совместимость и стандартизация уже используемых подходов (принцип "мощения проторенных троп", "paving the cowpaths") — чуть ли не главная "фишка" HTML5. Новые теги специально выбирались с таким расчетом, чтобы по крайней мере не вызывать неприятных сюрпризов в существующих браузерах (например, поэтому отказались от использования dt/dd для details, т.к. они "своеобразно" парсятся в IE). При соблюдении минимальных правил предосторожности (напр., не злоупотреблять опциональными закрывающими тегами внутри новых тегов) они поддерживаются во всех браузерах новее FF2 (в IE6-8 — нужен JS-костыль для их стилизации), на переходный период вполне нормально "подстраховать" их дивами (по спецификации дивы как раз нужны для нетривиальных оформительских задач, а новые теги — главным образом для смыслового разделения контента). Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted September 28, 2011 Author Report Share Posted September 28, 2011 (edited) Вы имеете ввиду вот это лишнее?<aside><!-- ЛЕВЫЙ САЙТБАР --> <section><!-- ПЕРВАЯ КОЛОНКА - НАВИГАЦИЯ --> <nav> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav> </section> <section> <!-- ВТОРАЯ КОЛОНКА - РЕКЛАМА --> </section> <section> <!-- ТРЕТЬЯ КОЛОНКА - СТАТИСТИКА САЙТА --> </section></aside> Edited September 28, 2011 by bayanruby2 Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted September 28, 2011 Report Share Posted September 28, 2011 Имхо, да. Quote Link to comment Share on other sites More sharing options...
0 Vlad Posted September 29, 2011 Report Share Posted September 29, 2011 А у HTML5 есть обратная совместимость? Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>... Если обратной совместимости нет, то чего они так медленно и аккуратненько? Жахнули бы прямо с ходу абсолютно новый стандарт, который не поддерживает ни один из существующих браузеров и решайте сами куда смотреть - в прошлое или будущее!Как по вашему браузеры должны расценивать <footer>? Показать его содержимое? Покажут все, включая Netscape, так что в этом плане есть "обратная совместимость". Применить стили к footer? Применят только браузеры, поддерживающие этот тег. Но ведь всего-то надо добавить в стилях display:block и подключить простенький скрипт, который создает элемент через document.createElement('footer'). После этого все браузеры, включая их устаревшие версии, добавят стиль к элементу. Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted September 29, 2011 Author Report Share Posted September 29, 2011 SelenIT, а почему?)Какбы асайд - это левый блок.Делим левый блок на 3 подблока и в каждом подблоке свои причуды: нав, сёрч, реклама,...Или вот так например? <section><aside> <nav> </nav></aside><aside> <div class="search"> </div></aside><aside> <div class="reklama"> </div></aside></section> Quote Link to comment Share on other sites More sharing options...
0 Gaspode Posted September 29, 2011 Report Share Posted September 29, 2011 Если там навигация, то это уже не левый блок. aside – это не тот блок, что сбоку, это тот блок, что, скажем так, менее других относится к теме. Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted October 1, 2011 Report Share Posted October 1, 2011 Article, aside, nav — это, по сути, специализированные разновидности section, они, как и section, указывают место раздела в "оглавлении" (которое "document outline") и, вдобавок, раскрывают "природу" этого раздела. Article — самодостаточная публикация, aside — "вольные ассоциации" на главную тему, nav — основная навигация. И основная навигация явно не часть "вольных ассоциаций", а самостоятельный подраздел того же ранга. И, совсем по-хорошему, всем этим разделам нужны бы заголовки. Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted October 7, 2011 Author Report Share Posted October 7, 2011 <!DOCTYPE html><html lang="ru-RU"> <head> <title>МОЯ ПЕРВАЯ ВЁРСТКА НА HTML5</title> <meta charset="utf-8"> <meta name="description" content=" "> <meta name="keywords" content=" "> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="index.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head><body><header><!-- ШАПКА САЙТА --> <img src="" alt="" title=""></header><aside><!-- ЛЕВЫЙ САЙТБАР --> <section><!-- ПЕРВАЯ КОЛОНКА - НАВИГАЦИЯ --> <nav> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav> </section> <section> <!-- ВТОРАЯ КОЛОНКА - РЕКЛАМА --> </section> <section> <!-- ТРЕТЬЯ КОЛОНКА - СТАТИСТИКА САЙТА --> </section></aside><article><!-- КОНТЕНТ --> <header><!-- ШАПКА КОНТЕНТА --> <h1></h1><!-- НАЗВАНИЕ СТАТЬИ --> <!-- +ЕЩЁ БУДЕТ АВТОР СТАТИ, ДАТА СОЗДАНИЕ и т.п. --> </header><p></p><p></p> <aside> <!-- ДОПОЛНИТЕЛЬНАЯ ИНФА К СТАТЬЕ --> </aside><p></p> <footer><!-- ПОДВАЛ КОНТЕНТА --> <!-- АВТОРСКИЕ ПРАВА НА СТАТЬЮ... --> </footer></article><footer><!-- ПОДВАЛ САЙТА --> <p>ВСЕ ПРАВА ЗАЩИЩЕНЫ!</p></footer></body></html>У меня фиксированный сайт.А в новой вёрстке на хтмл5 вёрстка начинается с тега хеадер и какбы нету контейнера, с помощью которого я потом в стилях выравняю макет по центру и дам width.Можно както подругому выровнять макет по центру и дать размер width? Не добавляя <див класс="контейнер">?В боди по центру выровнять, а главным тегам задать width? Quote Link to comment Share on other sites More sharing options...
0 Softlink Posted October 7, 2011 Report Share Posted October 7, 2011 У меня фиксированный сайт.А в новой вёрстке на хтмл5 вёрстка начинается с тега хеадер и какбы нету контейнера, с помощью которого я потом в стилях выравняю макет по центру и дам width.Можно както подругому выровнять макет по центру и дать размер width? Не добавляя <див класс="контейнер">?В боди по центру выровнять, а главным тегам задать width?Никто не запрещает обернуть все в див. Quote Link to comment Share on other sites More sharing options...
0 Shift-Web Posted October 7, 2011 Report Share Posted October 7, 2011 (edited) сначала кодировка (!), потом тайтл и всё остальное Edited October 7, 2011 by Shift-Web Quote Link to comment Share on other sites More sharing options...
0 bayanruby2 Posted October 13, 2011 Author Report Share Posted October 13, 2011 Народ, а <html lang="ru-RU"> нужно со скабочками или без? <html lang=ru-RU> Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted October 13, 2011 Report Share Posted October 13, 2011 Формально без разницы, но с ними как-то аккуратнее. Quote Link to comment Share on other sites More sharing options...
Question
bayanruby2
1 - когда использовать <section>?
так чтоли?
и т.д.?
2 - сколько можно использовать тег <nav>?
И как его использовать?
У меня есть меню в шапке горизонтальное и меню в сайтбаре вертикальное. Мне и то и то выделить тегом <nav>?
3 - во что обрамлять ссылки? <ul><li></li></ul>? Или чтото другое?
4 - у меня в статье будут сноски, типо доп. информация.
Во что мне её обрамлять? в <aside>? Или в <section>?
Пока вроде всё.
Заранее спасибо.
Link to comment
Share on other sites
28 answers to this question
Recommended Posts
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.