How to structure an article in HTML5 Semantics

It’s important to get the HTML5 semantics right. It helps browser to establish what is what, and it’s good for accessibility. Google also promotes the sites that are mobile responsive and semantic.

If you’re having an old site, or perhaps want to learn how to make a semantic article, I will show you on how you can do it, and explain each part.

Alright, let’s get started!

 

The Structure

It all depends on what is the website UI, on how you should go and structure the HTML5 component.

I’m going to show you how to structure this component:

The article it’self must be wrapped around the ‘article’ tag, and it consists of ‘header’, ‘section’ and ‘footer’.

<article>
    
    <header></header>

    <section></section>

    <footer></foooter>

</article>

 

The header

What you put here, and in any other section, is up to you. Like I said before, it all depends on how the component should look.

In this case, we are going to put a ‘Category’, ‘image’ and ‘views’ features to the header.

Now, don’t use the ‘header’ tag when you don’t need to. If you’re going to have only a title, there is no need to use a header tag.

 

The section

The main content goes in the section. In this case, the article excerpt.

We use section only when the content is content related. Which means, if we have an article, and we want to put in the excerpt there, we can either put it in a div (which you can put any content) or more semantic way of using the ‘section’ ( which is related content to the article).

The footer

Here, anything left, such as author or date, can find it’s placed. In this case, it’s the author has the picture, name and date. Let’s focus on the date.

HTML5 has an attribute called ‘time’. When making an article, you want to put in the ‘time’ tag instead of a div or span.

<time datetime="2018-13-01">13th Janary, 2018</time>
//YY-DD-MM - in this case

There is also a ‘pubdate’

pubdate="pubdate"

The pubdate indicates the time the element was published. You don’t have to include the pubdate if you don’t want to.

 

Conclusion

At the end, use what you need. These things aren’t necessary. If you don’t need something, just don’t use it! It will save some space and make your code cleaner.

The way you structure the article, will vary. You might not have an image, but perhaps you have more than just a heading tag, so you might use the ‘header’ tag to wrap things up. Same goes for footer and any other semantic elements.

Happy Coding! 🙂

 

 

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments