Semantic markup structures a web page with HTML elements that communicate the role and hierarchy of its content. Choosing <header>, <article>, <section>, and appropriate heading elements instead of using <div> everywhere makes the interface clearer to assistive technology and to developers maintaining the code. section 12.1.1
Use meaning in the markup before adding visual styling:
- Use semantic elements when a region has a recognizable role, such as a header, article, or section. section 12.1.1
- Apply heading tags that reflect the content hierarchy so assistive technology can interpret the page in a manageable way. section 12.1.1
- Distinguish visual emphasis from meaning: use <b> for attention, <strong> when content is more important, and CSS when weight is purely aesthetic. section 8.1.3
- Prefer HTML and CSS for the basic experience, then progressively enhance it with JavaScript rather than making essential content depend on scripts. section 12.3
A more usable page structure
A layout whose boxes are all marked <div> may look correct visually, but replacing those boxes with <header>, <article>, and <section>, alongside meaningful headings, gives assistive technology a clearer structure. The same principle applies to text: <strong> signals importance, while CSS font-weight can create bold styling without adding meaning. section 8.1.3 section 12.1.1
