Andrea Davanzo

Hamburger menu icon

Write a HTML article

Creating a web page that is eco-friendly, accessible, and optimized for search engines is essential for modern web development. Not only does this approach benefit users of all abilities by improving usability and readability, but it also supports sustainability efforts by reducing the page’s energy footprint and ensuring the content is discoverable by search engines. This article will guide you through the process of building an HTML page that balances these goals.

We'll focus on the <article> element, a semantic HTML5 tag ideal for structuring content like blog posts, news stories, or any standalone piece of information. By using the <article> tag along with meaningful sub-elements like <header>, <section>, and <footer>, we can enhance the page’s accessibility, support SEO, and even reduce environmental impact. With careful attention to proper syntax, minimal ARIA roles, and well-considered microdata, you'll learn how to create a clean, functional page that serves users, search engines, and the planet alike.

Here’s how you can approach it for the best accessibility and semantic structure:

  • Use <article> as the main container.
  • Inside <article>, use <section> for the main content body and <footer> for author information and date.
  • Use ARIA roles and properties minimally, relying on semantic HTML where possible, as it is more intuitive for screen readers.

Here’s a sample structure that accomplishes this: 


<article>
  <header>
    <h1 id="article-title">Write a HTML article</h1>
  </header>

  <section id="article-content">
    <p>Your article content goes here</p>
  </section>

  <footer id="article-footer">
    <p>Author: <span rel="author">Andrea Davanzo</span></p>
    <p>Date: <time datetime="2024-11-08">2024-11-08</time></p>
  </footer>
</article>

Key Points

  • <header> and <footer>: Using these within <article> gives context to assistive technologies about the structure.
  • <time> element: This helps mark up dates semantically and makes it machine-readable for assistive technologies.
  • rel="author" attribute has relevance in terms of microdata and SEO. It indicates the author of the content, which search engines may use to understand authorship relationships and boost the article's metadata.

Microdata or not

SEO gurus would argue that the author section should be: 

 <span itemscope itemtype="http://schema.org/Person" itemprop="author">Andrea Davanzo</span>

They believe that adding microdata wherever possible is beneficial because it enhances semantic clarity for search engines, helping them better interpret the content and context of the page. Embedding structured data, such as the use of itemscope, itemtype, and itemprop, can improve search engine visibility and potentially boost the page's ranking. However, in this case, the microdata information is redundant since the rel="author" attribute already provides semantic information.

Accessibility

To improve, and we have to, the code in terms of accessibility, we can add the aria-label attribute, which provides an accessible name for screen reader users. So our HTML code can now be written as: 

 <span rel="author" aria-label="Author Name">Andrea Davanzo</span>

If the text "Andrea Davanzo" is the same as what will be read by screen readers, then the aria-label might seem unnecessary. But there are scenarios where aria-label can be crucial:

  • If the visible text differs from what you want screen readers to announce
  • If you want to provide additional context or a more descriptive label
  • To ensure clarity for users relying on assistive technologies

A more accurate example might look like: 

 <span rel="author" aria-label="Article written by Andrea Davanzo">Andrea Davanzo</span>

To optimize this footer further with microdata while maintaining semantic and accessible HTML, you could consider wrapping the author's name in an anchor tag if it links to the author's profile page or bio. If there’s no link, then you can keep it as a <span> with rel="author" to give search engines that microdata hint, even though the semantic value is stronger with <a>.

Conclusion

The article demonstrates that creating an eco-friendly, accessible, and SEO-optimized webpage is achievable through careful HTML structuring. By utilizing the <article> element and its associated sub-elements, such as <header>, <section>, <footer>, and aria-label attributes, we can enhance the page's accessibility for users with disabilities, improve its discoverability by search engines, and reduce its environmental impact. The key to success lies in a balanced approach that prioritizes semantic HTML, appropriate use of ARIA attributes, and well-considered microdata. This ensures that the page is not only functional but also understandable by both users and machines. By following these guidelines, we can create web pages that are sustainable, inclusive, and effective.

Author:

Date: