In the last lesson, we learn about basic tags. Now, its time to use them in an HTML page. In this lesson, we learn the right way to use HTML tags in a web-page. So let get started.
Web page Structure
Every website has almost the same type of layout for their pages. So we can divide a web-page in a collection of some sections. For reference look into below image.
Hope this image helps you to understand the basic layout of a webpage. Its just a dummy layout, many websites have more sections other than these. But header, footer and main content section are basic sections. I explain these section in a few words to make it more clear.
- The header section contains the logo, menu etc and it is the same for all pages.
- The footer section is the bottom part which is the same in all pages.
- The main content section has the content of the page. It varies from page to page.
Breaking a webpage into section help in coding. So let we divided the layout into the header, footer and main content section. Then our code will be like.
Now explain it.
- First I write the basic structure of an HTML document and then sections in the body. As visible content comes in the body.
- Then I use a div tag to take all page content in one section. You can get it with the class site.
- Then I divide site div into 3 sections, header, content and footer.
<div> tag is used to make divisions and class attribute give it an identity. So we can say that the header section’s div have a name, that is header. Class attribute plays a vital role in CSS, which we learn in the next lesson.
The elements that we need will be used within the respective div. Using div tag, I make content bounded in one section.
Points to be noted:
- Make sure div closing is put on right place. If div closing is missed or wrongly placed then the layout will break.
- Any tag you are using in a div must be closed within the div.
That’s all for today. Try to make your own layout and use some other tags within the section. It needs some practice to clear this thing. In our next lesson, we will learn about it as well as style the elements.
How useful was this post?
Click on a star to rate it!
Average rating / 5. Vote count:
We are sorry that this post was not useful for you!
Let us improve this post!
Thanks for your feedback!