Learn how to use HTML semantic elements and attributes to define the main sections of your web page, such as the header, the navigation, the content, the sidebar, and the footer.

The element in HTML5 is a semantic element that is meant to represent the main content of a web page. The main element is used to identify and encapsulate the primary content of the page, making it easier for both users and search engines to understand the central topic or focus of the web page. Typically, a web page should have only one element, and it often includes an element as the main heading followed by various other content elements such as paragraphs ( ), images ( ), lists ( and ), tables ( ), and more, depending on the specific content of the page. This helps in organizing the page's structure and enhances its accessibility and search engine optimization (SEO).

The footer element in HTML is like a webpage's signature. 🖋️ It's the bottom part, akin to a book's final chapter, offering closure and extra details. 📚 In this space, you'll find important information like copyrights, contact details, and social media links. It's the website's way of saying goodbye, providing a warm handshake and inviting further exploration! 👋✨

Headings ( to ): 📚 Headings define content hierarchy. is the main title, to are subheadings. : 📑 Divides content into topics, like chapters in a book. : 📰 Represents a standalone piece, akin to an article in a magazine. and : 🏷️ contains intro content or navigation, holds contact info or links. : 🌐 Contains navigation links, similar to a book's table of contents. : 📦 A versatile container for grouping and styling elements in a layout.

In HTML (Hypertext Markup Language), you define the main sections of a web page using a variety of elements. These elements help structure your page and provide semantic meaning to different parts of the content. Here are the main sections typically used in a web page: : This is the root element that encloses the entire web page. : The element contains meta-information about the document, such as the title of the page, links to external resources (stylesheets, scripts, icons), and other metadata. : Inside the , the element is used to define the title of the web page that appears in the browser's title bar or tab.

Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the meaning—or semantics—of the content contained within them. By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page.

How to Use HTML Semantic Elements for Web Page Sections

1 Semantic elements

Semantic elements are HTML tags that convey the meaning and role of the content they contain, rather than just the presentation. For example, the <header> element indicates that the content inside it is part of the header section of the web page, which usually contains the logo, the site title, and the main menu. Similarly, the <nav> element indicates that the content inside it is part of the navigation section, which usually contains links to other pages or sections of the site. Other semantic elements include <main>, <article>, <section>, <aside>, and <footer>.

Add your perspective

Samuel O. Francis

Founder | UI/UX | Project Management | Graphic Design | Web Development | ForbesBLK
Report contribution
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Welcome to My Website</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> </header> <main> <h2>Featured Content</h2> <p>This is the main content of the web page.</p> </main> <aside> <h3>Sidebar</h3> <p>Additional information or links.</p> </aside> <footer> <p>© 2023 My Website</p> </footer> </body> </html>

Like
Mehmood Ul Hasnain

Web Developer | Shopify Specialist | IT Consultant | Your Partner in Digital Transformation
Report contribution
In HTML (Hypertext Markup Language), you define the main sections of a web page using a variety of elements. These elements help structure your page and provide semantic meaning to different parts of the content. Here are the main sections typically used in a web page: <html>: This is the root element that encloses the entire web page. <head>: The <head> element contains meta-information about the document, such as the title of the page, links to external resources (stylesheets, scripts, icons), and other metadata. <title>: Inside the <head>, the <title> element is used to define the title of the web page that appears in the browser's title bar or tab.

Like
Komal Mathur Gupta

Application Consultant @Capgemini | MBA in International Business Management | Digital Marketing | B2B Marketing | Content Creation | Campaign Creation | Social Media Marketing
Report contribution
Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the meaning—or semantics—of the content contained within them. By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page.

Like
Abdulwahab Ashimi

Principal, EduKarma. I write about Technology, Business & Leadership, innovate possibilities with EduKarma and inspire greatness through TrailForge et Co.
Report contribution
You define the main sections of a web page in HTML using structural elements such as <header>, <nav>, <main>, <aside>, and <footer> to encapsulate distinct parts of the content.

Like
Mousa A.

Software Engineer | Full Stack .NET Developer | C# | Web API | Angular
Report contribution
Here is a simple example of semantic HTML code: <body> <header> <nav class="navbar"> <img src="logo.jpg" alt="Logo"> <ul class="nav-list"> <li><a class="nav-link" href="#section-1">About</a></li> <li><a class="nav-link" href="#section-2">Contact</a></li> </ul> </nav> </header> <main> <section id="section-1"> <header class="section-header> <h1 class="title">About</h1> </header> <article> <p>Some text...</p> </article> </section> <section id="section-2"> <header class="section-header"> <h1 class="title">Contact</h1> </header> <article> <p>Some text...</p> </article> </section> </main> <footer> <p>Some text...</p> </footer> </body>

