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