In this article, we will give an example of semantic HTML structure. This isn’t a ready-made, precise formula, but it’s a great avenue for those who need help with this task.
The first tag we will create within tags é a tag
it is usually common to add tags
which is the label of the navigation menu.
In this navigation menu, we list links with the help of labels ,
After tag
within tag a page can contain different sections. Semantically, each part must play a unique role, for example:
- Post section
- Comment area
- Sponsor section
- Photo gallery section
- …
For this structure, let’s consider the news posts section. So it would work to include this section with a tag called
Now we need to create the news posts that belong to this section. For this, there are labels
Will represent a position.
this label
.
one day There may be a side section parallel to other more important sections, in which case we use labels
For the code we are developing, the tag
href="#home">Home
href="#posts">Posts
id="posts">
class="post">
Post title 1
Post content 1
class="post">
Post title 2
Post content 2
Best posts
href="#">Best post 1
href="#">Best post 2
href="#">Best post 3
Finally, we will add the popular
indicating that it contains contact information.
The complete HTML structure is as follows:
Chapters with articles or articles with chapters?
In our HTML structure, each
. Some development styles prefer opposite ideas, each style
Contains a set of tags
.
Whatever you choose, it’s important to keep the same convention across all projects. If you are in a company, follow the standards used by the company.
This article discusses
- Usuda Day
- Usuda Day
- Usuda Day
- Usuda Day
- Usuda Day
- Usuda Day
- Usuda Day
- Semantic HTML structure
author
Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/