Like

Load more contributions

2 Main element

The main element is a semantic element that represents the main content of the web page, excluding the header, the navigation, the sidebar, and the footer. The main element should contain only one <h1> element, which is the main heading of the web page, and other content elements, such as <p>, <img>, <ul>, <ol>, <table>, etc. The main element helps users and search engines identify the primary topic and focus of the web page.

Add your perspective

Samuel O. Francis

Founder | UI/UX | Project Management | Graphic Design | Web Development | ForbesBLK
Report contribution
The <main> element in HTML5 is a semantic element that is meant to represent the main content of a web page. The main element is used to identify and encapsulate the primary content of the page, making it easier for both users and search engines to understand the central topic or focus of the web page. Typically, a web page should have only one <main> element, and it often includes an <h1> element as the main heading followed by various other content elements such as paragraphs (<p>), images (<img>), lists (<ul> and <ol>), tables (<table>), and more, depending on the specific content of the page. This helps in organizing the page's structure and enhances its accessibility and search engine optimization (SEO).

Like
Sanish Manandhar

I post about programming concepts and personal finance | Software Engineer
Report contribution
<main> is like the heart of your web page. It holds the most essential content, making it easier for screen readers and search engines to understand what's important. It's where your core message resides.

Like
Hayk Asatryan

UWC Dilijan ‘27
Report contribution
😊 The main element in HTML is the sturdy foundation of your webpage, akin to a building's base. 🏗️ It houses the core content, acting as the focal point guiding visitors through your web story. 📖 Just like a captivating headline in a newspaper, the <main> tag encapsulates the essence of your content, including the main heading (<h1>) and supporting elements like paragraphs, images, lists, and tables. 🖼️ It's the vibrant storyteller of your webpage, where your message comes to life, engaging and enchanting your audience! ✨

Like
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Report contribution
The <main> element in HTML is used to define the main content area of a web page. It should contain the primary content of the page, excluding any header, footer, or navigation elements. The <main> element helps to structure the content of a webpage in a semantic and accessible way, making it easier for both users and search engines to understand the focal point of the page. By appropriately utilizing the <main> element, developers can enhance the organization and clarity of their web content, improving the overall user experience.

Like
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Report contribution
the <main> element is used to identify the most important content on a web page. It should contain all of the content that is essential to the user's understanding of the page. Here is a short example of how to use the <main> element: <!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <header> <h1>My Website</h1> </header> <main> <h2>This is the main content of my page.</h2> </main> <footer> <p>Copyright 2023 My Website</p> </footer> </body> </html>

Like

Load more contributions

3 Article element

The article element is a semantic element that represents a self-contained piece of content that can be independently distributed or syndicated, such as a blog post, a news article, a comment, or a forum post. The article element can contain other elements, such as <header>, <footer>, <section>, <h1>, <h2>, etc. The article element can also be nested inside other elements, such as <main>, <section>, or another <article>. The article element helps users and search engines distinguish between different types of content on the web page.

Add your perspective

Hayk Asatryan

UWC Dilijan ‘27
Report contribution
Headings (<h1> to <h6>): 📚 Headings define content hierarchy. <h1> is the main title, <h2> to <h6> are subheadings. <section>: 📑 Divides content into topics, like chapters in a book. <article>: 📰 Represents a standalone piece, akin to an article in a magazine. <header> and <footer>: 🏷️ <header> contains intro content or navigation, <footer> holds contact info or links. <nav>: 🌐 Contains navigation links, similar to a book's table of contents. <div>: 📦 A versatile container for grouping and styling elements in a layout.

Like
Thomas Theunen

Helping developers master SFCC. Head of Commerce at FORWARD, reporting via the Rhino Inquisitor + Golden Hoodie Recipient + MVP & Speaker at Salesforce Events
Report contribution
It can also be nested inside other HTML elements, such as <main>, <section>, or another <article>. This allows developers to create a logical and meaningful structure for their content that is easy to read and understand.

Like
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Report contribution
The <article> is a semantic element used to wrap self-contained pieces of content, such as blog posts, news articles, or product descriptions. It helps browsers and search engines understand the structure of your web page and display the content correctly. Exemple : <article> <h2>This is a blog post</h2> <p>This is the body of the blog post.</p> </article>

Like
Rodrigo M.

Pós em Gestão de Projetos | Analista de Sistemas | QA | PJ | IA
Report contribution
O <article> é o elemento do artigo e dentro dele são utilizados outros elementos: <header>: Para cabeçalhos específicos do artigo. <section>: Para dividir o artigo em seções lógicas. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Para títulos e subtítulos. <figure>: Para incorporar imagens ou outros conteúdos multimídia. <figcaption>: Para fornecer uma legenda para o conteúdo de uma <figure>. <blockquote>: Para citações. <cite>: Para citar a origem ou autoria de um trabalho. <p>: Para parágrafos de texto. <footer>: Para rodapés específicos do artigo.

Translated

Like
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Report contribution
The <article> element in HTML is utilized to define an independent, self-contained piece of content within a web page. It represents a standalone unit, such as a blog post, news article, forum post, or comment. The <article> element helps to semantically structure the content, making it easier for both users and search engines to identify and understand distinct pieces of information. By enclosing related content within <article> tags, developers can enhance the organization and clarity of their web pages, improving accessibility, SEO, and overall user experience.

Like

Load more contributions

4 Section element

The section element is a semantic element that represents a thematic grouping of content, such as a chapter, a topic, a feature, or a subsection. The section element can contain other elements, such as <header>, <footer>, <h1>, <h2>, etc. The section element can also be nested inside other elements, such as <main>, <article>, or another <section>. The section element helps users and search engines organize and navigate the content on the web page.

Add your perspective

Utkarsh Anand

Enterprise grade AI voice agents for every customer conversation | Oration.AI - Founding Engineer | ConvoForm.com - Open source Maintainer
Report contribution
Emphasizing semantic HTML elements like <header>, <nav>, <main>, <aside>, and <footer> is crucial for web page structure. Avoid overusing <div> tags for layout. Use ARIA roles for accessibility. Be mindful of nesting <section> elements to maintain simplicity. Prioritize clean, user-friendly code.

Like
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Report contribution
The <section> is a semantic used to wrap related groups of content on a web page. It helps browsers and search engines understand the structure of your page and display the content correctly. Exemple : <section> <h2>This is a section of my web page</h2> <p>This is the content of the section.</p> </section>

Like
Rodrigo M.

Pós em Gestão de Projetos | Analista de Sistemas | QA | PJ | IA
(edited)
Report contribution
Os elementos de seção são utilizados para organizar e estruturar o conteúdo dentro do html, segue abaixo alguns exemplos e suas descrições: <header>: Cabeçalho da página ou de uma seção. <nav>: Uma seção de navegação. <aside>: Representa conteúdo que está tangencialmente relacionado ao conteúdo da página, é o conteúdo que está na barrada lateral do site. <main>: Define o conteúdo principal da página, recomenda ser usado uma vez por página. <section>: Agrupa conteúdo relacionado dentro de uma página. <article>: Conteúdo independente e autocontido que pode ser distribuído e reutilizado independentemente. <footer>: Rodapé da página ou de uma seção.

Translated

Like

5 Aside element

The aside element is a semantic element that represents a portion of content that is tangentially related to the main content of the web page, such as a sidebar, a widget, an advertisement, or a note. The aside element can contain other elements, such as <header>, <footer>, <h1>, <h2>, etc. The aside element can also be nested inside other elements, such as <main>, <article>, or <section>. The aside element helps users and search engines differentiate between the main content and the supplementary content on the web page.

Add your perspective

Manish Methani

Founder @codzify - Learn to Build Real Apps 10X Faster with FlutterFlow at Codzify
Report contribution
To understand the <aside> element, consider a news website. The main content of an article might include the headline, the article text, and images. However, there's additional information that's related but not central to the article itself. Inside the <aside> element for this news article, you could include these things: Related Articles: A list of links to other articles on the same topic or by the same author. Author Information: An author bio with a profile picture and social media links. Advertisements: Sidebar ads promoting products or services. Popular Tags: Tags or categories associated with the article, allowing readers to explore similar content. Recent Comments: A widget displaying recent user comments on the article.

Like
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Report contribution
The <aside> is a semantic element used to wrap related content that is not essential to the main content of a web page. This can include sidebars, comments, and other secondary content. Exemple : <main> <h2>This is the main content of my page.</h2> </main> <aside> <h3>Sidebar content</h3> </aside>

