What is main and address element in HTML?

By using main and address elements properly, you add semantic meaning to your HTML, making it more understandable and accessible to both machines and users.

The <main> Element (The Main Element)

The <main> element is a semantic element in HTML5 denotes the main content of the <body> of a document or application. This content should be unique to the individual page and should not include elements that are repeated across the site, such as headers, footers, and navigation.

uses of the <main> element

Purpose: To define the primary content of a webpage. This helps browsers, assistive technologies (like screen readers), and search engines understand the structure and purpose of the page. Some browsers use it for features like “reader mode”.
Uniqueness: A document must not have more than one <main> element.
Placement: The <main> element must not be a child of an <article>, <aside>, <footer>, <header>, or <nav> element. It appears directly within the <body> element, outside of the header and footer.
ARIA Role: The <main> element has a default ARIA role of main. It is advised to clearly add role=”main” to other elements used as main content for better support in older browsers or non-HTML5 user agents.
Grouping Element: The HTML5 specification recognizes <main> as a grouping element, not a sectioning element.

Code Examples

Basic usage of <main>

The <main> element clearly encloses the unique content of the blog post, while the header (containing navigation) and the footer are placed outside it.

<body>
  <header>
    <nav>...</nav>
  </header>
  <main role="main">
    <p>Individual Blog Post</p>
    <p>An introduction for the post.</p>
    <article>
      <p>References</p>
      <p>...</p>
    </article>
    <article>
      <p>Comments</p>
      <p>...</p>
    </article>
  </main>
  <footer>...</footer>
</body>

Individual Blog Post

An introduction for the post.

References

…

Comments

…

Using <main> with a section

A <section> element is used with the role=”main” attribute to define the main content area. While <main> is the preferred element, using role=”main” on another element can provide similar semantic meaning, especially for older browsers. However, it’s generally recommended to use the <main> element itself.

<body>
  <header>
    <h3>Example</h3>
  </header>
  <section role="main">
    <article>
      <p>Welcome to the Homepage</p>
      <p>This is the main content of the homepage.</p>
    </article>
  </section>
  <footer>
    <p>&copy; 2023 My Website</p>
  </footer>

Example

Welcome to the Homepage

This is the main content of the homepage.

The <address> Element

The <address> element is used to denote contact information for a document or an <article> element.

uses of the <address> element

Purpose: To semantically markup contact details. This could include email addresses, postal addresses, phone numbers, or links to a contact page.
Placement: The element can be used in two main contexts:
- As a child of the <body> element (and with no <article> element in between), it is assumed to provide contact information for the entire document.
- As a child of an <article> element, it is assumed to provide contact information specifically for that article.
Restrictions: The <address> element must not be used to denote addresses that are not contact information for a document or article, such as customer addresses.
Default Styling: Browsers extract the content of the <address> element in italics by default. This can be overridden with CSS.
Flow Content: The <address> element is considered flow content.
Descendant Restrictions: The <address> element can contain flow content, but cannot have <h1>–<h6>, <section>, <header>, <footer>, <nav>, <article>, or <aside> elements as children.

Examples

Contact information for the entire document

In this example, the <address> element within the <footer> provides general contact information for the website.

<body>
  <header>
    <h3>Example:Welcome to My Website</h3>
    <nav>...</nav>
  </header>

  <article>
    <p>This is the main content of the homepage...</p>
  </article>

  <footer>
    <p>&copy; 2023 My Website</p>
    <address>
      Questions? Contact <a href="mailto:info@example.com">info@example.com</a><br>
      Or visit us at:<br>
      123 Main Street<br>
      Anytown, USA
    </address>
  </footer>
</body>

Example:Welcome to My Website

This is the main content of the homepage…

Contact information for a specific article

Here, the <address> element within the <article>’s <header> provides contact information specifically for the author of that particular blog post.

<body>
  <header>
    <h3>example:My Blog</h1>
    <nav>...</nav>
  </header>

  <article>
    <header>
      <p>Interesting Post Title</p>
      <p>Published on January 1, 2023</p>
      <address>
        By <a href="mailto:author@example.com">John Doe</a>
      </address>
    </header>
    <p>This is the content of the blog post...</p>
    <footer>
      <p>Comments are welcome!</p>
    </footer>
  </article>

  <footer>
    <p>&copy; 2023 My Blog</p>
    <p><a href="/contact">Contact Us</a></p>
  </footer>
</body>

example:My Blog

Interesting Post Title

Published on January 1, 2023

By John Doe

This is the content of the blog post…

HTML5 Topics

Page Content

Posts