foundation

Semantic HTML

Document structure, landmarks, headings, lists, tables, and when semantic elements replace generic divs.

Semantic HTML interviews test whether you choose elements by meaning, not by default styling. Document structure, landmarks, headings, lists, and tables each communicate relationships to assistive technology and crawlers.

Subtopics: document skeleton and metadata, landmarks with heading hierarchy, and list versus table semantics for real data relationships.

On interviews: given a page wireframe, name the elements you would use and why a div would be weaker.

Common pitfalls: heading levels chosen for font size, tables for layout, and landmarks without unique labels.

Checklist:

  • Pick elements from content meaning.
  • Maintain one main and ordered headings.
  • Use tables only for tabular data.