Правильная ли HTML5 разметка для блога?

В гугле столько много ссылок на статьи о правильной разметке HTML5, но каждая почти чем-то где-то отличается...
Накидал структуру из полученных знаний, может вы что-то добавите поправите меня в чём-то, по валидатору единственно не верно содержание тэга
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="Odo Veiz" name="author">
        <meta content="" name="description">
        <meta content="" name="keywords">
        <meta content="height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" name="viewport">
        <title>Заголовок</title>
        <link href="#" rel="stylesheet">
        <script async src="#"></script>
    </head>
    <body>
        <header>
            <h1>Заголов сайта</h1>
            <nav>
                <a href="#">Об авторе</a>
                <a href="#">Теги</a>
            </nav>
        </header>
        <main>
            <article>
                <header>
                    <h2>Заголовок статьи</h2>
                    <time>25.01.1997</time>
                </header>
                <p>Статья</p>
                <footer>
                    <ul>
                        <li><a href="#">тег один</a></li>
                        <li><a href="#">тег два</a></li>
                        <li><a href="#">тег три</a></li>
                    </ul>
                </footer>
            </article>
            <article>
                <header>
                    <h2>Заголовок статьи</h2>
                    <time>25.01.1997</time>
                </header>
                <p>Статья</p>
                <footer>
                    <ul>
                        <li><a href="#">тег один</a></li>
                        <li><a href="#">тег два</a></li>
                        <li><a href="#">тег три</a></li>
                    </ul>
                </footer>
            </article>
        </main>
        <nav>
            <ul>
                <li><a href="#">Прошлое</a></li>
                <li><a href="#">Новое</a></li>
            </ul>
        </nav>
        <footer>
            <address>
                <a href="#">Odo Veiz</a>
            </address>
        </footer>
    </body>
</html>


PS
Как правильней размещать текст статьи,
body > main > article > p или body > main > article > section ?
  • Вопрос задан
  • 2094 просмотра
Пригласить эксперта
Ответы на вопрос 4
@GreatRash
HTML5-доктора считают, что <nav> в футере статьи лишний.
Ответ написан
LazyProger
@LazyProger
не ну...
Еще бы посоветовал добавить микроразметку, легко добавить с помощью
гугл -> гугл вебмастер -> ваш сайт -> другие ресурсы -> Мастер разметки структурированных данных
Ответ написан
Комментировать
@esvlad
Веб-разработчик
Нет, но не совсем
<nav>
    <ul>
       <li><a href="#">Прошлое</a></li>
       <li><a href="#">Новое</a></li>
    </ul>
</nav>
<nav>
    <ul>
       <li><a href="#">тег один</a></li>
    </ul>
</nav>

Данные блоки не относятся к навигации, а значит nav лишнее

header и footer обычно используются для шапки и подвала сайта
Ответ написан
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
header - это элемент документа или секции, содержащий дополнительную информацию к документу или секции. Рекомендовано в нем использовать:
authorship information, copyright information, contact information, sitemap, back to top links, related documents.
Так что спорно его использование внутри article, но уж точно nav неуместен. Так как это тег для блока глобальной навигации. Их может быть несколько, если это каталог товаров и навигация по статичным страницам, но для тегов - не стоит.
На мой взгляд более правильно:
<section>
<header>
<h2>Заголовок статьи</h2><time>25.01.1997</time>
 </header>
<article>
                Статья
</article>
                    <div class="tags">
                        <ul>
                            <li><a href="#">тег один</a></li>
                            <li><a href="#">тег два</a></li>
                            <li><a href="#">тег три</a></li>
                        </ul>
                    </div>
 </section>


Вообще вот тут весьма подробно расписано предназначение тегов:
www.w3schools.com/TAgs/tag_header.asp
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы