HTML Layout Element or Tags

HTML Layout provide a good way to arrange web page design. In HTML Layout flowing element or tags are used.

  1. <header>    :- Define a header for a document 
  2. <nav>          :- Add Navigation link (such as Home, About, etc.)
  3. <section>   :- Define a section in a document
  4. <article>     :- Define a self-contained related your document
  5. <aside>       :- Define a contain in sidebar
  6. <footer>     :- Define a footer for a dociment

<header>

<nav>

<section>

<aside>

<article>

<footer>

 

Example:- Using Table
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout </title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1 style="text-align:center;">HTML Language Study (Header)</h1>
            </td>
         </tr>

<tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h3 style="text-align:center;"> <a href="https://htmleasystudy.blogspot.com">Home</a>&nbsp &nbsp  <a href="https://htmleasystudy.blogspot.com/p/about.html">About</a> &nbsp &nbsp<a href="https://htmleasystudy.blogspot.com/p/contact-us.html"> Contact</a> (Navigation)</h3>
            </td>
         </tr>

         <tr valign = "top">
            <td bgcolor = "#aaa" width = "150">
               <h1>(Section or Article)</h1><br />
<b>Main Menu</b><br>
               HTML<br />
              Laguage<br />
              Study
            </td>
            
            <td bgcolor = "#eee" width = "50" height = "200">
<h1>(sidebar)</h1> 

               Categories<br>
HTML
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2020<a href="https://htmleasystudy.blogspot.com"> HTML Language Study</a> <h3>(Footer)</h3>
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

Output:-