Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple HTML5 Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<title>untitled</title>
<link rel="stylesheet" href="" />
</head>
<body>
<script src=""></script>
</body>
</html>
@chriscoyier

This comment has been minimized.

Copy link

@chriscoyier chriscoyier commented Dec 7, 2011

Pf. You call yourself a minimalist with those fancy-dancy closing slashes in there?

@nimbupani

This comment has been minimized.

Copy link

@nimbupani nimbupani commented Dec 7, 2011

also end tags for body and html :))

@nathansmith

This comment has been minimized.

Copy link
Owner Author

@nathansmith nathansmith commented Dec 7, 2011

Did I say "minimalist"? I should've just said "lazy". :)

In that, I'm too curmudgeonly to un-learn my old XHTML habits of self-closing slashes, </body>, and </html> tags.

@kevindougans

This comment has been minimized.

Copy link

@kevindougans kevindougans commented Dec 7, 2011

i've felt for years that the basic html template got too complicated for no apparent reason. i can understand why things had to be declared (i.e. xhtml) but there really wasn't a need for that to be a 150 char string. reminds me of when i first learned html in 96/97, when i thoroughly enjoyed it, yay! :)

@nathansmith

This comment has been minimized.

Copy link
Owner Author

@nathansmith nathansmith commented Dec 7, 2011

Agreed. Back to basics, FTW. :)

@biojazzard

This comment has been minimized.

Copy link

@biojazzard biojazzard commented Dec 7, 2011

Great!
I´ll only change one letter, so that fits for me:

lang="eS"

;-P

@adamstac

This comment has been minimized.

Copy link

@adamstac adamstac commented Dec 7, 2011

So lazy there aren't any indents either. Surprised you didn't post this in Haml.

@nathansmith

This comment has been minimized.

Copy link
Owner Author

@nathansmith nathansmith commented Dec 7, 2011

Yeah, if I'm writing HTML, I don't indent anything until the 2nd level of nestedness inside <body>, since every site has <html>, <head>, and <body>, I'm not usually visually scanning to find them. I tend to be focused on the "meat" of the page... the tags inside <body>.

@daveygm

This comment has been minimized.

Copy link

@daveygm daveygm commented Dec 14, 2011

I take this minus the self-closing slashes, then add in HTML5 Boilerplate as needed. Thanks!

@adamstac

This comment has been minimized.

Copy link

@adamstac adamstac commented Dec 14, 2011

I just use Serve w/ my bootstrap. Deploy's to Heroku in minutes too.

@nathansmith

This comment has been minimized.

Copy link
Owner Author

@nathansmith nathansmith commented Dec 14, 2011

@adamstac — Agreed. Serve is awesome.

But, it's overkill if I just want to have a valid HTML document to test something real quick. Chrome seems to not just like HTML snippets without at least an html tag around 'em.

For instance, a few days ago, I was verifying a Formalize (http://formalize.me) bug reported in WebKit, so I put this in my minimal HTML template, tested it on the desktop, and then deleted it...

<!--
  Other browsers only see size="2" and
  higher, so they treat this as a single
  select drop-down, but WebKit always
  responds to size="..." attribute.
-->

<select>
  <option>...</option>
  <option>...</option>
</select>

<select size="0">
  <option>...</option>
  <option>...</option>
</select>

<select size="1">
  <option>...</option>
  <option>...</option>
</select>

In instances like that, setting up Serve would've been more effort than it's worth. So, that's why I keep a handy flat-file template at arm's length.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment