Is the HTML5 markup correct for a blog?

T

t38c3j2016-06-08 09:26:48

HTML

t38c3j, 2016-06-08 09:26:48

There are so many links in Google to articles about the correct HTML5 markup, but each one is almost something different somewhere ...
I threw in the structure from the knowledge gained, maybe you can add something, correct me in something, according to the validator, the content is only wrong tag

<!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
What is the correct way to place the text of the article,
body > main > article > p or body > main > article > section ?

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

G

GreatRash, 2016-06-08
@GreatRash

HTML5 doctors think the <nav> in the article footer is redundant.

D

Dmitry Prikhodchenko, 2016-06-08
@LazyProger

I would also advise adding micro-markup, easy to add using
Google -> Google Webmaster -> your site -> other resources -> Structured Data Markup Wizard

V

Vladislav Startsev, 2016-06-08
@esvlad

No, but not really

<nav>
    <ul>
       <li><a href="#">Прошлое</a></li>
       <li><a href="#">Новое</a></li>
    </ul>
</nav>
<nav>
    <ul>
       <li><a href="#">тег один</a></li>
    </ul>
</nav>

These blocks do not apply to navigation, which means that nav is superfluous
header and footer are usually used for the header and footer of the site

M

Maxim Timofeev, 2016-06-08
@webinar

header is an element of a document or section that contains additional information about the document or section. It is recommended to use in it:
authorship information, copyright information, contact information, sitemap, back to top links, related documents.
So its use inside the article is debatable, but the nav is definitely inappropriate. Since this is a tag for the global navigation block. There may be several of them if it is a product catalog and navigation on static pages, but for tags it is not worth it.
More correct in my opinion:

<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>

In general, the purpose of tags is described in great detail here:
www.w3schools.com/TAgs/tag_header.asp