Jump to content
  • 0

Как поставить HTML5 разметку?


Extazy
 Share

Question

Уважаемые!
Помогите, пожалуйста, разобраться с html5 разметкой.
Вот новые семантические элементы html5: header,nav,aside,footer,article,section,hgroup.
Я почему-то путаюсь, как правильно расставить article,section,hgroup (особенно section!).

Что за section? Им надо выделять каждый блок в статье (описание, картинку,опрос,комментарии) или нет? 
У каждого section должен быть H1-H заголовок или нет?

Объясните, пожалуйста, простым языком значение section, дочерние его элементы и вообще смысл его. Если не затруднит, то на примере стандартного шаблона:

Главная.

<html>


<head></head>


<body>

<div id="header">
логотип
навигация
</div>

<div id="content">

<div id="news">
заголовок
колво просмотров
изображение
краткая статья
</div>

<div id="news">
<h1>заголовок</h1>
колво просмотров
изображение
краткая статья
</div>

</div>

<div id="aside">
топовые статьи
рекламный блок
</div>

<div id="footer">
копирайты
ссылки на технические страницы
</div>

</body>
</html>

Страница со статьёй.

<html>


<head></head>


<body>

<div id="header">
логотип
навигация
</div>

<div id="content">

<div id="news">
<h1>заголовок</h1>
колво просмотров
изображение
статья
<h2>дополнительный заголовок<h2>
дополнительная информация о статье
похожие статьи
комментарии
</div>

</div>

<div id="aside">
топовые статьи
рекламный блок
</div>

<div id="footer">
копирайты
ссылки на технические страницы
</div>

</body>
</html>

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Еще вот схемка, может пригодится.

23 минуты назад, Extazy сказал:

Что за section? Им надо выделять каждый блок в статье (описание, картинку,опрос,комментарии) или нет? 

Думаю, здесь лучше подойдет article.

Вообще, на том же html5doctor можете почитать про каждый элемент. Неплохой ресурс для начала.

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy