Learn HTML

"Are you looking to learn HTML from scratch? Look no further! Our HTML course is designed for both beginners and advanced learners who want to master the fundamental concepts of HTML. Our comprehensive course covers everything from the basic concepts of HTML, including tags, attributes, and elements, to the more advanced concepts such as multimedia, responsive design, and accessibility."

HTML Chapters Menu

HTML Layout Elements

HTML layout elements are used to structure and organize the content of a webpage. Here are some commonly used HTML layout elements:

  1. <header>: This tag represents a header section at the top of a webpage, typically containing a logo, navigation links, and other introductory content.
  2. <nav>: This tag represents a navigation menu on a webpage, typically containing links to other pages within the website.
  3. <section>: This tag represents a section of content on a webpage, such as an article, blog post, or product description.
  4. <article>: This tag represents a standalone piece of content on a webpage, such as a news article or blog post.
  5. <aside>: This tag represents a section of content that is related to the main content of the webpage but not integral to it, such as a sidebar or a set of links.
  6. <footer>: This tag represents a footer section at the bottom of a webpage, typically containing copyright information, contact details, and other relevant information.
  7. <main>: This tag represents the main content of a webpage, and should only be used once per page.

Here's an example of how these layout elements can be used to structure a webpage:


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Awesome Website</title>
</head>
<body>
   <header>
       <h1>My Awesome Website</h1>
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Products</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
   </header>
   <main>
       <section>
           <h2>About Us</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget eros nec nisi ultricies facilisis.</p>
       </section>
       <section>
           <h2>Our Products</h2>
           <article>
               <h3>Product 1</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget eros nec nisi ultricies facilisis.</p>
           </article>
           <article>
               <h3>Product 2</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget eros nec nisi ultricies facilisis.</p>
           </article>
       </section>
       <aside>
           <h3>Related Links</h3>
           <ul>
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
           </ul>
       </aside>
   </main>
   <footer>
       <p>© 2023 My Awesome Website. All rights reserved.</p>
   </footer>
</body>
</html>


In this example, the <header>, <nav>, <section>, <article>, <aside>, <main>, and <footer> elements are used to structure the webpage and organize its content. 

Please Note: These above 7 elements also called as HTML semantic elements are those elements that have a specific meaning or purpose, and are used to structure content on a webpage. They help search engines and web browsers to understand the content of a page, and make it easier for developers to create well-organized and accessible webpages.