Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

We fairly commonly see people include the entire HTML document in the Pens they create, and all. It makes sense. Some other online code editors like JS Bin do it this way. And the contents of the CSS and JS editors would be the entire contents of style.css and script.js files respectively, rather than just a portion.

On CodePen, since the beginning, we decided to not require all that boilerplate code and get straight down to the important code you’re trying to write. You need a

, just write that and you got it. All the HTML structure boilerplate stuff is injected automatically.

To help educate everyone about this, we trigger a warning now when you do use a DOCTYPE. It looks like this:


We aren’t trying to annoy, we’re trying to educate so next time you can work even faster.

If you have old Pens that use a DOCTYPE, you probably don’t need to rush out and fix them. The final page will(weirdly) have two DOCTYPEs and the result is an invalid document, but modern browsers are pretty smart at dealing with stuff like that and there is a good chance it handles it gracefully and you don’t even notice.

For your reference, the HTML structure that your demos render in is essentially like this:




  Title of Pen (from Info Panel)









It varies a little depending on what context what we are showing it in, and it is subject to change, but that’s essentially it.