Sections and Layout Elements

Learn how HTML sectioning elements help organize page layout and improve SEO and accessibility.

Loading...
Sections and Layout Elements

HTML sectioning and layout elements define the visual and structural hierarchy of a webpage.

They provide meaning to different content blocks, making it easier for browsers, screen readers, and search engines to understand the purpose of each part of a page.

Common elements:

The <header> HTML element represents a container for introductory content or a set of navigational links, which includes heading elements, logo, and authorship information.

Note: There can be several <header> elements in one document, but it cannot be placed within a <footer>, <address>, or another <header> element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <header>
   <h1>Heading</h1>
   <p>Author information</p>
  </header>
 </body>
</html>

The <header> HTML element includes both opening (<header>) and closing (</header>) tags.

The <footer> HTML element is used to define a footer on a web page.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <footer>
   <p>Contact details:</p>
   <p>Social accounts:</p>
   ©Copyright2020 - All rights reserved.
  </footer>
 </body>
</html>

The <footer> HTML element includes both opening (<footer>) and closing (</footer>) tags.

main

The <main> HTML element is used to specify the main content of the web page.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <main>
   <h1>HTML</h1>
   <p>
     HTML stands for Hyper Text Markup Language. It is a standard markup language, not any programming language, and is used for creating web pages and web applications. Web browsers receive an HTML document from a web server or local storage and display the document as a web page. Every web page must have an `index.html` file.
   </p>
  </main>
</body>
</html>

Note: There must not be more than one <main> element in the document. It should not contain any repeated content.

The <main> HTML element includes both opening (<main>) and closing (</main>) tags.

section

The <section> HTML element is used to define a section in an HTML document.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <section>
   <h1>HTML</h1>
   <p>
    HTML stands for Hypertext Markup Language. It is the standard markup language used for creating web pages and web applications.
   </p>
  </section>
  <section>
   <h1>CSS</h1>
   <p>
    CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation and formatting of web pages.
   </p>
  </section>
  <section>
    <h1>JavaScript</h1>
    <p>
      JavaScript is a programming language that is used for creating
interactive web applications.
    </p>
  </section>
</body>
</html>

The <section> HTML element includes both opening (<section>) and closing (</section>) tags.

article

The <article> HTML element is used to represent an article. The content within the <article> tag is independent of the other content of the web page. This tag is generally used on Forum posts, Blog posts, News stories, comments, etc.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <article>
   <h1>HTML</h1>
   <p>HTML is a markup language. </p>
  </article>
 </body>
</html>

The <article> HTML element includes both opening (<article>) and closing (</article>) tags.

aside

The <aside> HTML element defines the content aside from the main content of the web page. It is indirectly related to the main web page.

The aside element’s content should often be placed as a sidebar in the web page. This element does not render specifically in the browser, but you can style it to render specifically.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <aside>
   <h1>HTML</h1>
   <p>HTML is a markup language.</p>
  </aside>
 </body>
</html>

The <aside> HTML element includes both opening (<aside>) and closing (</aside>) tags.

The <menu> HTML element is used to define a list or menu.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <menu>
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
  </menu>
 </body>
</html>

The <menu> HTML element includes both opening (<menu>) and closing (</menu>) tags.

address

The <address> HTML element indicates the contact information of an author, person, or organization. You can include any type of information in this tag, for example, URL, physical address, phone number, email, other links, etc. 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <address>
    Author <a href="mailto:author@example.com">Author name</a>
    <br />
    Visit us at: <br />
    Author's address <br />
  </address>
 </body>
</html>

The <address> HTML element includes both opening (<address>) and closing (</address>) tags.

The <nav> HTML element is used to define a set of major blocks of navigation links.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <nav>
    <a href="/html">HTML</a>
    <a href="/css">CSS</a>
    <a href="/javascript">JavaScript</a>
  </nav>
 </body>
</html>

The <nav> HTML element includes both opening (<nav>) and closing (</nav>) tags.

div

The <div> (content division) HTML element defines a section in an HTML document. In other words, the <div> element is a container for HTML elements. You can put any sort of content inside this element.

It has no effect on the content or layout until you style it in some way using CSS.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <div>
   <h1>This is a heading inside div.</h1>
   <p>This is a paragraph inside div.</p>
  </div>
 </body>
</html>

The <div> HTML element includes both opening (<div>) and closing (</div>) tags.