Semantic HTML Examples
These demo pages show the exact same UI, but implemented with and without semantic HTML.
For each set, see if you can tell a difference when using:
- a desktop computer
- a mobile phone or tablet
- assistive technology, like a screen reader
- reader mode
- only a keyboard
- only a mouse
- without CSS
- without JavaScript
| Example | <div> all the way down |
Semantic HTML |
|---|---|---|
|
Blog Post
How to structure your document and generic site content using elements like |
/emojis/divified.html | /emojis/semantic.html |
|
Form
How to structure forms and include interactive inputs with elements like |
/forms/divified.html | /forms/semantic.html |
|
Media and Figures
How to display interactive reference content with elements like |
/media/divified.html | /media/semantic.html |