Here is the most basic HTML document we recommend starting with:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
</body>
</html>
Let’s take a look at it line-by-line:
Doctype
<!DOCTYPE html>
Although DoCtYpE is case insensitive, DOCTYPE should be all uppercase and html all lowercase for proper polyglot markup (can be served both as html and xml).
In depth
HTML
<html dir="ltr" lang="en-US">
Include the following attributes:
dir="ltr"
Even though left-to-right is the default text direction in the spec, best to be explicit.
lang="en-US"
It’s best to be specific about the language, for the following reasons:
Assists:
- search engines
- speech synthesizers
- spell checkers and grammar checkers
Helps a user agent:
- select glyph variants for high quality typography
- choose a set of quotation marks
- make decisions about hyphenation, ligatures, and spacing
In depth
- Jeremy Keith – The Design Of HTML5
- W3C – Language information and text direction
- W3C – Why use the language attribute?
- W3C – setting direction at the document level
Head
Filled in by browser (but might as well add it)
<head>
Character Encoding
Be sure your server is sending the correct Content-Type header, and specify the character set using a meta tag.
<meta charset="utf-8"/>
Note: This meta tag must occur within the first 1024 characters of the document. Otherwise, the browser will assign its own charset. Or if it finds the charset after already guessing, it will switch back requiring a repaint/reflow adding to load time.
In depth
- W3C – Declaring character encodings in HTML
- W3C – Setting the HTTP charset parameter
- Joel Spolsky – The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
Title
Required for valid HTML5 document
<title></title>
Body
Filled in by browser (but might as well add it)
<body>