Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now.
HTML 5 in 5 seconds
It’s über easy to get your markup to validate as HTML 5 — just change your DOCTYPE
from whatever it is now to this:
<!DOCTYPE html>
That's it! It doesn't require anything more than that.
Google are doing it already. Check out their homepage, written all in one line:
<!doctype html><head><title>HTML 5 - Google Search</title><script>...
Ironically, Google's search and results pages don't validate because of their use of invalid tags like <font>
and a number of other errors, but that's okay. They can still take advantage of the HTML 5 parsing rules (e.g., no type
attribute on the <script>
element) by using the correct DOCTYPE
.
HTML 5 minified
If you like to knock out quick prototypes or experiments that don't require much styling, you might be interested in a miniature document in HTML 5:
<!DOCTYPE html>
<title>Small HTML 5</title>
<p>Hello world</p>
That's completely valid HTML 5 too.
(Interestingly, there was some disagreement about this pattern's validity when I removed the <title>
tag. says it's fine, and so does the W3C validator as long as the markup is entered manually. But Henri Sivonen's validator says it's invalid without the <title>
tag. The W3C validator also says it's invalid when you give it a url. Hopefully, this will get sorted out soon.)
HTML 5 complete & compatible
This final, more complete boilerplate also indicates the character set. Without it, some characters will not render properly (and I've spent too much time in the past trying to work out why!).
We're also including the HTML 5 shiv so that we can style elements in IE. Note that you must include this script in the <head>
element.
Finally, we're adding a few CSS rules to cause the new block-level elements to render as such, since some browsers don't know about them natively.
So here it is — a valid and complete HTML 5 document boilerplate:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
If you want to experiment with HTML 5, the default JS Bin template is an HTML5 boilerplate for you to play with too.
lt;body
129 Responses on the article “HTML5 Boilerplates”
[…] un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js […]
Thanks, this hopefully this should lead people away from (incorrectly) using XHTML.
Perhaps you should also mention that HTML5 doesn’t mind if you close your tags in XHTML fashion (like ).
I am going to be teaching my partner HTML and CSS, this certainly makes things simpler!
Some corrections:
“The way to get the browser to switch to HTML 5…”
The browser doesn’t switch to some kind of new HTML5 mode when seeing the doctype. There isn’t a new HTML5 mode, there’s still only quirks mode, almost standards mode, and standards mode. The doctype specified in HTML5 triggers standards mode, but so does the HTML 4.01 doctype etc.
The Live DOM Viewer isn’t a validator, it’s a development tool. Keep in mind that browsers build a DOM from valid and invalid documents alike–the DOM Viewer lets you see that DOM for any input bytes.
[…] HTML 5 Boilerplates | HTML5 Doctor lt CSS styles to trig […]
Thanks! I didn’t even think about adding the CSS styles. Any idea why they have to be added to the document header and not the CSS file?
@Adam
You don’t have to add the CSS styles to the head. Just add them to your CSS.
[…] HTML 5 Boilerplates | HTML5 Doctor A more complete boilerplate would be to include the meta character set, otherwise some characters aren’t going to render properly (and in the past I’ve spent too much time trying to work out why!). (tags: html5doctor.com 2009 mes6 dia17 HTML5 blog_post) […]
[…] The rest is here: HTML 5 Boilerplates | HTML5 Doctor […]
Hey, thanks for the boilerplate template. I’ve been looking for something like this!
Why is everyone putting DOCTYPE in uppercase when it’s not needed?
Keep it simple.
DOCTYPE in uppercase is also distracting. It calls out for our attention, away from other HTML code we are editing — that’s totally unnecessary.
“HTML 5 minified” example can be even more simpler, you can omit tag.
… omit [/p] tag
@Adam,
Placing the style rules in the head ensures that they are applied every time the page is viewed. Otherwise, should the accompanying CSS file not get loaded for any reason then the browser would not render the new elements correctly.
[…] HTML 5 Boilerplates | HTML5 Doctor […]
@Edward thanks for the corrections. I’m updating the blog post as you’re right on Hixie’s viewer – I initially thought this was parsing, but it’s actually reading the contents of how an iframe built the DOM tree – which explains why it’s handled differently.
Re: switching – of course you’re right. There’s no mode to switch in to, I think it’s more the way of thinking about the way we’re writing our code. I’ve updated the post to read “validate as HTML 5” which is what I was aiming for ;-)
@Juraj – you could strip the trailing p tag, but preference is to use “well formed” markup. Just because it’s reduced, doesn’t mean it needs to look like the bad old days of HTML 4 :-)
@Adam – as Shaun said, you can include these styles in your external files, it doesn’t particularly have to be inline. Check out the source code to HTML 5 Doctor, we include the HTML 5 styles in the reset styles that we use.
[…] den Umbau eines Blogs in Angriff zu nehmen. Für den extra leichten Umstieg hält der Doktor eine HTML 5 Vorlage bereit, die in wenigen Sekunden einsetzbar ist. Die notwendigen JavaScript- und CSS-Kunstgriffe, um […]
Save for the audio + video + canvas tags, I have never felt much enthusiasm for HTML5. Well, some other aspects are cool, but the “minified” document example certainly doesn’t help. Oh lord. If markup is supposed to authored by monkeys, I propose that we also spec out a version of Javascript with optional use of quotes, brackets and curly brackets. Creating a website should be no harder than driving a car into a wall. I am sure we will all benefit from this.
@Wired Earp – just to repeat myself, the minified example I gave was for those developers who want to create “quick prototypes or experiments”.
Here’s an example (by Simon Willison): http://json-time.appspot.com/
Check the source, are you suggesting that he should have included all the markup to make it more…well more “less available to monkies” (I guess)?
I for one welcome the strict parsing definitions in the HTML 5 spec. I means I don’t have to repetitively include long doctypes that I never remember (and I’ve seen developer incorrectly copy from other documents), it mean I don’t have include the
type
attribute on thescript
element (yay, because it defaults!).Oh, and nice side benefit: less bandwidth is taken up (which is important for any large web site obviously).
@Remy – I realize that you must be repeating yourself a lot in this discussion, but for me, this comment was a first on the subject – and I’ve been subscribed to the WHATWG mailing list since day one, so there’s been time to build up steam.
By making the page available to monkeys, the author has made it unavailable to me. In a minified document, can I rely on the notion of document.body in any Javascript I might add to the page? Can I address document.documentElement anywhere? Can I dynamically load scripts into the head section of the page? Can I read the innerHTML of some element to analyze the structure of the document? HTML5 parser implementations may implicitly expose these objects to me (I hope), but the claimed simplification of markup has undoubtedly made Javascript more abstract and unattainable to, well, monkeys.
In CSS, I commonly prefix a declaration with “html body” to make it more specific, because I rely on these tags to be present in the document. I my XSLT, I often match the root HTML tag in my template, because I know that it is there. But now I can’t even trust the presence of a root tag, which is required for XSLT, even if my document is lucky enough to be well-formed in the first place. This one minute of time saved by the markup author adds days of confusion and bewilderment to my schedule. While HTML has been made simpler to the markup author – though easily the simplest development discipline to begin with – associated technologies have been made dependant, once again, on tag soup cleanup engines, crash test scenarios and conditional branching based on regular expressions.
I’m in the process of converting our company’s website to HTML5 in my spare time, so don’t get me wrong, I like major portions of the package. I just happen to believe that complex macro structures arise as an emergent feature of tight organization on the micro scale. I don’t believe that a bohemian HTML5 interpretation is similar-to-but-better than strict XHTML for the exactly the same reason that I don’t believe that an optional ordering of amino acids in my DNA chain will somehow not affect my personality. Looseness at the level of fundamental building blocks is a cause for the problems we face here, not the cure that everybody appear to expect.
I’ve been around long enough to know that the next phase in this race will be a collective migration towards well-formedness and tighter conventions, so I’m not really worried, just a little frustrated that the egg seems to have beaten the chicken in the short run. Thanks for running this awesome resource!
[…] HTML 5 Boilerplates | HTML5 Doctor […]
@Wired Earp
You found the great analogy between HTML5 and genetic code :). One of the fundamental features of the genetic code is redundancy: each amino acid (the basic structure for building proteins — may be compared to DOM elements in web page constructing) can be coded with several basic nucleotide sequences in the DNA, which may be compared to the markup syntax variations. Similar redundancy helps the HTML page (but not the XHTML in XML mode) produce steady DOM structure even in case of small “mutations” in the markup. I don’t think that it is ‘looseness at the fundamental level’ because the new rules of markup interpretation (described in HTML5 spec) have no ambiguity — exactly as the rules of genetic code :).
[…] Original post: HTML 5 Boilerplates | HTML5 Doctor […]
[…] HTML 5 Boilerplates – A quick guide to some boilerplates supported right now. […]
[…] HTML 5 Boilerplates – A quick guide to some boilerplates supported right now. […]
[…] HTML 5 Boilerplates – 一些可用 HTML5 样板的快速指南。 […]
Is the meta tag for CSS, “content=’text/css'”, still required? W3C language for HTML 4 was that the meta tag “should” be included.
[…] HTML 5 Boilerplates – A quick guide to some boilerplates supported right now. […]
[…] HTML 5 Boilerplates | HTML5 Doctor (tags: html5 webdesign) […]
[…] HTML 5 Boilerplates | HTML5 Doctor (tags: html5 webdesign) […]
[…] boilerplates and styling for HTML 5 so to give you all a helping hand and continue on from those basic building blocks that Remy talked about last week I’ve created a HTML 5 reset stylesheet for you to take away and […]
[…] HTML 5 Boilerplates – Guía rápida sobre boilerplates. […]
@remy changes needed here too :)
d’oh! foiled by the mysteries of what code is permitted in comments again! ;-(
[…] use the HTML5 DOCTYPE and be ahead of the game HTML5 Boilerplates | HTML5 Doctor __________________ Professional, accessible, and search engine friendly web site development by […]
[…] un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js […]
[…] HTML 5 Boilerplates – 一些可用 HTML5 样板的快速指南。 […]
[…] HTML 5 Boilerplates – 一些可用 HTML5 样板的快速指南。 […]
FWIW although W3 says at http://dev.w3.org/html5/html4-differences/ that
< meta charset="UTF-8" >
will suffice, the validator still yields a warning if the long “http-equiv” form meta record is not used.
There’s no template at the json link to download . . .
The
TITLE
element has recently been made optional in some special cases, e.g. when HTML is used as an e-mail authoring format. In all other cases (including your example), aTITLE
element is required.[…] HTML5 Boilerplates Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now. […]
关注中 路过 看看 欣赏 一下你的内容
[…] HTML5 Boilerplates – HTML5 Doctor […]
[…] 修改文档申明; html<!DOCTYPE html> […]
[…] HTML 5 Boilerplates – A quick guide to some boilerplates supported right now. […]
[…] HTML5 boilerplates […]
[…] and Internet Explorer》,《Cascading Style Sheet Compatibility in Internet Explorer 7》,《HTML5 Boilerplates》,《Eric Meyer’s CSS reset》,《YUI reset css》 CSSCSS← delegate事件 Leave a […]
[…] HTML 5 Boilerplates – A quick guide to some boilerplates supported right now. […]
[…] Change your doctype […]
[…] HTML 5 Boilerplates – 一些可用 HTML5 样板的快速指南。 […]
I updated the article by removing
<dialog>
, and adding<details>
and<figcaption>
.@jody
content='text/css'
is not allowed:(emphasis… umm emboldening added ;-)
@fjpoblam — W3C Validator bug has been fixed (see HTML5 charset declarations & validation for more info)
@Lola LB — copy and paste from the right hand side of JSBin
[…] HTML5 Boilerplates […]
[…] HTML5 Boilerplates […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] 23、HTML5 Boilerplates(HTML 5模板) […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] 5 结构标签)HTML5 有许多标签帮助网页结构化,这能省去以网页中许多div HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 HTML 5 canvas – the basics(HTML 5 […]
[…] 5 结构标签)HTML5 有许多标签帮助网页结构化,这能省去以网页中许多divHTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件HTML 5 canvas – the basics(HTML 5 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板) […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板) 此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] 5 结构标签)HTML5 有许多标签帮助网页结构化,这能省去以网页中许多div HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 HTML 5 canvas – the […]
[…] artigo foi retirado do site HTML 5 doctor e este disponível neste link em […]
I see that “http-equiv=”Content-Type” content=”text/html” are no longer required/recommended with html5 but I also see a lot of html5 sites(eg. google) still including it. I presume because 1) it doesn’t hurt anything , and 2) it helps older browsers. Should I enforce the leaner html5 header by omitting this, for stylistic reasons, and to save a few bytes, or include to get along in the bigger world?
看了感觉还是不错。。能学到一些东西额。。谢谢。。
Seeing as IE9 won’t need the HTML5 shiv anymore, it would probably be a good idea to replace
<!--[if IE]>
with<!--[if lte IE 8]>
.[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML 5 Boilerplates – 一些可用 HTML5 样板的快速指南。 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
Thanks!
This is exactly what I was looking for… you have no idea how long it took to find this, because I didn’t know how to explain “boilerplate” to Google!
[…] Reference for HTML5 boilerplate templates. […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] Change your doctype […]
[…] HTML5 Boilerplates(HTML 5樣板) […]
[…] HTML5 Boilerplates – HTML5 Doctor […]
Ресторан выездного обслуживания “Росбанкет” предлагает услуги – кейтеринг обслуживание в Москве на высоком уровне,организуем гала-ужин
[…] IE8 non vede i tag dell’html5… questo articolo (e il codice javascript) risolvono il problema. O_o RSS feed for comments on this post. TrackBack […]
Предлагаю Вашему вниманию Базу Досок Объявлений
Футболка Футурама – Бендер держит голову
Заказать вещи dropdeadhttp://www.vsemayk1.ru/doc/138/search/Kovrik-Garfild-Supermen
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5樣板)此文介紹了一些你能拿來就用的HTML5 樣板檔案 […]
direct line insurance company is allowing third party fire and theft insurer to drive another carhttp://www.box.net/shared/gtvdmdtm7f
direct line insurance company is allowing third party fire and theft insurer to drive another carhttp://www.box.net/shared/gtvdmdtm7f
direct line insurance company is allowing third party fire and theft insurer to drive another carhttp://www.box.net/shared/gtvdmdtm7f
[…] HTML 5 Boilerplates – A quick guide to some boilerplates supported right now. […]
Wholesale – Prison Break Wiki – Episodes, FOX TV Series
really liked what that you published actually. it really isn’t that simple to find great stuff to read (you know.. READ! and not just browsing through it like some zombie before going somewhere else), so cheers mate for really not wasting my time! :D
[…] 38. HTML5 Boilerplates […]
Продам кодграббер, код-граббер, автосканер, сканер автосигнализаций.
http://www.hackersrussia.org
Алгоритмический и мануфактурный кодграббер.
Кодграбберы от 200$.
Пишите carunlock[ собaка ]gmail.com
Ярославское ш., 85 км от МКАД, деревня Арханка Владимирская область.
Участок 15 соток для ИЖС.
Коммуникации: электричество, газ 2011 год (уже ведут).
40 000 рублей за сотку.
Тел: 8(903)124 40 17
[…] Style Guide How to Make a Generic Javascript Method Closure | chrisspenblog HTML 5 Tag Reference HTML5 Boilerplates | HTML5 Doctor html5 laboratory – writing a valid html5 document HTML5 Playground HTML5 Readiness HTML5 Rocks […]
Поступление новых моделей телефонов и гаджетов на сайте Viptelefon – vertu goldvish.
Регистрирующимся покупателям предоставляется скидка на весь товар магазина.
Ваш промо-код 777.
viptelefon.Su
[…] HTML5 Boilerplates […]
[…] HTML5 Boilerplates […]
[…] 43. HTML5 Boilerplates […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates […]
[…] HTML5 Boilerplates […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5Rethinking Forms In HTML5A Marriage Made In Heaven? HTML5 And CSS3Yes, You Can Use HTML5 TodayHTML5 BoilerplatesPreparing For HTML5 With Semantic Class NamesHTML5 : Nav Ambiguity ResolvedCoding A HTML 5 Layout […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 […]
[…] 5 结构标签) HTML5 有许多标签帮助网页结构化,这能省去以网页中许多div HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件 HTML 5 canvas – the basics(HTML 5 […]
why do you use a closing tag for meta ? it’s a xhtml thing, isn’t it ?
so instead of
just use
[…] people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your […]
Definitely consider that which you said. Your favorite reason seemed to be at the web the simplest factor to take note of. I say to you, I definitely get irked whilst folks consider concerns that they just don’t understand about. You managed to hit the nail upon the top and also defined out the whole thing with no need side-effects , other folks could take a signal. Will likely be back to get more. Thanks
Продается гранит Нью Империал Ред (New Imperial Red), 300х600х20, 300х600х30, в наличии более 1200 м2 по специальной цене!
Изготовление изделий из гранита и мрамора.
8(495)649 4777
ametiststroy.ru
Продаем легальные порошки.
6rc, 6-rc, 3md, 3-md, miff, miffi, jwh, mpa, rti, 2c-i, mdai
Все продукты обсолютно легальны!
Контакты:
http://www.herbalopt.com
skype: herbalopt.com
icq : 697 829 143
Приглашаем девушек на эскорт работу в Лондоне. Обеспечиваем большой зарaботок, постоянную компанию успешных джентльменов, проживание.
http://www.queensdolls.com
tel: +447425302336
skype: qdoll
Is the boilerplate code within “HTML 5 complete & compatible” still the best start point for new HTML5 builds?
… and to include the reset stylesheet here…
http://html5doctor.com/html-5-reset-stylesheet/
Thanks
[…] HTML5 Boilerplates(HTML 5模板) 此文介绍了一些你能拿来就用的HTML5 模板文件 […]
Thanks for sharing the boilerplate! I’m ‘collecting’ many tips, bits and pieces about HTML5. Is it safe to use HTML5’s new elements now? Have all browsers supported HTML5?
hiya where’s my post from last night?
Thank your for this article! I’m a web dev. new to html5 and I was recently wondering why some people write the script tag without any type attribute :) Thanks I learned a lot of new things :)
Everyone’s talking about different html5 frameworks, but how good are these frameworks when it comes to SEO?
@Andy,
Even though it’s almost four years later(!), I notice no one ever responded to you. As to why everyone is making “DOCTYPE” uppercase when it doesn’t have to be, I can only guess/assume because it’s “supposed” to be.
HTML is not case sensitive, so anything goes. However, if you use the XML serialization of HTML5, the XML parser will return an error. And if we ever return to XHTML, the practice of lowercase tags and an uppercase DOCTYPE will have you good to go.
Regardless, I’m curious why the one instance of an uppercase DOCTYPE at the beginning of the document is so distracting to you.
@solstice,
The “self-closing” tag syntax is optional, both > and /> validate. Some people prefer it the first way (and claim simplicity), others the second (and claim legibility).
@Andrew,
I’d say the best maintained and active starting point for new site builds is the HTML5 Boilerplate at http://html5boilerplate.com/.
@Sara,
The
type
attribute, if present, is supposed to specify the MIME type of the linked script file. If omitted, it defaults to JavaScript.Basically, if you omit it, it will always work for JS. If you specify it, you must provide a legal, browser-dependent MIME value.
This site is proving increasingly useful as I tentatively work out the best time to move over to HTML5 and that DOCTYPE is easy enough to remember!
So far I’m still using Transitional – it also allows
target="_blank"
to still be used.I’m not sure how HTML5 handles this, I guess it wouldn’t validate?
And is there any SEO impact either positive or negative in switching to HTML5?
Isn’t hgroup dead? I was just thinking that hgroup should be removed.
Even though hgroup is obsolete it is still used in some pages (like other obsolete elements such as <font>). So leaving in display for it is OK.
Join the discussion.