Like
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Report contribution
The <aside> element in HTML is used to present content that is related to the main content of the webpage but is not its primary focus. Typically displayed in a sidebar or alongside the main content, <aside> can include elements like supplementary information, related links, or advertisements. It helps organize content and provide additional context without distracting from the main narrative.

Like
sundaramoorthi J

Software Developer
Report contribution
The aside element in HTML is like a sidebar on a webpage. It holds stuff related but not crucial to the main content, like ads or notes. It can have its own headings and even go inside other sections. This helps users and search engines understand what's essential and what's extra on a page. For instance, on a blog, the aside might include links to related posts or advertisements.

Like
Sanaz Bashiri

Sr. E-Commerce Manager @ KoRo | Data-Driven Growth & UX Optimization
Report contribution
- Using semantic HTML elements has several benefits. Firstly, it improves the user experience (UX) by making it easier for assistive technologies like screen readers to understand the webpage's structure, thus aiding navigation for users with disabilities. - This practice can enhance accessibility (a11y). - It can boost search engine optimization (SEO) by allowing search engines to effectively crawl and index your content, potentially resulting in higher search rankings. - Semantic HTML provides better code interpretation for the browser, making it easier to maintain and update your website in the long run.

Like

6 Footer element

The footer element is a semantic element that represents the bottom part of the web page, which usually contains information such as the copyright, the contact details, the social media links, or the site map. The footer element can contain other elements, such as <header>, <nav>, <h1>, <h2>, etc. The footer element can also be nested inside other elements, such as <main>, <article>, or <section>. The footer element helps users and search engines access and identify the additional information on the web page.

Add your perspective

Hayk Asatryan

UWC Dilijan ‘27
Report contribution
The footer element in HTML is like a webpage's signature. 🖋️ It's the bottom part, akin to a book's final chapter, offering closure and extra details. 📚 In this space, you'll find important information like copyrights, contact details, and social media links. It's the website's way of saying goodbye, providing a warm handshake and inviting further exploration! 👋✨

Like
Aayush Khandelwal

Full Stack JavaScript | React | Next.js | Node.js | REST APIs | Freelancer | Passionate about building user experiences for Web
Report contribution
The <footer> element in HTML marks the footer section of a webpage. It typically contains information like copyright notices, contact details, and links to related pages.

Like

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Add your perspective

William Almond
Report contribution
Let us not forget to consider ADA accommodation. It "is best practice to include a "skip to main section" hyperlink at the top of the body tag, like: <a href="#main" class="skip-to-main-content-link">Skip to main content</a> This can be made invisible with CSS but still be able to tab into it on page load.

Like
Er Piyush Gupta 🇮🇳⊞⌘

| Senior Web Developer and Digital Marketing Manager @ We Care Services / Podcaster / Digital Creator |
Report contribution
<!DOCTYPE html> <html> <head> <title>My Webpage</title> </head> <body> <main> <h1>This is the main content of my webpage.</h1> <p>This is a paragraph of text in the main content section.</p> </main> </body> </html>

Like
Dinesh Kumar R

Cloud Solution Provider | Shipping | Logistics | Transportation | Hospital Information System | Freight Forwarding Software | NVOCC Software | Container Trading & Leasing Software | Depot Management Solution | CRM & more
Report contribution
In HTML, you define the main sections of a web page using structural elements. The key elements include: 1. `<header>`: Typically contains the website's logo, navigation menu, and introductory content. 2. `<main>`: Houses the primary content of the webpage, excluding header, footer, and sidebars. 3. `<section>`: Groups related content within an `<article>`. Use this element to divide content logically. 4. `<footer>`: Typically includes copyright information, contact details, and other content at the bottom of the page. These structural elements help browsers and assistive technologies understand the page's hierarchy, enhancing accessibility and SEO.

Like
Jeff Claybrook

Product Manager at Silver Bow Technology Group
Report contribution
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> <main> <section> <h2>Section A</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </section> <section> <h2>Section B</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </section> </main> <footer> <p>© 2024</p> </footer> </body> </html>

Like
Milan Polomac

Senior Frontend Engineer at Funnelish
Report contribution
Envision end result as an image and try to split it up by importance of the message you are trying to pass to the audience. If you prioritize correctly content will fall into related section nicely as a peace of the puzzle. Always have the interest of your audience in mind!

Like

How do you define the main sections of a web page using HTML?

1

2

3

4

5

6

7

1 Semantic elements

2 Main element

3 Article element

4 Section element

5 Aside element

6 Footer element

7 Here’s what else to consider

HTML

Rate this article

Thanks for your feedback

More articles on HTML

More relevant reading