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">
<HTML>
<HEAD>
<TITLE>A small HTML</TITLE>
</HEAD>
<BODY>
<P>Small HTML file!</P>
</BODY>
</HTML>
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!
<!DOCTYPE html>
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:
<!DOCTYPE html>
<html>
<head></head>
<body>Smallest HTML file!</body>
</html>
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".
There is one more thing that I wish to highlight. I see so many HTML5 pages still showing this code while using JavaScript,
<SCRIPT type="text/javascript" src="....">
This can simply be
<script src="....">
There is no need to specify the type attribute. JavaScript is the default. And yes please use small case where possible. Easier on the eyes and the brain!
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.
ReplyDeletepax: 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.
Deleteright, I see that now - I sometimes need extra aid in reading black on white text :)
DeleteDon'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.
DeleteI 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%7Cbar
DeleteI 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.
DeleteWell, html5 is not xml, though it has an xml representation. It's not even SGML-compliant, in spite of how it looks.
DeleteNote that <title> is only optional in a few edge cases. This post explains it: http://mathiasbynens.be/notes/minimal-html
ReplyDeleteThanks for the comments Mathias, excellent set of posts on your website and at github.
ReplyDeleteFound 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!
ReplyDeleteBasically 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.
DeleteMike: see http://www.quirksmode.org/css/quirksmode.html
Deletealso http://hsivonen.iki.fi/doctype/
I would recommend keeping an opening html element, in order to specify a 'lang' attribute.
ReplyDeleteThere isn't any minimum requirement for an HTML file. Create a file with "Hello World", save it as .HTML it gets opened in a browser
ReplyDeleteIs 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-doctype
DeleteAn employee at Opera once said to me:
ReplyDelete"For javascript omit the type='text/javascript' tags because what else is it going to be? And for stylesheets omit the type='text/css' because, again, what else is it going to be?"
nice quote
DeleteGreat post, saw it some where in a video and could not remember what the minimum structure required was.
ReplyDelete