Форум Сайтостроение Веб-строительство

Структура HTML5

12
ExVood
На сайте с 02.07.2013
Offline
39
ExVood
1135

Здравствуйте ув.веб-разработчики!

Знакомлюсь с HTML5 и хотелось бы прояснить некоторые моменты...

Правильно ли составлена структура:

<header>логотип, форма поиска и тд</header>
<section>
<nav>правое меню</nav>
<main>
<article>
<h2>Заголовок</h2>
<p>Содержание</p>
</article>
<article>
<h2>Заголовок</h2>
<p>Содержание</p>
</article>
</main>
<nav>левое меню</nav>
</section>
<footer>счетчики, копирайт...</footer>

Правильно ли используется section и main? И нужен ли main в этом случае вообще?

---------- Добавлено 14.10.2013 в 16:14 ----------

Мде, табуляция не сработала....

moslem
На сайте с 30.04.2011
Offline
37
moslem
#1

Да все верно.

Контейнер main использовали обычно, когда нужно было обернуть контент; теперь этот элемент заменит такие теги, как <div id="main">, <div id="page"> или <div id="wrapper">.

Разработка сайтов / Дизайн / Верстка / Натяжка на CMS (/ru/forum/911981)
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#2

Я что-то пропустил? Пруф на элемент <main> пожалуйста. ;)

ExVood
На сайте с 02.07.2013
Offline
39
ExVood
#3
Olldman:
Я что-то пропустил? Пруф на элемент <main> пожалуйста. ;)

Ага, не везде пишут, случайно наткнулся

frontender.info/the-main-element

Все сайты на HTML5 юзают атрибуты id,class, role

А без них правильно? т.е. :


<style>
footer {
height:35px;
widht:300px;
}
</style>

<footer>
Мой подвал
</footer>

И так же для nav, menu, section и тд...

K9
На сайте с 15.02.2012
Offline
27
Kol9
#4
ExVood:
Ага, не везде пишут, случайно наткнулся
frontender.info/the-main-element

Все сайты на HTML5 юзают атрибуты id,class, role
А без них правильно? т.е. :


И так же для nav, menu, section и тд...

Разумеется, правильно... Id, class - варианты, в случае использования нескольких div(ов) и прочих элементов много раз, но с разными стилями

I
На сайте с 05.05.2010
Offline
91
ITXrelay
#5

Здесь посмотрите - довольно серьезный рунетовский ресурс по верстке, с большим разделом по HTML5

Красивые запоминающиеся телефонные номера - больше звонков от клиентов! (https://nomergold.com?utm_source=searchengines.guru&utm_medium=signature&utm_campaign=forums)
O
На сайте с 29.05.2008
Offline
195
ortegas
#6

Чем меньше элементов, тем проще DOM структура. Чем проще DOM структура, тем выше производительность, выше читабельность. Никаких section и main не нужно. Даже, если нужно сделать трех колоночный дизайн, в качестве обертки можно использовать body.

Тег nav предназначен для навигации. Желательно сквозной навигации. А для меню у нас есть тег aside. Левое меню - aside id="left", правое - aside id="right".

Можно ли тег section Новые теги HTML 5 Aside main header footer
K9
На сайте с 15.02.2012
Offline
27
Kol9
#7

Все "новые теги" html5 - лишь способ лучшего понимания семантики сайта.

В общем, чем меньше всяких "блок в блоке" и прочих ненужных div(ов), section(ов), а также class и id к ним, тем лучше.

I
На сайте с 05.05.2010
Offline
91
ITXrelay
#8
Kol9:
Все "новые теги" html5 - лишь способ лучшего понимания семантики сайта.
В общем, чем меньше всяких "блок в блоке" и прочих ненужных div(ов), section(ов), а также class и id к ним, тем лучше.

Но надо понимать что при таком алгоритме верстки, скорее всего придется использовать псевдоклассы CSS3, то есть данный сайт будет отсекать пользователей IE<9.

B
На сайте с 11.10.2013
Offline
2
bratuharootuha
#9
ExVood:
Здравствуйте ув.веб-разработчики!
Знакомлюсь с HTML5 и хотелось бы прояснить некоторые моменты...
Правильно ли составлена структура:

Правильно ли используется section и main? И нужен ли main в этом случае вообще?

---------- Добавлено 14.10.2013 в 16:14 ----------

Мде, табуляция не сработала....

Вроде бы, всё верно.

O
На сайте с 29.05.2008
Offline
195
ortegas
#10
ExVood:
Ага, не везде пишут, случайно наткнулся
frontender.info/the-main-element

Кстати, если бы вы внимательно читали, в main тег нужно заключать весь видимый контент. То-есть, у вас nav это служебная не отображаемая информация?

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий