Learning HTML Tags

Having created the most basic of HTML pages last time, it's time to add a little more to it. Today, we are going to introduce the building blocks of any web page - the tag!

Last time, we covered the concept of code having a vocabulary. We even used a little vocabulary -

. When writing HTML, this vocabulary has a special name - anything that is include between angled brackets is called a tag. Tags essentially tell the browser how to display various pieces of text, images, video or other media. In a way, you can think of your browser like a TV screen - the HTML page is the signal and the browser is the TV that decodes that signal and displays it. The specifics of each HTML page or web page are shown based on the various tags dotted around the page.

More code, less analogy

Let's cement the idea with another example. Open up your index.htm page that you began creating last time and replace it completely as follows:

<h1>Welcome to my homepage</h1>
<p>I am a bit of text between two HTML tags</p>
<p>em>In here I am a bit of emphasised text</em>, but out here, I am not.</p>

If you save this file and then load it in your browser, you should be greeted with something similar to the following:

What can we learn from this:

• As before, HTML pages are just text.
• Tags affect how text is displayed on the screen - the <h1> tag makes text big and bold (as it should it stands for Heading 1), the <p> tag leaves some nice white-space around our text (as it should - it stands for Paragraph), the <em> tag italicised our text.
• Tags come in pairs - or in other words tags surround a piece of text and they affect the piece of text that they surround.
• The pairs of tags don't look identical - the first one of the pair just has angled brackets around it, the second one of the pair, however has angled brackets and a forward slash.
  • we usually say tags have an opening tag and a closing tag.
  • the closing tag is denoted by the forward slash inside the angled brackets just before the tag name (eg </h1>)
• Tags can be nested inside each other - for example the <em> tag is inside a set of <p> tags.
• You need to close tags in the order of last in first out - in the above piece of code, we open a paragraph tag, then open an emphasis tag, then we have some text, then we close the emphasis tag and only after that can we close the paragraph tag.

Go and play

That's really enough learning for today - however, there is some homework for you:

• Write down, in your own words, what a tag is.
• Examine the above piece of HTML and write down all the tags that were used.
• Create a new page and using the tags you've identified, create a web page and try to make it look exactly like this (click on the image for a larger view>: