I've encountered this question repeatedly of late.
"What are the tags required at bare minimum for a html file?"
Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<TITLE>A small HTML</TITLE>
<P>Small HTML file!</P>
Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. This can be done by pressing CTRL+SHIFT+I in both the browsers. You will see the html code rendered by the browser now shown in the inspector. The code matches with the above code.
Now lets look at how things stand today. Welcome HTML5!
Smallest HTML file!
Type the above code in notepad and save it as new.html. Yes just two lines, actually the first line is recommended for HTML5, but for basic stuff even that is not necessary. You can even skip that line for this particular exercise. Now save and open the file in your browser. Voila, the text is there, now open the code inspector. You will see the missing tags have been automatically added by the browser. This is what the code inspector should show:
<body>Smallest HTML file!</body>
Great isn't it. Things have been vastly simplified and made easier for the developer. DOCTYPE's earlier used to cause allergic reactions in me. Now it requires just one word "html".
This can simply be
There are many more wonderful simplifications done in the HTML5 semantics. And there are entire chapters dedicated to this topic in various HTML5 books. But somehow, I keep encountering the above quite often off late and so the post.
I tried in Chrome / FF on OS X but the missing tags haven't been automatically added by the browser.ReplyDelete
pax: If you see the plain text in the browser, then the tags are added. You have to open the Code Inspector to see it, press CTRL+I in your browser to open it. In Chrome there is an Elements tab, you will see the full HTML there.Delete
right, I see that now - I sometimes need extra aid in reading black on white text :)Delete
Don't worry, I also misinterpreted. I expected the browser to save the file with the minimum tags added. Somehow this black and white text radiates confusion.Delete
I also omit quotes in attribute values wherever possible, e.g.ReplyDelete
< img id=myimg width=200 height=100 src=/img/1.png >
- makes the entire file so much nicer looking. I see some raised brows now, but it works, it's fine with me, and my visitors don't care.
See http://mathiasbynens.be/notes/unquoted-attribute-values for more information on when attribute values can remain unquoted. There’s a tool, too: http://mothereff.in/unquoted-attributes#foo%7CbarDelete
I love how people ignore xml standards and then wonder why there are so many broken pieces of crap software out there. Because of people doing things that 'look nice' in a document that is meant to be mechanically processed.Delete
Well, html5 is not xml, though it has an xml representation. It's not even SGML-compliant, in spite of how it looks.Delete
Note that <title> is only optional in a few edge cases. This post explains it: http://mathiasbynens.be/notes/minimal-htmlReplyDelete
Thanks for the comments Mathias, excellent set of posts on your website and at github.ReplyDelete
Found this quite informative: https://github.com/mathiasbynens/small
I take advantage of this behavior when throwing together a quick demo page. In that situation I don't bother with a doctype. I think a fair amount of developers think that if you don't have one you won't be able to use html5 stuff like the canvas tag in chrome for example, but that is not true. The only purpose it serves is to trigger standards vs quirks mode in old IE (maybe even still IE9?) and other browsers (old FF I think?). If anyone knows a list of browsers that it matters for, please chime in!ReplyDelete
Basically all of widely used browsers require the DOCTYPE (Chrome/Firefox/IE/Opera/Safari) to avoid switching to quirks mode. The only exception I can think of is Lynx.Delete
Mike: see http://www.quirksmode.org/css/quirksmode.htmlDelete
I would recommend keeping an opening html element, in order to specify a 'lang' attribute.ReplyDelete
There isn't any minimum requirement for an HTML file. Create a file with "Hello World", save it as .HTML it gets opened in a browserReplyDelete
Is the DOCTYPE required, this is what the spec says.. for legacy reasons -- yes. http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#the-doctypeDelete
An employee at Opera once said to me:ReplyDelete
Great post, saw it some where in a video and could not remember what the minimum structure required was.ReplyDelete