<article>, <section>, <header>, <main>, <footer> etc tags only used for the code’s better understanding?
Hi there, welcome to the forums!
You’ll notice that I’ve edited your post slightly so that the HTML tags you entered are shown in the post. Feel free to click the edit icon to see how I did it.
Each of the tags you mention are broadly the same as a
<div> tag, in that they’re used to group other elements together.
The advantages of using semantic tags over a plain
The tag on its own conveys contextual information about the content within it. For example, if you saw a
<footer>tag in an HTML document you would assume “Oh, that’s the page footer - that’ll be at the bottom”; likewise if you saw
<main>you’d think “Ok, that’s where the bulk of the content is”. These tags make it easier to understand what their content is.
Semantic tags are also beneficial for screen readers for the reasons above; a screen reader isn’t going to distinguish between multiple
<div>s because they’re all the same tag. Using an appropriate semantic tag makes it easier to know where your key content is, and what is less important.