Задать вопрос
@t38c3j
html

Правильная ли 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 ?
  • Вопрос задан
  • 2147 просмотров
Комментировать
Подписаться 6 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
@GreatRash
HTML5-доктора считают, что <nav> в футере статьи лишний.
Ответ написан
2 комментария
2 комментария
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 обычно используются для шапки и подвала сайта
Ответ написан
4 комментария
4 комментария
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
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы