HTML Layout

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.

Web-Page layout is the most important part to keep in mind whenever we create any new website. It makes our website look great that attracts many audiences. We can also make use of CSS and JavaScript frameworks like CSS grid, CSS flexbox to create responsive and dynamic websites.

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:

Example

Example Explained

<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>

Copy the Code and it here

<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>

Copy the Code and run it here

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:

Example

<!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>

Copy the Code and run it here

<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.

Next

Related Articles

HTML Elements

HTML Head Elements

Add JavaScript to HTML

HTML Layout – crus4