Elevating SEO and Accessibility: The Vital Trio for Web Success

Mastering the Essentials: 3 Key Steps to Boost SEO and Accessibility

3 min readAug 28, 2023

Given the increasing prevalence of single-page applications (SPAs), there’s a growing tendency among developers to rely solely on <div> elements. However, it's important to emphasize that maintaining a focus on semantic elements and accessibility is crucial.

Here are three essential practices that we should adhere to in order to strike the right balance:

Use Semantic tags:

Semantic HTML elements provide meaning and structure to web content, making it more accessible and understandable for both humans and search engines. Here are examples of using and not using semantic HTML tags:

Bad Example:

<!DOCTYPE html>
<html>
<head>
  <title>Non-Semantic HTML Example</title>
</head>
<body>
  <div>
    <div>
      <h1>Welcome to Our Website</h1>
      <div>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  
  <div>
    <div>
      <h2>About Us</h2>
      <p>We are a company specializing in providing sustainable energy solutions.</p>
    </div>
  </div>
  
  <div>
    <p>&copy; 2023 Our Company. All rights reserved.</p>
  </div>
</body>
</html>

Good Way of doing the same things:

Use main tag

The <main> tag in HTML is a semantic element that represents the main content of a document. It's used to indicate the primary content of a web page or document, separating it from other supporting content like headers, footers, sidebars, and navigation menus. The <main> tag is beneficial for accessibility, SEO, and improving the overall structure and readability of your web pages.

Note that there should be only one main tag per page.

Importance of the <main> Tag:

Accessibility: Screen readers and assistive technologies use semantic elements like <main> to identify and announce the main content of a page to users with disabilities. This helps users navigate and understand the content more effectively.
SEO (Search Engine Optimization): Search engines use the <main> tag to determine the primary content of a page. Properly marking up the main content using this tag can improve search engine rankings and the visibility of your content in search results.
Structural Clarity: Using the <main> tag enhances the overall structure and organization of your HTML, making it easier for developers to understand and maintain the codebase.

Example:

<main>
    <article>
      <h2>About Us</h2>
      <p>We are a company specializing in providing sustainable energy solutions.</p>
    </article>
    <article>
      <h2>Our Services</h2>
      <p>We offer a range of services including solar panel installation and energy efficiency consulting.</p>
    </article>
  </main>

Use h1 tag in right way

The <h1> tag should be used sparingly and reserved for the main topic or primary section of a page.

Best Practices for Using the <h1> Tag:

Use only one <h1> tag per page to represent the main topic.
Follow a clear and consistent heading hierarchy (e.g., <h1> followed by <h2>, <h3>, etc.).
Don’t use <h1> for decorative elements or non-headings.
Don’t use <h1> to create larger text for design purposes; use CSS for styling.
Prioritize semantic meaning and accessibility over SEO manipulation.

Thanks for reading.