First steps in HTML

This is a simple introduction to HTML. After reading this tutorial you should be able to construct a simple web page.

What is HTML?

HTML is a Markup Language used to describe content, an HTML file is a text file with a specific structure. A web browser can take the HTML and render it graphically, this is happening all the time as you browse the web. You can easily see the HTML the web browser is using to render any page by right clicking on it and selecting 'View Source' (in Firefox, 'View Page Source') - try it now. You should see something like this:

You'll see a lot of angled brackets (less than and greater than), these delimit 'tags' - so a tag is a less than bracket, followed by some text and then a greater than bracket, and the tags describe the structure of the HTML document.

Why do I need tags?

You need tags to describe elements, and elements make up the structure of your HTML document - they describe your document to the web browser. You can describe headings and paragraphs and links and the web browser can then display your HTML appropriately (you will here this referred to as 'rendering' - the browser renders your HTML).

Tags usually come in pairs. A pair of tags and their contents make an element. You have an opening tag, then the contents of the element, and a closing tag. For example, a paragraph looks like this:

You can see that the closing tag is just the same as the opening tag except that is has a slash after the first angle bracket. Here are some examples of other simple elements:

One tag elements

There are some tags which don't have opening and closing tags, the entire element is just one tag. The common ones for text display are the line break and the horizontal rule. Neither of these requires any text content so they are described by just a single tag:

You may also see a single element tag written like this:

The difference is a subtle distinction in the type of HTML document, for now you don't need to worry about it as long as you are consistent throughout your page - if the document already has single tag elements of the first type continue to use the same ones.

How do elements fit together?

In the examples above, our elements just contained text. The key thing about HTML is that elements can also contain other elements:

This is a paragraph element which contains a strong element. We can say the strong element is a child of the paragraph element. An element can have many children:

A child element element can have children of it's own:

It is important to remember that the parent element must always fully contain it's children. If you put an opening tag inside another element, you must remember to put the closing tag for the child element before the closing tag of the parent element. Think of it like boxes, the paragraph is a box, if you put strong box inside then you have to put the whole box in, if some of the strong box is left out then you have to break the box to do it. Here are some examples:

My browser displays things just fine with the wrong examples above, why should I bother?

It displays just fine because the browser guesses what you really mean and changes your document before it displays it. This will work for the simple examples we've seen so far, but if you make the browser guess then sometimes it is going to guess wrong and you'll end up with something that isn't what you want. Also, different browsers make different guesses, so your page will render as you expect in one browser but not in another. For the same reason, you must also always remember to put both opening and closing tags for the elements that require them:

If you don't put the closing tags in, the browser will guess where to put them, and sometimes this will not be where you expect them to go.

Your first HTML page

Before we get to your first page you have to learn some 'structural markup'. This is elements which are not directly displayed but are used to structure your document. The first of these is the html element itself:

An html element has exactly two children, the head and the body element:

The head element contains metadata - information about your document. The body element contains the actual elements which the browser will render. Into the head element we put a title element, and in the body element we can put some of the elements above:

Copy the text above and paste it into a text editor, save it to your desktop as hello.html (if you're using Notepad in Windows, make sure you change the drop down selector to say 'All Documents' when you're saving, otherwise the document will be saved as hello.html.txt which won't work, if you're having trouble try turning on file extensions). You should now be able to double click on the file to have it open up in a web browser.

What now?

Currently your document is using the default browser styles so it looks a little bland, if you want to smarten it up a bit go to the introductory CSS tutorial.
If you'd rather learn about more complex elements, adding lists, links and pictures to your page, got to the beginners HTML tutorial.

---

CategoryWebDesign