Задать вопрос
@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 ?
  • Вопрос задан
  • 2145 просмотров
Комментировать
Подписаться 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 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend developer / HTML-верстальщик (part-time)
HRScan
от 800 до 1 000 €
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка TWA игру-приложение под крипто-проект
22 июн. 2024, в 23:57
250000 руб./за проект
Миграция C++ кода для ARM7TDMI в новую среду разработки
21 июн. 2024, в 17:10
85000 руб./за проект
Конвертация в excel
22 июн. 2024, в 18:44
500 руб./за проект
Ещё заказы