A document type, or doctype for short: <!DOCTYPE html>. This sits on the document's first line and basically tells a browser how to interpret the page's contents. It doesn't close, or self-close. It just is.
A <html> tag which holds everything together.
A <head> tag which contains additional information about the document and any files it needs to help display its content.
A <body> tag where all the exciting stuff goes – images, copy, slideshows, forms and the like.
<!DOCTYPE html>
<html dir="ltr" lang="en-GB">
<head> ... </head>
<body> ... </body>
</html>
A basic HTML page
What is an HTML tag?
A tag is essentially anything written inside a < and a >.
Some example tags: <body>; <div>; <h1>; <p>; <table>
The majority of tags open like this: <h1>; and close like this: </h1>. Note the forward slash that signifies the closing tag. Content between the tags will be displayed in the browser.
Open a tag
<p>
The order of an opening tag: less than symbol, name of tag, greater than symbol.
Close a tag
</p>
The order of a closing tag: less than symbol, a forward slash, name of tag, greater than symbol.
Anything between the tags of an element will be displayed in the browser. Self-closing tags will render their src attribute or form element type.
Self-closing tags
There are some tags that self-close. By this we mean they don't require a separate closing tag. The main culprit is the image tag, which, in its most basic form, should be written like this:
<img src="" />
A basic image tag.
Another self-closing tag is the input, used in forms:
<input type="text" />
An input tag used in forms.
Note: We wrap our content in tags so browsers can interpret it correctly and semantic meaning can be applied to it.
The logic of tags
Arranging them...
The rule of thumb is first out, last in. When you nest tags (putting elements inside others), you need to make sure the logic is correct, like so:
<p>Is helping to <strong>demonstrate</strong> tags.</p>
Tag logic that works
Unlike the next example, where the closing <p> tag is written before the closing <strong> tag.
<p>Is not helping to <strong>demonstrate tags.</p></strong>
Tag logic that doesn't work
This is incorrect because the closing strong tag (</strong>) appears after the closing p tag (</p>), instead of before it – breaking the first out, last in rule.
...and understanding their potential parts
As tags can have attributes applied, here's a chance to clarify what's what:
<p class="note">I have an attribute. It is called class. The attribute's value is called note.</p>
Anthropomorphising a tag.
The pink sections are the tag. The blue section highlights the tag's attribute and the green section is the attribute's value.
Here's another example with a different tag:
<img src="images/fruitbowl.jpg"alt="Bowl of fruit" />
A basic image tag with some extra attributes.
It's the same concept just using image tag specific attributes.
Working in the <head> of the HTML document
There are two types of tags to reference files and one type of tag to set document parameters.
The rel attribute specifies the relationship between the current and linked document.
The type attribute specifies the MIME type of the linked document.
The href attribute enables us to point to a particular document, in a particular location, generally relative to the current document.
The media attribute allows us to target specific devices. There a few options as to its possible value:
media="all" For when you want your presentation to be the same across all devices. On small sites, this setting is ideal.
media="print" Useful if your pages are heavy on graphics, but don't require them when printed. You could offer a simpler, black and white themed layout.
media="screen" Styles are applied on screen, on any device.
media="projection" Styles for browsers, like Opera, that have a full-screen/projection mode.
The type attribute specifies the MIME type of the linked document.
The src attribute enables us to point to a particular document, in a particular location, generally relative to the current document.
Meta data
We can give a document meta data to help with defining its parameters and for other things like SEO. Here are some basic <meta> tags that your document should always include:
<meta charset="utf-8" />
Character set.
This meta tag defines the character encoding of the document, which in turn helps to display certain characters, like pound signs or ampersands, correctly.
This meta tag is the document (or site's) description. You can write a brief summary of what your page (or site) is about. It will appear under your site's title on the result's pages of search engines.
The last meta tag is for robots – the crawlers that search engines use to seek out your site. Use noindex and nofollow when you don't want them to search your site. Replace with index and follow if you do want search engines to find and index your site and all its pages.
There is another
Don't forget the plucky <title> tag. This little baby goes just inside the <head> of your documents and should contain the name of that page within it. It is essentially the document's name and appears on browser title bars, browser history lists and on the results pages of search engines.