The structure of an HTML document

When you’re writing a HTML document, there is a structure to follow.  You can create these documents using a simple text editor such as Notepad or Notepad++

The HTML document looks like this…


This looks pretty complicated at first glance. But let’s break it down…

<!DOCTYPE HTML> Very simple, this is just what the document type is, it’s a html document.

<HTML></HTML> This is an open HTML tag, this surrounds the document, it’s all it does. It goes at the top and at the bottom.

<HEAD></HEAD> Here you would put all of your meta data, java or styling into the web page.  Don’t worry, we’ll come to those later.

<TITLE></TITLE> This is the title of the page, this is what would appear at the top of your browser window.

<BODY></BODY> This is the actual content of the document.

Once you save this, be sure to save it with a .html suffix, so for example…. “something.html”

Read up on how to create things inbetween the <BODY> tags here.

An introduction to HTML

HTML stands for…

Hyper Text Mark-up Language.

HTML is made up of…

– Text content (what you see)
– Markup (what it looks like)
– References to other documents (videos, images…etc)
– links to other pages

Let’s get started.

The HTML markup – tags and elements

<name> content </name>
HTML can be made up of opening tag and a closing tag

The whole of the above put together is known as an element.

<b>Contents</b> – b for bold.
<em>Contents</em> – em for emphasis or italics.

HTML Attributes

Attributes have a name and value.

For example:

<tag attr=”value”>Contents</tag>

The most common attribute, is the link.

<a href=”“>derp</a>

<a> stands for anchor.
href‘ is the attribute name, ‘‘ is the value.

Image tags

<img> – images’

SCR is the source of the image, either your server or someone else’s.
ALT is the text which isn’t displayed when the image doesn’t load. Believe it or not, it’s actually for blind people.

The whole image tag looks like this…

<img src=”url or a link goes here” alt=”text”>

There is no closing end tag. This is known as a void tag, there is no content, but there is, if you know what I mean!

Images appear in-line with text, unless specified.


You can force lines to show underneath each other and create a whitespace or a line.

<br> – again it’s a void tag.

You can also use a <p> tag. P for paragraph. This is not a void tag. It looks like this.


Why do we have two different ways of doing the same thing?

The <b> tag is inline, everything is line based. Where as <p> is known as a block tag and that creates a box around the text and pushes things outside of it down a line.

SPAN and DIV’s

<span>text</span> is an inline tag.
<div>text</text> is a block tag.

They are both ways of keeping content in shape, similar to the <p> and <br> tags.

A <div> will create a new line and push everything down a peg. Much like the <p> tag.

Want to see what an HTML document looks like? Click here.