HTML Course 17.1 W3C standards and HTML specifications

17.1 W3C Standards and HTML Specifications

The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Its mission is to develop protocols and guidelines that ensure long-term growth of the Web. HTML specifications are defined and maintained through a formal process, producing recommendations that browser vendors and web developers follow to ensure interoperability and accessibility.

1. W3C Standardization Process

• Working Draft (WD):
  First public version for review and experimentation.
• Candidate Recommendation (CR):
  Feature-complete; seeking wide implementation experience.
• Proposed Recommendation (PR):
  After addressing implementation feedback.
• W3C Recommendation (REC):
  Final, endorsed standard.

Specification Status Table

2. Evolution of HTML

• HTML 4.01 (1999) – DTD-based, strict/loose/transitional.
• XHTML 1.0 – XML serialization of HTML 4.01.
• HTML5 – Focus on semantics, multimedia, APIs; simple doctype.
• HTML Living Standard – Maintained by WHATWG; continuously updated.

3. Key Features of HTML5 Specification

• Semantic Elements:
  <header>, <footer>, <main>, <article>, <section>, <nav>.
• New APIs:
  Canvas, Web Storage, Web Workers, Geolocation, etc.
• Media Elements:
  <video>, <audio>, improved <iframe> attributes.
• Forms:
  New input types (email, date, range), pattern attribute.
• Global Attributes:
  id, class, hidden, data-*, role (ARIA).

4. Conformance and Validation

Following W3C specifications ensures that your HTML documents are
interoperable across browsers and assistive technologies. Use the
W3C Markup Validation Service to
check your pages.

Minimal HTML5 Template Example

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Sample Document</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
  </head>
  <body>
    <header> 
      <h1>Site Title</h1>  <!-- Main heading -->
    </header>
    <nav>
      <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>Introduction</h2>
        <p>This is an example page following HTML5 spec.</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2024 Your Name</p>
    </footer>
  </body>
</html>
  

5. Semantic Markup and ARIA

Semantic HTML improves accessibility and machine readability. For
complex widgets, ARIA roles and properties fill gaps:

Accordion Example with ARIA Roles

<div role='tablist'>
  <button role='tab' aria-selected='true' aria-controls='panel1' id='tab1'>Section 1</button>
  <button role='tab' aria-selected='false' aria-controls='panel2' id='tab2'>Section 2</button>

  <div role='tabpanel' id='panel1' aria-labelledby='tab1'>
    <p>Content for section 1.</p>
  </div>
  <div role='tabpanel' id='panel2' aria-labelledby='tab2' hidden>
    <p>Content for section 2.</p>
  </div>
</div>
  

6. Custom Data Attributes

HTML5 introduces data-* attributes allowing you to store
custom data on any element without invalidating the document:

<button 
  id='actionBtn' 
  data-user-id='42'      <!-- custom data attribute -->
  data-action='save'     <!-- can be read by JavaScript -->
>Save Profile</button>
  

7. Deprecated and Obsolete Features

Over time, some elements and attributes are dropped from the HTML
specification. For instance:

• <font> – use CSS color and font-family.
• <center> – use text-align in CSS or flexbox.
• Presentational attributes (e.g., bgcolor, border on <table>).

Summary

Adhering to W3C’s HTML specifications ensures your pages are
semantically correct, accessible, and future-proof. Regularly consult
the W3C and WHATWG living standards, validate your markup, and
embrace semantic elements over presentation tags.