In this session, let us discuss about the structural elements of html5. html5 has got these structural elements to provide a better document structure. The structural elements are listed below, hit that nail article section, I say footer. The name itself depicts what exactly these elements are up to. Let me first show you a pictorial representation. This is a web page.

So the header bolts on the top of the page, the name is used for representing the maneuver. The article is used for representing an article in a web page and the footer is in the bottom of the page, I said is totally separate from the main content. Now let us discuss this in detail. What is the use of header if you want to add your company details or company name or your logo If you want to do a table of contents, you are search button, you can go in for this header tab, all these information should be added within this hit depth. I have given an example over here, the company name and the tagline. Next, name tag name tag is used for providing a menu bar for your web page.

Like whenever you're visiting a web page, you see the menu bar like arbutus products, training contactors. All these represent the menu bar that can be done with the help of name tags. I have given an example over here. Within the name bar, I've got a list of items from my neighbor, our main menu item lists, index of articles, things for today such a story, they will be in the form of tabs. So this is a main Oba Next article, article is used to represent a blog post, or a news item or a magazine article. Even it can be used to represent a comment for a blog post.

I have given an example over here, my article has gone ahead that together with a paragraph What if my article is very big, it has got a assume that I'm writing a magazine post or assume that I'm writing a magazine article. I have got multiple sections within it, like an introduction, the details and conclusion. In that scenario, you need to go in for the section tab. Within an article, I can have multiple sections, each section representing one item, one section for introduction, one section for the test, one section for conclusion. Within the section, you can add, headers, paragraph, all the stuff you can just add it, it is just to represent that within an hour. Article I have bought these many sections.

So below this section, what is the final pack your water food and your bottom I say our face is totally separate from the main content, it will be either on the left hand side or on the right hand side. It is used to represent the profile of an author in case of a blog post up to the use of newsfeed newsfeed. In case of a magazine if you are going in for different magazines, you will be seeing a news feed which is rolling out on the left hand side or on the right hand side that can be done with the help us say. Then finally you've got the footer, footer on the bottom of the web page. It is useful representing the stuff like the publishers information, copyright details, the date and time of publishing. Then the Trademark Information if you want to represent all these, you can add this within the footer tab.

Let me now again go back to the pictorial represent invasion. So this is my web page. Now try to related headers for heading names for menu item articles for blog posts. Well, in a blog post, if you're having multiple sections going for Section tags, if you want to add the profile details or the details about the author, then you can go in for asset. Or if you want to add a proper kind of thing, use assets. Finally, add the footer, all these stats, they provide a nice document structure, it doesn't mean that if you use four footer, it will go to the bottom and if you use header, it will go to the top of the page.

If you want to all these properly, you need to add CSS so that the content that is added with an asset will be pushed to the right. And then the content that is added in the footer will be pushed to the bottom. The header will remain on the top for this you need to add CSS these structural tasks is only for the developer to understand that I have I am giving A proper structure for my document here adding a header. It has to be within the header only when you want to add the menu items, try to add it within the name but within the name tag. And when you're adding a blog post, try to put this within an article. These are done only for the developer, which helps in proper debugging and maintenance.

This is all about the structural elements of html5. Thank you