Немного запутался в HTML5

bayanruby2 · September 26, 2011

1 - когда использовать <section>?

так чтоли?


<section>
<header>
</header>
</section>
<section>
<article>
</article>
</section>

и т.д.?

2 - сколько можно использовать тег <nav>?

И как его использовать?

У меня есть меню в шапке горизонтальное и меню в сайтбаре вертикальное. Мне и то и то выделить тегом <nav>?

3 - во что обрамлять ссылки? <ul><li></li></ul>? Или чтото другое?

4 - у меня в статье будут сноски, типо доп. информация.

Во что мне её обрамлять? в <aside>? Или в <section>?

Пока вроде всё.

Заранее спасибо.

SelenIT · September 26, 2011

Сугубо имхо, насколько я сейчас понимаю:

1) Нет, section должен выделять смысловой блок, желательно с заголовком, достойный включения в оглавление документа. Article - сам по себе разновидность section-а (более специфичная, самодостаточный контент, который можно целиком перенести из страницы, скажем, в RSS-ленту) и дополнительно оборачивать его в section не надо.

2) Сколько нужно, исходя из здравого смысла. Для двух таких меню - имхо, в самый раз.

3) Без разницы.

4) Aside - хорошо. Как вариант (если этих ссылок мало и они не стоят отдельного упоминания в оглавлении) можно рассмотреть footer.

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

На окончательную истину не претендую, буду рад поправкам и уточнениям!

bayanruby2 · September 26, 2011

SelenIT, спасибо за ответ.

Сегодня целый день HTML5 юзал в поисковиках.

Блин, информации пока не очень много, у буржуев есть, но у меня с английским не ахти, а гугл транслэйт переводит дословно и получается не статья, а бред какой-то.

Чем больше про HTML5 читаю, тем больше вопросов возникает.

Вот например:

1 - ПС уже в свои алгоритмы внесли поправки? С логичной вёрсткой на HTML5 документы лучше ранжируются/индексируются ПС?

2 - Когда наконец-то выйдет полностью HTML5?

3 - Почему его так долго делают? Ведь не пару энтузиастов над ним работают.

На htmlbook конечно много инфы, но там больше о HTML5 в целом говорится, о его возможностях, которые мне пока не нужны

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

В этих уроках конечно подробно написано, но есть много ньюансов.

Да и с СЕО непонятно както)

раньше был один H1 а теперь их сколько хочешь вставляй, а как ПС вес распределяет?

Короче одни вопросы...

Я не ною, что типа ничего нету в сети, просто запутался. Может просветите? Ссылок надаёте полезных, кроме хтмлбук(уже всё прочитал).

Заранее спасибо!

С ув. Артём

Vlad · September 27, 2011

1. Этого мы не узнаем, алгоритмы поисковиков держатся в секрете.

2. В 2014 году выйдет, где-то пробегала подобная информация. Но что значит выйдет? CSS2.1 только недавно "закончен", а пользовались им много лет, с HTML5 аналогично. Какие-то вещи уже "устаканились", в браузерах поддерживаются, в этой части изменения будут минимальны. Семантика же самый больной вопрос HTML5, на данный момент спецификация не даёт ответов на мучившие всех вопросы, приходится гадать и делать предположения. Так что полагайтесь на собственную логику и общую информацию. В буржуйнете аналогично дело обстоит, знания английского не поможет, все отделываются общими фразами, что вполне закономерно.

3. Вы похоже не работали в бюрократической системе с кучей разных отделов, когда для примера, одностраничный текст на сайт утверждается пару месяцев. Со спецификацией аналогично, с одной стороны бюрократическая машина, которая утверждает теги, тексты и содержание, с другой разработчики браузеров, которые продавливают свои интересы. В такой ситуации написание и утверждение может затянуться надолго. Но считаю, что разрабатывается довольно быстро сейчас, по сравнению со старпёрами и тормозами W3C, главный конфликт и противостояние HTML5-XHTML завершён.

Softlink · September 27, 2011

Сугубо имхо, насколько я сейчас понимаю:
1) Нет, section должен выделять смысловой блок, желательно с заголовком, достойный включения в оглавление документа. Article - сам по себе разновидность section-а (более специфичная, самодостаточный контент, который можно целиком перенести из страницы, скажем, в RSS-ленту) и дополнительно оборачивать его в section не надо.

А я вот например блок с комментариями засовываю в section, а отдельный комментарий в article, у которого имеется свой header с датой и именем.

SelenIT · September 27, 2011

А я вот например блок с комментариями засовываю в section, а отдельный комментарий в article, у которого имеется свой header с датой и именем.

Группировка блока связанных article-ов в общий section (в данном случае под общим заголовком "Комментарии") - это другое дело, это логично . В примере у ТС был одиночный article в дополнительном section (насколько я понял), это избыточно.

bayanruby2 · September 27, 2011

Vlad, спасибо за ответ.

2. В 2014 году выйдет, где-то пробегала подобная информация. Но что значит выйдет? CSS2.1 только недавно "закончен", а пользовались им много лет, с HTML5 аналогично. Какие-то вещи уже "устаканились", в браузерах поддерживаются, в этой части изменения будут минимальны. Семантика же самый больной вопрос HTML5, на данный момент спецификация не даёт ответов на мучившие всех вопросы, приходится гадать и делать предположения. Так что полагайтесь на собственную логику и общую информацию. В буржуйнете аналогично дело обстоит, знания английского не поможет, все отделываются общими фразами, что вполне закономерно.

