HTML Layout deals with arranging the web pages in well mannered, well structured and in responsive form. HTML layouts is used to make the web pages look cool and interactive. We can also say that Web-page layout works with arrangement of visual elements of a web page.
HTML has many semantic elements that specifies the different parts of a web page.
In an Example below this is how a generic HTML5 page looks like:
- <header> :- The <header> element is used to define the header of the document. In HTML4, we have to use the <div> element to define a header. But in HTML5 we simply use a <header> element inside the body tag like this:
<!DOCTYPE html> <html> <head> <title> header element </title> </head> <body> <header> <h1> This is a heading </h1> <h3> This is also a heading </h3> </header> </body> </html>
- <nav>:- The <nav> element (Navigation bar) defines a set of navigation links. The navigation bar is just like the menu list, as it links the other web pages within the page.
Here is how we can add the navigation links in HTML:
<!DOCTYPE html> <html> <head> <title> header element </title> </head> <body> <nav> <ul> <li> <a href="crus4.com"> Home </a> </li> <li> <a href="https://crus4.com/contact/"> Contact Us </a> </li> <li> <a href="https://crus4.com/about/"> About Us </a> </li> </ul> </body> </html>
It is not mandatory to put all the links inside a <nav> element. We can add as many links we want to add inside a <body>or any other element, that don’t need to be in <nav> element. The <nav> is only for major blocks of navigation links.
- <section>:- The <section> element is used to define a section in a document. We can add <section> element between the <body> tags.
In a below example we have added two sections in a document:
<!DOCTYPE html> <html> <body> <section> <h2>crus4</h2> <p> crus4 is a #1 online learning platform. Here you can learn Web Development, Programming, Ethical Hacking, Cybersecurity, Networking and more for free. So what are you waiting for <a href="crus4.com"> Let's get started </a> </p> </section> <section> <h2> For Video Tutorial </h2> <p> We also make video tutorials about Ethical Hacking, Programming, Networking and more. If you wanna to watch our video tutorials simply search crus4 on youtube or you can <a href ="https://youtube.com/channel/UCc4Ci-lGDAjJAAqupTsT-NA"> Click here </p> </section> </body> </html>
- <article>:- <article> element is used to define the independent, self contained content. <article> element is mostly used in blog posts.
- <aside>:- <aside> element includes some additional information about the article. It may be an advertisement or some other article related information. It is not mandatory to include <aside> element in a web page.
- <footer>:- The <footer> element contains the copyright information, contact information and other related information about the web page. We should always put <footer> element on the bottom of the web pages.