Introduction to HTML

brackets iconIn this lesson we learn about one of the main types of data websites send to our computers over the internet: HTML.
If you haven’t completed the first part of our Website Design course “What is the internet” make sure you read those first to get a good understanding of how websites are sent to your browser.

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8
img9
img10
img11
img12
img13
img14
img15
img16
img17
img18
img19
img20
img21
img22
img23
img24
img25
img26
img27
img28
img29
img30
img31
img32
img33
img34
img35
img36

Remember what HTML stands for? It stands for HyperText Markup Language.

Let’s look in more detail what this means.

‘Markup’ in computing means adding extra data to text in order to tell computers more information about that text. For example, in HTML we tell the computer which parts of the HTML document are to be displayed, which parts make up the navigation, even which parts are titles and which are content.

What is a HTML document?

A HTML document is just what it sounds like – a document that contains HTML! It’s nothing more special than that. All we have to do is type our HTML into a document in a writing program – for example Notepad, or even Microsoft Word – and we have a HTML document.

Starting from the next lesson of this course we’re going to make our own simple HTML pages on our own computers, and learn all about HTML as we go.

First let’s understand what makes HTML special.

What are HTML tags?

HTML is just normal text, with additional information. This additional information is delivered through tags. Tags are the fundamental building blocks of HTML.

A tag looks like this:

<tag>

Anything inside the “<” and “>” symbols defines the tag.

Can anything be a HTML tag?

Yes and no. Technically you could put anything inside a “<” and “>” symbol. However, browsers only understand certain tags, so unless you use the tags that are officially defined as part of HTML then your tags will not work correctly.

We will learn all about the important HTML tags as we proceed through this course.

More about tags

Tags can be both opened and closed. For example, let’s look at a <span> tag (don’t worry about what a <span> tag is for now – we’ll get to it later):

<span>This is inside my span! I can put anything I like here.</span>

You can see that a tag is opened by having an initial tag such as <span>. It is then closed with a second tag that has an additional “/” symbol. Anything can go between the opening and closing tags – this is known as the tag contents.

This whole example from the opening tag to the tag contents to the closing tag is known as a HTML element. In this case we have created a span element, because we are using a span tag to define the element.

Elements are made up of tags.

Self-closing Tags

Some tags don’t require opening and closing tags, they can effectively open and close themselves in just one tag. These are often known as self-closing tags.

Technically in HTML 5, which is currently the most advanced version of HTML, self-closing tags don’t actually close themselves, but it’s a helpful way to picture what is happening. (If you’re interested in why: it’s because HTML is similar to a markup language called XML. In XML tags are required to either be closed in a pair, or to self-close. HTML is not as strict as XML, so you don’t have to self-close your tags. However, it doesn’t hurt, and keeps your HTML neat so it is not a bad habit to have.)

A self-closing tag looks like this: <tag />

Tags that can exist on their own, i.e. be self-closed include: <img />, <link /> and <meta />, amongst others.

Again, we will understand more about each of these tags as we encounter them when we start building our own website!

Tag attributes

The last important concept to understand about tags is that tags can have attributes as well as contents. Let’s add an attribute to our <span> tag from before:

<span class=”exampleTag”>This is inside my span! I can put anything I like here.</span>

Now our tag has a class attribute. Attributes can have values. In this case our attribute has the value exampleTag.

As with tag names, attributes can technically be anything. For example, we could have said:

<span lemon=”fruityAttribute”>This is inside my span! I can put anything I like here.</span>

This gives our <span> tag an attribute named “lemon” and with a value of “fruityAttribute”.

However, just like with tags there are certain attributes that are important and have meaning. We will learn about these as we learn about each tag.

Putting it all together
HTML 1

Here we can see all of the parts that make up an element.

Make sure you understand which part of the element is a tag, which part is an attribute, which part is an attribute value and which part is the element contents.

We will be referring to all of these throughout the course so try and memorise these now.