Semantic HTML Playground

Compact demo using most HTML elements for structure and accessibility.

Introduction

HTML provides semantic elements that convey meaning to browsers and assistive tech.

Why semantics matter

Semantics improve accessibility, SEO, and maintainability.

Accessibility
Screen readers rely on landmarks.
SEO
Search engines prefer structured content.

Element examples

Text and code

Inline elements: highlight, const x = 1, Ctrl+ C, count, OK, deprecated, fine print. 

							
                function greet(name){
                  return `Hello ${name}`;
                }

Lists

  • Unordered item
  • Nested list
    1. First
    2. Second
    •

    Table

    Sample data
    Key Value
    Language HTML
    Version 5
    End of table

    Figures & media

    Placeholder banner
    Illustrative banner. See media.

    Forms & interactive controls

    Profile
    No action
    Advanced settings
    40% 60%

    This is a native dialog element.

    Interactive & legacy

    Star