HTML documents start with a
<head> section where some useful things can be provided.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-GB"> <title>Use Your <Head></title> <link rel="stylesheet" type="text/css" media="screen" href="/screen.css"> <link rel="stylesheet" type="text/css" media="print" href="/print.css"> <link rel="shortcut icon" type="image/png" href="/favicon.png"> </html>
Document Type Declaration
Also known as a DOCTYPE, this selects the mode major web browser use for your page:
- Quirks Mode
- Includes mistakes and bugs which became common during the 20th century.
- Standards Compliance Mode
- More accurately follows W3C standards.
Standards Compliance Mode is easier to work with when doing CSS layout. It can be triggered with a complete and modern document type. This is called DOCTYPE Switching or DOCTYPE Sniffing.
For nearly all documents, this is the best choice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Primary Natural Language
The written language used by the document is set in the the
lang attribute using Tags for Identifying Languages. Translation programs, text-to-speech and spellchecking have an easier job when this attribute is set.
The value for
lang can be very complicated. But most of the time you’ll only need one or two pieces of data:
- Language Subtag
- Written language, such as English or French.
- Region Subtag
- Place, such as the United Kingdom or Canada.
To find codes for a specific language or region, use the IANA Language Subtag Registry.
HTML Language Examples
English as used in the United Kingdom:
Strictly speaking, the
-GB there is redundant. But pages commonly use
en by itself to mean English as used internationally:
French as used in Canada:
For more examples and discussion, see Language tags in HTML and XML.
Title for the Page
<title> element lets you supply some text to help users tell which page they are on. It is usually displayed at the top of a web browser and at the top of each result in search engine result pages.
HTML Page Title Example
<title>Use Your <Head></title>
You must replace
< because HTML is not allowed in
You can summarise a page by using the
<meta name="description">. This is sometimes displayed as the sample text in search engine results. Keep it short and relevant.
HTML Metadata Example
<meta name="description" content="Ben 'Cerbera' Millard works with web technologies. He used to make GTA mods.">
Use real HTTP headers instead of
<meta http-equiv="..."> tags.
Favourites Icon (
An icon helps users identify your pages in tabs, Favourites, Bookmarks or History. You create a suitable image and link it to each page using
<link rel="shortcut icon" type="image/png" href="/favicon.png">
If you use the Microsoft
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
A common size for these is 16 pixels wide by 16 pixels tall.
Styling with External CSS
Cascading Style Sheets (CSS) provide a way to manage the appearence of an entire website from a single
.css file. You link this to each page with a
<link rel="stylesheet" type="text/css" media="screen" href="/screen.css">
You can link to a printer-friendly stylesheet like this:
<link rel="stylesheet" type="text/css" media="print" href="/print.css">
- Use an HTML document type declaration.
- Set the main writing language your document uses.
- Provide a
<title>which uniquely identifies each web page.
- Provide a
shortcut iconto help identify your website.
- An external
.cssfile can be linked to each page with a