Jump to content
  • 0

Правильное использование тегов HTML5 в контенте


RiG
 Share

Question

Имеется вот такой простой макет

41aab9d4ffc9.png

С тегами в шапке и нафигации я разобрался, а вот с блоком контента не могу.

Самое первое что я думаю надо сделать, это обернуть весь блок контента тегом <main>, это правильно?

Сам контент может быть представлен в разном виде. Вот например на главной странице сайта

fddf7f6e1ad4.png

каждый блок с картинкой надо обернуть в <section> и <article>? Или как то по другому?

При нажатии ссылки "Подробнее" открывается вот это

c2edfd807cd7.png

Опять же, верхняя часть в <section>, название фото в <header>, описание в <article>, "Название альбома, просмотров комментариев" в <footer>? После чего ещё 2 <section> для Добавления комментариев и для самих комментариев?

Подскажите пожалуйста как правильно.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Сам хотел создать подобную тему. Вопрос по-моему очень актуальный. Описание структурных тэгов, как мне кажется, слишком неоднозначно, не хватает конкретики. Вот как я бы разметил эти страницы:

1) main это то - что не футер, и не хеадер. Поэтому в первой картинке я бы внес в него и основной контент, и навигацию. А скорее всего бы вообще не использовал.

2) вторая картинка -- это галерея. Её я бы оформил вот так:

<section><h1>HEADER</h1><figure><img><figcaption>Добавлена, рейтинг, подробнее, комменты и т.п.</figcaption></figure></section>

3) здесь я бы так сделал:

<section><h1>PHOTO_NAME</h1><figure><img><figcaption>описание, рейтинг и т.п.</figcaption></figure></section><article>форма отправки комментария<article>комментарий</article><article>комментарий</article> etc.</article>
Link to comment
Share on other sites

  • 0
1) main это то - что не футер, и не хеадер. Поэтому в первой картинке я бы внес в него и основной контент, и навигацию. А скорее всего бы вообще не использовал.

 

В main вроде навигация не входит. У меня он предназначен только для контента. 


fddf7f6e1ad4.png

 

Ну тут наверно можно сделать так:

<main><section><h1>Заголовок</h1><article><figure><img><figcaption>Описание</figcaption><p><a href="">Подробнее</a> <a href="">Комменты</a></p></figure></article></section></main>
Edited by Aleksandr.L
Link to comment
Share on other sites

  • 0

 

1) main это то - что не футер, и не хеадер. Поэтому в первой картинке я бы внес в него и основной контент, и навигацию. А скорее всего бы вообще не использовал.

 

В main вроде навигация не входит. У меня он предназначен только для контента. 


fddf7f6e1ad4.png

 

Ну тут наверно можно сделать так:

<main><section><h1>Заголовок</h1><article><figure><img><figcaption>Описание</figcaption><p><a href="">Подробнее</a> <a href="">Комменты</a></p></figure></article></section></main>

каждый section к отдельному блоку, я правильно понял?

Link to comment
Share on other sites

  • 0

Ну я так понял, что 6 блоков с картинками это превью статьи и я их заключил в тег article. В main'e секция с основным контентом, кроме того там (в main'e) могут быть и другие какие-то секции.

Link to comment
Share on other sites

  • 0
main вроде навигация не входит.

Поддерживаю. Всё, для чего имеет смысл команда "Skip to content", вряд ли имеет смысл помечать как основное содержимое. Исключение - навигация по самому основному содержимому (ссылки на якоря внутри него), что и иллюстрируется примером в спецификации.

 

можно сделать так:
<section><h1>Заголовок</h1><article><figure><img><figcaption>Описание</figcaption><p><a href="">Подробнее</a> <a href="">Комменты</a></p></figure></article></section>

Зачем отдельный section вокруг единственного article, притом "безголового", и к чему тут figure, иллюстрацией чего в основном потоке оно служит? По-моему, тут хватит одного article с заголовком  (если эти анонсы имеют смысл, напр., в RSSнике), а то и без них, с неявными section-ами по заголовкам, нормально...

  • Like 1
Link to comment
Share on other sites

  • 0
Зачем отдельный section вокруг единственного article, притом "безголового", и к чему тут figure, иллюстрацией чего в основном потоке оно служит?

 

Да просто что-то похожее видел на хабре. Спасибо за разъяснение.

Link to comment
Share on other sites

  • 0

Не надо сразу соглашаться, возможно, это я чего-то важного не понимаю :) Раз такой пример где-то приводился, вероятно, были и какие-то аргументы в его пользу. Интересно поспорить с ними...

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