Web design: learning HTML
Document structure
This is the basic structure of all HTML documents. Each part is explained below. You can write these files out yourself in a text editor like Notepad, save them on your hard drive (make sure the filename ends in .html) and then either double-click or drag them onto your web browser to view them as if they were on the web. There's more about files and the .html extension in the FAQ, but this should be enough for you to be able to write and test your own pages on your computer without having to own space on a web server.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">Web Design: Learning HTML
<head>
<title></title>Web Design: Learning HTML
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h1></h1>
<p>This is the main text of my website.</p>
</body>
</html>
What you see
All HTML documents are split into two main sections: the head, and the body. Before that is a special instruction to the web browser that describes the document type. Modern web browsers are capable of showing many different kinds of document, and even several kinds of HTML. As the standards evolved, some decisions about how to treat various parts of a document changed, and so the browser needs to know which set of rules to apply and what kind of code it can expect. When you read about validation later, you'll see that to check your document you also need to tell the validator which kind of HTML you are writing so that it can run the right kind of tests.
The sections marked in blue are tags. Tags are the HTML code that tells the browser how to treat the text inside them (which is shown in black here). Some tags can be modified, or given extra instructions with attributes, (shown in red here). Most attributes are optional, but some are required to give the tag meaning. For example, when you create a link to another page or another site, you need to add an attribute that tells the browser where to go.
Almost all tags in HTML 4 are paired. That is, you type an opening
tag — like <body> — in front of the section
of text, and then you put a closing tag —like </body>
— at the end, to mark up everything between those two tags. Think of
it as a highlight; it is similar to selecting a section of text in a word
processor and then applying a style to it (like making it bold, or changing
the size). In HTML you mark sections of text with tags to describe what kind
of text it is. For example:
<title>Web Design: Learning HTML</title>
In the example above, the text "Web Design: Learning HTML" is marked up as the document title. In most web browsers, the content of the title tag appears at the top of the browser window in the title-bar.
The header section
You can also see what the example code looks
like in your browser if you like. The web browser follows instructions
in the <head> section and displays everything in the
<body> section. Let's look at them more closely:
<html lang="en">Web Design: Learning HTML
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
The first tag wraps around the whole document and declares it to be HTML. It has one attribute here, lang, that tells the browser in which language the content is written. In fact, you can (and should) put the lang attribute on nearly any HTML tag if the language within is different from the rest of the document. Identifying the language of your document is useful for search-engines (because people can then search for content in their own language only), translation tools, and text-to-speech readers for the blind, because different languages have different rules for pronounciation and it's very hard for computers to quickly guess the language of a document.
The second tag, <head> creates a header section with instructions
to the browser, such as the document title stored in the <title>...</title>
tag. The tags inside the header section above are the bare minimum you can
get away with when designing a website; there are many more — including
script and navigation tags — that can enhance your site or make them
more accessible and many of these are explored in the
advanced techniques section. When you include a style-sheet later on,
the header section is where you tell the browser which sheet to load and use.
The other header tag that hasn't been described yet is the <meta>
tag. The meta tag has several functions in HTML: it can give instructions
to the browser that override the instructions that the web server gives by
default, and it's also used to define keywords for your document that can
help search engines catalogue your site correctly. The required use given
here is to tell the web browser what character set your document
uses. Character sets are defined by your operating system and describe which
combination of numbers, letters and special symbols are available. Modern
operating systems like Apple's Mac OS X use a system called Unicode
by default, which makes character sets something that no one has to worry
about any more, but until then the chances are that you're using the iso-8859-1
character set, or something similar enough that saying so will cause no problems.
Feel free to read up more on character sets later, but for now you can usually
"get away" with using the example above.
The body section
This is the main part of your site. All your content goes here, wrapped in
HTML tags that give the structure of your document to the browser and tells
it to load images, or link to other pages on other sites. In the example given,
the body section simply contains two tags: the top-level header tag <h1>
and the paragraph tag <p>. These tags all have default
styles that most browsers agree on, and you can use style sheets to override
those styles as you'll learn later on.
It's very important that you mark up your paragraphs because HTML ignores "white space". That means the following HTML:
Here is an
example.
...will come out like...
Here is an example.
...on your web browser. The advantage of this is that you can put as many
(and as large) gaps in your code as you like to help you mark out sections
or to make the code easier to read. All spaces get compressed down to one
space, but it's not very obvious behaviour and it catches a lot of people
out. Remember to mark up your paragraphs with <p> and </p>.
If you just want to break the line without a big gap, use the line-break tag,
<br>:
<p>Here is<br>
an example</p>Here's some more example.
<p></p>
This appears onscreen like so:
Here is
an example
Here's some more example.
Comments
Comments in your HTML are never displayed on screen, but can be useful to you when it comes to updating your site. HTML comments begin with <!-- and end with --> and you can put them almost anywhere, except inside a tag. For example:
<!-- This is a good comment -->This does not work
<html <!-- --> lang="en">