HTML Semantic Elements

Semantic Elements

Hello and welcome back.

So far we have covered the structure of the HTML elements and tanks and heading in paragraph elements

and you must now be familiar with this basic base structure I also mentioned earlier that all the visible elements on the Web page are added inside this body


In other words, everything that you see on a website like this one for example that we are gonna build as part of our project, everything from top to bottom is

all part of the body element except for this based title that we add inside the head element.

Apart from that inside this head we only add the additional matter information about the page that we’ll talk about towards the end of this module.

On the other hand this body element is a bigger topic since it covers all the visible parts of the page.

So let’s dive deeper inside this body element and see what are the different elements we can add and in this lesson, we’ll start with the basic fundamental

elements first.

We call these semantic elements as well because they explain the base design and each of them has a

meaning for instance for us we have to head an element that accesses the page header and it holds the introductory content therefore inside the header.

We generally keep the logo and some text or links for reference on this Web site.

This top part with the logo on the left and phone number on the right is added inside the header element then comes this nav element to add the navigation

list of what we also call the menu items of the page like on the web page.

We have this menu with Home Services and contact us as the navigational links these navigational links are placed inside the NAV element.

Then we also have the inside element that can be used if you want to add a sidebar on the beach like on this website.

The sidebar on the right is added inside the inside element.

Next, we have the section element for different sections on the page and we use it for thematic grouping of the page content.

For instance on our Web page services that we offer can be one section and what our customers have to say can be another section

the first one groups all the different services that are offered.

Semantic Elements


The second one group’s different customer reviews.

Then there’s the article element is an element for independent and self-contained content which means the content that can be read independently from the rest of the website.

For example inside the services that we over section Web services can be one article and automation services can be another article another example that

I can think of is let’s say there’s a magazine the different categories or different blogs such as travel blog food blogs or tech blogs.

These categories can be referred to as sections where each section groups are blogs belonging to that particular category or team like travel section groups

all the travel related blogs food section holds all the food-related blogs and so on.

Now the different blogs inside each category are articles that are independent content which means that if I remove any of one blog and it won’t really affect

the structure of the website.

But if I did move the section travel blogs then it means all the blogs inside are removed or if I don’t add any section and just list the blogs then everything will

look an organized so removing a section can affect the structure of the website.

But you’re moving an article does not.

Another example can be of a newspaper where different sections can be referred to as political news sports news advertisements vile articles can be referred

to as different news that we have inside each section so whenever you are adding a group of content based on the team then you can use Section element and

if you are writing just an individual piece of content then you can use the article element now.

Lastly, we have the foreign element to add the page footer and like on this website we generally keep information such as authorship information copyright

information side links or other components in order to provide more information to the user as well as important links to direct them to other pages.

Once they have come here after exploring the whole Web page it’s important to note that based on the structure of the website you are designing.

You may not want to add some of the elements for instance on some of the modern web sites.

We don’t have any sidebar and it’s okay to even skip them.

Also you don’t need to follow any strict rules for adding these elements.

It’s totally your call how you want to design the structure of your website.

As for your ease of coding and can add the elements accordingly.

For instance, some people keep the NAV element inside the header element as it can also be considered as introductory content.

You just need to understand the basic meaning and then we can structure it the way we want another important the thing to note here is that we can use the

HTML head and body element only once on a beach and we can

not repeat them while we can to beat other elements as many times as we want.

Like the elements inside the body text such as the heading paragraph image list elements tables and so on.

We can beat them.

In fact, we can also repeat the header and the footer, as well as a section, can have a header and a

photo depending upon how much you want to organize your website.

As you start coding you’ll be even more familiar with these in the next lesson.

I’m gonna talk about another important element that we commonly use in each team.

So keep learning and see you in the next lesson.

Also, Read –

Leave a Reply

Your email address will not be published. Required fields are marked *