Hello guys I am Shahzad and welcome to lesson number five today's we are going to learn the semantic elements How can you use the semantic elements like sections articles, like navigation nav tag or semantic elements header footer. So these are the basics and widely used the semantic elements in HTML five, okay. So now we are starting from the section so this is the semantic element of the Section and Section close. Okay, now what that means a sections element define a sections in your HTML document or your or your HTML page. Like if I define these sections and I'm saying this is h1 and I'm saying this is f1 I'm saying this is angular AngularJS. And if I'm writing this is about AngularJS for the beginners, and I should copy this and paste this.

Okay, now you have your one section. I'm just copying and 15. Okay, this is your second section. It's about the HTML five, html5 and now I'm saying this is for the female part esteemeth And also the HTML five, and also the five. Now, if you open your browser, refresh the page, make sure now you have your two sections. One is the English air.

And the second is the HTML file. So in this way you can create your sections, make sure our sections defines a section in our page or in our document. Whenever I say document that means I'm talking about your web page. Okay, so now if we take the example so as you can see, this is the website. And this is the blog section. So definitely they have some articles in the blab blog sections.

So right click, view page source and now find Article so now as you can see, this is the article they are using and they have a lot of articles many articles here. So, this is the article and this is the articles. So in simple words your article specifies independent, that means safe content content. So safe contained content, that means they have some articles. Okay, so this is a big difference between your sections and your article. So they have these articles here and they have two sections on this page like this is one section.

And this is second sections. If you talk about the semantic element, this is a sidebar and they have one section and in the one section they have many Articles so how can you create your articles? I'm going to come in this poll so you can easily get the code Okay, so I'll get you come in the course similarly, similar to HTML for so this is article in this way you can create your articles, your article goes there, like your sections. copy these are boy cases but boy here. So now you have your one article here. You have you may have many articles like this AngularJS two and AngularJS free go to the page, refresh the page.

Now you have three articles. Okay? Okay, now let's talk about the header. So your header elements specify a header for your whole document that means for your whole page and also for your section, like if you open a website, any website, so definitely they have the header sections. Make sure so as you can see, this is the head sections, and they have the whole they have the head for the whole website or the document. Okay, so now, you can also create multiple headers for your document.

Like if you want to create the navigation bar Let me Okay, now I'm going to comment this so you can easily get the code so this is the article chord. Okay, now this is the header. I'm saying this is the header. Okay, and I'm using this header for the entire website or for the whole page, I'm saying I have to define the name here navigation bar here, navigation bar here. And also your header content like this is your slider. And also related to the header section.

So this is navigation bar and your slider so these sections available in the header. So, I have to define this one and I I also have to define this one. So, this is a slider make sure this is a slider, okay. So now your navigation bar goes here navigation bar, your slider goes here and you are also other elements other elements okay. So this is the header for your whole page or for your whole document make sure whenever I say whole document or whenever I say page, so document and the page are the same things. Okay.

You can also create multiple headers in simple words, like your article, you have one article and your article. You have this added sections and your header close here. Okay. So this is your header. And also you can also define something here our detail this you can also use the new tense tag. So this is also semantic elements detail about the Angular JS.

You can also use the link here. So it's totally depend upon you how you are coding and how you are using your elements. You may have the footer section, so this is the footer sections. If you right click Inspect Element, and as you can see, this is the footer sections and all the footer. And well Well, in this case, so this is a semantic tag for that. So you have to define your footer like this.

So in your footer, you definitely have your ul Li divs a lot of things you can define. Here you can also define table something like this. So your footer go here. Okay, refresh the page. So this is your footer. Okay, so it's certainly divine upon you how you are coding and what is your requirement and definitely you have the navigation bar we have already discussed the nav, so this is the name nav, that means you can create your navigation bar something like this or something like this.

So this is your navigation spa. You can also create your navigation bar. This is the Basic CDs. So that's why we are explaining each and everything, dt. Once you complete the HTML and html5, you can also learn the styling. That means the CSS.

So you can also create this attractive or these kind of attractive website using HTML, CSS and some other frameworks. So we have another like this sections, okay, like if I open the blog section. So as you can see, this is the sidebar, so they have some articles, left side and right side they have the sidebar, so I'm going to create your sidebar. So first of all, aside element defines some content, aside from the content. It is placed in lightning sidebar Okay. So now if you have let me come in this.

So, you can easily get the code if you have two sections section one and also So, this is section one, section one and also you have section two and intersections you definitely have the sidebar. So, how can you define the sidebar, you have to define a side a side here your sidebar here. So, go to the UI refresh the page. So, now as you can see this is the section this is the section one, and this is the section and also you have your sidebar, make sure you can you cannot create the sidebar like this. These elements defines its internal or inside elements like this section is defining that you have the sidebar. You can specify other things inside here.

But you can create these types of layouts using your CSS and also some other frameworks like bootstrap. Okay, so I think this is enough for Linux. We are going to cover some other topics. So thank you for watching.