Skip to content Accessibility

Flash your Semantic HTML

Temporarily removing CSS from a webpage to unveil its semantic HTML.



With CSS naked day 2021 imminent I wanted to quickly verify the semantic HTML of this website.

If the term "semantic HTML" is unfamiliar Bruce Lawson's practical value of semantic HTML describes it as:

A posh term for choosing the right HTML element for the content.

And if you haven't heard of CSS naked day – and feared Googling the term, or clicking the link – it involves removing all CSS to help promote web standards.

Of course, spinning up my site locally and commenting out/ removing the CSS by hand would suffice. However the idea of testing in production before CSS naked day arrived was rather enticing.

Show me the code #

Simply run the following function in your browser console to remove all external/ internal and inline CSS styles:

Programming language (abbreviated): js

function stripCSS() {
Remove external[1] and internal[2] CSS
1. .css files included with `<link rel="stylesheet`
2. `<style></style>` elements collocated in HTML document

Array.from(document.styleSheets).forEach((stylesheet) =>
stylesheet.disabled = true

Remove inline[1] CSS
1. `style` attribute applied to HTML elements

Array.from(document.querySelectorAll("*")).forEach((element) =>

At risk of stating the obvious, this function works on any website – so take it for a spin to see what lurks beneath!

About the author

I'm Callum, a Front-end Engineer at Nutmeg. Previously I wrote code for KAYAK, American Express, and Dell. Out of hours I publish blog posts (like this one) and tweet cherry-picks.

Feel free to follow or message me at @_callumhart on Twitter.