HTML Layouts

HTML Layouts Tutorials

1. HTML Layouts

HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the web pages can be arranged. Web-page layout works with the arrangement of visual elements of an HTML document.

Web page layout is the most important part to keep in mind while creating a website so that our website can appear professional with a great look. You can also use CSS and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website designing.

Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a webpage.

  • <header>: It is used to define a header for a document or a section.
  • <nav>: It is used to define a container for navigation links
  • <section>: It is used to define a section in a document
  • <article>: It is used to define an independent self-contained article
  • <aside>: It is used to define content aside from the content (like a sidebar)
  • <footer>: It is used to define a footer for a document or a section
  • <details>: It is used to define additional details
  • <summary>: It is used to define a heading for the <details> element

2. Description of various Layout elements

3. HTML header


element is used to create a header section of web pages. The header contains the introductory content, heading element, logo or icon for the webpage, and authorship information.


4. Example:

  1. <header style="background-color: #303030;  height: 80px; width: 100%">  
  2.       <h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to     MyFirstWebpage</h1>  
  3.    </header>  

5. HTML nav


6. Example:

  1. <nav style="background-color:#bcdeef;" 
  2.         <h1 style="text-align: center;">Navgation Links</h1>  
  3.         <ul>  
  4.             <li><a href="#">link1</a></li>  
  5.             <li><a href="#">link2</a></li>  
  6.             <li><a href="#">link3</a></li>  
  7.             <li><a href="#">link4</a></li>  
  8.         </ul>  
  9.     </nav>  

7. HTML section


elements represent a separate section of a web page which contains related element grouped together. It can contain: text, images, tables, videos, etc.


8. Example:

  1. <section style="background-color:#ff7f50; width: 100%border: 1px solid black;">  
  2.     <h2>Introduction to HTML</h2>  
  3.     <p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser..</p>  
  4.   </section>  

9. HTML article


tag is used to contain a self-contained article such as big story, huge article, etc.

10. Example:

  1. <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">  
  2.     <h2>History of Computer</h2>  
  3.     <p>Write your content here for the history of computer</p>  
  4. </article>  

11. HTML aside


12. Example:

  1. <aside style="background-color:#e6e6fa">  
  2.     <h2>Sidebar information</h2>  
  3.     <p>This conatins information which will represent like a side bar for a webpage</p>  
  4.   </aside>  

13. HTML footer


element defines the footer for that document or web page. It mostly contains information about the author, copyright, other links, etc.


14. Example:

  1. <footer style="background-color: #f0f8ff; width: 100%; text-align: center;">  
  2.     <h3>Footer Example</h3>  
  3.     <p>© Copyright 2018-2020</p>  
  4. </footer>  

15. HTML details


element is used to add extra details about the web page and use can hide or show the details as per requirement.


16. Example:

  1. <details style="background-color: #f5deb3">  
  2.     <summary>This is visible section: click to show other details</summary>  
  3.     <p>This section only shows if user want to see it. </p>  
  4.  </details>  

17. HTML summary


element is used with the
element in a web page. It is used as summary, captions about the content of


18. Example:

  1. <details>  
  2.     <summary>HTML is acronym for?</summary>  
  3.     <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>  
  4.  </details>