Ну тогда можно понять почему мало информации в сети.

Получается на HTML5 верстают, грубо говоря, по своей логике, кому как нравится?

А спецификацию планируют скоро доделать?))

Уж очень хочется!!!

SelenIT · September 27, 2011

Не совсем, мало-помалу разработчики приходят к какому-то консенсусу (напр. вот хорошая статья по теме).

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

Vlad · September 27, 2011

Есть рекомендуемая логика по использованию основных элементов, в мелочах же начинаются споры и прения, как "правильно" сделать. Так что нельзя сказать, что верстают как кому нравится.

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

bayanruby2 · September 27, 2011

Сейчас по своей логике сверстаю каркас сайта на HTML5 без КСС.

И кину сюда на суд форумчан

Посмотрю на сколько я правильно понял семантику/логичность HTML5

Но перед этим опять появились вопросы...

1 - <html lang="ru-RU">

Зачем нужен этот ланг? И на разных сайтов по разному: то так <html lang="ru">, то так <html lang="ru-RU">

2 - если я взялся верстать на HTML5 мне соблюдать таки моменты как <br /> <meta ... />?

Edited September 27, 2011 by bayanruby2

SelenIT · September 27, 2011

1) Насколько я понимаю, это важно, например, для поисковиков ("искать страницы только на русском" и т.п.) и автопереводчиков (Хром иногда предлагает "перевести страницу"). Код языка должен соответствовать стандарту BCP47, "ru" — самый общий вариант, "ru-RU" — более конкретный, с уточнением страны/региона.

2) И так, и сяк правильно, как самому больше нравится.

bayanruby2 · September 28, 2011

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

Nanto · September 28, 2011

А у HTML5 есть обратная совместимость? Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>... Если обратной совместимости нет, то чего они так медленно и аккуратненько? Жахнули бы прямо с ходу абсолютно новый стандарт, который не поддерживает ни один из существующих браузеров и решайте сами куда смотреть - в прошлое или будущее!

Gaspode · September 28, 2011

Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>...

Что сделают?

SelenIT · 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-костыль для их стилизации), на переходный период вполне нормально "подстраховать" их дивами (по спецификации дивы как раз нужны для нетривиальных оформительских задач, а новые теги — главным образом для смыслового разделения контента).

bayanruby2 · September 28, 2011

Вы имеете ввиду вот это лишнее?

<nav>

<ul>

</ul>

</nav>

</section>

</section>

</section>

</aside>

Edited September 28, 2011 by bayanruby2

SelenIT · September 28, 2011

Имхо, да.

Vlad · September 29, 2011

А у HTML5 есть обратная совместимость? Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>... Если обратной совместимости нет, то чего они так медленно и аккуратненько? Жахнули бы прямо с ходу абсолютно новый стандарт, который не поддерживает ни один из существующих браузеров и решайте сами куда смотреть - в прошлое или будущее!

Как по вашему браузеры должны расценивать <footer>? Показать его содержимое? Покажут все, включая Netscape, так что в этом плане есть "обратная совместимость". Применить стили к footer? Применят только браузеры, поддерживающие этот тег. Но ведь всего-то надо добавить в стилях display:block и подключить простенький скрипт, который создает элемент через document.createElement('footer'). После этого все браузеры, включая их устаревшие версии, добавят стиль к элементу.

bayanruby2 · September 29, 2011

SelenIT, а почему?)

Какбы асайд - это левый блок.

Делим левый блок на 3 подблока и в каждом подблоке свои причуды: нав, сёрч, реклама,...

Или вот так например?


<section>
<aside>
   <nav>
   </nav>
</aside>

<aside>
   <div class="search">
   </div>
</aside>

<aside>
   <div class="reklama">
   </div>
</aside>
</section>

Gaspode · September 29, 2011

Если там навигация, то это уже не левый блок. aside – это не тот блок, что сбоку, это тот блок, что, скажем так, менее других относится к теме.

SelenIT · October 1, 2011

Article, aside, nav — это, по сути, специализированные разновидности section, они, как и section, указывают место раздела в "оглавлении" (которое "document outline") и, вдобавок, раскрывают "природу" этого раздела. Article — самодостаточная публикация, aside — "вольные ассоциации" на главную тему, nav — основная навигация. И основная навигация явно не часть "вольных ассоциаций", а самостоятельный подраздел того же ранга. И, совсем по-хорошему, всем этим разделам нужны бы заголовки.

bayanruby2 · 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?

Softlink · October 7, 2011

У меня фиксированный сайт.
А в новой вёрстке на хтмл5 вёрстка начинается с тега хеадер и какбы нету контейнера, с помощью которого я потом в стилях выравняю макет по центру и дам width.
Можно както подругому выровнять макет по центру и дать размер width? Не добавляя <див класс="контейнер">?
В боди по центру выровнять, а главным тегам задать width?

Никто не запрещает обернуть все в див.

Shift-Web · October 7, 2011

сначала кодировка (!), потом тайтл и всё остальное

Edited October 7, 2011 by Shift-Web

bayanruby2 · October 13, 2011

Народ, а <html lang="ru-RU"> нужно со скабочками или без? <html lang=ru-RU>

SelenIT · October 13, 2011

Формально без разницы, но с ними как-то аккуратнее.

Sign In

Немного запутался в HTML5

Question

Link to comment

Share on other sites

28 answers to this question

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