Skip to content Skip to sidebar Skip to footer
Home / Html / Semantic Markup / Tags

How To Properly Use The Html Semantic Elements In A Blog?

Post a Comment
I read a lot of information on w3schools. It defines
as: The
element defines a section in a document. [...] A home page could normally be split int

Solution 1:

header / footer

There are sectioning content and sectioning root elements. header/footer elements always "belong" to one of these sectioning (content/root) elements.

<body><header>belongs to the 'body'</header><article><header>belongs to the 'article'</header><footer>belongs to the 'article'</footer></article><div><header>belongs to the 'body'</header><footer>belongs to the 'body'</footer></div><footer>belongs to the 'body'</footer></body>

Note that the div element is not a sectioning element, which is why its header/footer children belong to the body (which is a sectioning root element), not to the div.

So you can use header/footer elements for site-wide content by placing them so that their nearest sectioning parent element is the body element.

section

A header/footer could consist of one or multiple section elements, but this typically only makes sense if the header/footer is (unusually) complex.

In general, when does it make sense to use section? If you have an implicit section, or if you need an entry in the document outline. Please see my related answers:

Note that the validator reports a warning, not an error, when a sectioning content element doesn’t have a heading element. They are not required to have headings, but it can be sign that the sectioning content elements gets misused: it typically only makes sense to use one if it could have a heading, even if you don’t actually provide one.

Solution 2:

A header is not the same as heading. You use the <header> tag for your header (page head) and <h1> to <h6> for you heading (titles, subtitles, etc.). Thats the difference between header and headings. Other than that your markup seems logical enough, except for the header-heading issue and I wouldn't go using <footer> - the tag for page footers to display some data like dates or authors.

HTML5 semantics is very logical - <header>,<nav>,<main> content, content of main content, <aside> content etc...

But an <article> can be part of a <section>. And a section can also be part of an article. So my opinion is that if you follow the logic of HTML tags you don't have to worry about semantics much.

Oh, and to answer your question. I would do it like this:

<section>
    <article>
        <h2>Article1 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>

    <article>
        <h2>Article2 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>
</section>

If needed you could use the <time> tag with the <p> tag, but I would not (because of compatibility)

Post a Comment for "How To Properly Use The Html Semantic Elements In A Blog?"