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:

Example <div> all the way down Semantic HTML
Blog Post

How to structure your document and generic site content using elements like <main>, <aside>, <nav>, and more.

/emojis/divified.html /emojis/semantic.html

How to structure forms and include interactive inputs with elements like <fieldset>, <legend>, <optgroup>, <output>, and lots of HTML5 <input> attributes.

/forms/divified.html /forms/semantic.html
Media and Figures

How to display interactive reference content with elements like <video>, <audio>, <track>, <figure>, and more.

/media/divified.html /media/semantic.html