HTML 101, Part 3 – Tags

« HTML101 Part 2 || HTML101 Part 4 »

Now that we have scratched the surface of HTML, we’re going to start delving deeper. It’s time to start learning more about tags.

Display of tags

You’ve just completed your first “Hello world” HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Hello World</title>
	</head>
	<body>	
            <p>Hello World</p>
	</body>
</html>


Now we saw the “Hello World” display in the browser when we opened the file, but why did we not see the <p> and </p> at the beginning and end of the text? And what does it mean?

If you remember what we have already learned, these words in angle brackets are called tags in HTML, and it’s very important to realize that tags never show in the display of your website. The purpose of tags in HTML are to tell your browser what the data inside it is, and the browser then has a default set of rules on how to display the data.

In this example, the tag that we used was a paragraph tag <p>. The tag before the text is the opening tag or start tag and the </p> at the end is the closing tag or end tag. The opening tag tells the browser where the paragraph starts, and the closing tag tells the browser where the paragraph ends. So once the tag has fulfilled its role in explaining the meaning of the content to the browser, its job is done, and the tag isn’t displayed.

Default styles for tags

To understand tags better, let’s expand our Hello world page a bit. Let’s update the markup “<p>Hello World</p>” to the following:

<div>
Hello world!<p>I am currently learning all about tags, 
and it is <strong>very important</strong> to remember 
that tags differ.</p><hr />There are different types of tags.
</div>

The <div> tags at the beginning and end has to be there, but try not to ponder on that now. We will explain it in full at a later stage.
Now save your file and reload the page in your browser by pressing F5. Your page now looks something like this :

Hello world!

I am currently learning all about tags, and it is very important to remember that tags differ.


There are different types of tags.

You’ve just learnt a new tag, the <strong> tag, which tells the browser that the data inside the tag has to be brought across strongly. Most visual browsers interpret this by displaying it as bold text, whereas audio browsers would read it louder. So it’s important to use the correct tag to indicate the meaning of each piece of content, so that the meaning can be carried across to someone regardless of the way they are interacting with your website! If you use the correct tags/markup, not only will all people understand the meaning of the content, but even computers will be able to, to some degree!

Inline vs Block

We also saw something else in the example:
The text inside the <strong> tags stayed in their line, but the text in the <p> tags displayed on a line of their own. The reason for this is that browsers have default ways of displaying (or reading!) HTML elements. The two ways in which elements can be displayed is inline (stay in the flow of the document) or block (displays as a block by itself). Changing the default way that a browser displays (or reads!) tags is what CSS is for, which you’ll learn all about in our CSS 101 series.

Closing tags

We also saw that where most of the tags that open have a complementary closing tag, like <p> and </p>, the <hr /> tag did not have a closing tag but closed itself! From this we learn the following:
Some tags are self-closing, others are not.
As a rule, all tags that do not contain any content will be self closing. Examples of these tags are:
<br />
<hr />
<link>
<meta>

Tag nesting

Now let’s update our text again to display what we have learned. Change your text to the following:

<div>
Hello world!
<p>
I am currently learning all about tags, 
and it is <strong>very important</strong> to remember 
that tags differ.
</p> 
There are different types of tags.
<hr />
<ul>
    <li>Some tags have accompanying closing tags</li>
    <li>Some tags are self-closing</li>
</ul>
</div>

Save and reload your browser page, your page should look something like this:

Hello world!

I am currently learning all about tags, and it is very important to remember that tags differ.

There are different types of tags.


  • Some tags have accompanying closing tags
  • Some tags are self-closing

We just learned two new tags: The ul tag represents an unsorted list (or bullet list), and it contains a few li tags. The li tags are list items, and can only be found inside ul (unsorted list) or ol (ordered list) tags. So here is a new point:
Some tags may not be nested inside others, and some tags have to be nested in others.
Just like list item tags can only be found inside list tags, there are other tags that may not be inside certain tags. For example: The ul tag we just learnt may not be inside a p (paragraph) tag.

So how do you know what may go where?
Keeping your HTML neat and tidy is one of the first things you learn at HTML boot camp. If you do not present yourself in order then Sergeant Validator will have it in for you! Sergeant Validator is the drill Sergeant at HTML boot camp who inspects your HTML to make sure you keep to the standard ascribed to your unit (as described in your DOCTYPE tag). You can always find Sergeant Validator here.

  1. Firstly, start by learning all the tags and their default properties. The w3schools reference is a good starting point.
  2. Whenever you want to check whether your code is valid or not, you can use the w3.org validator

Special characters in HTML

Reserved characters

We already saw that the less-than symbol — < — always indicates the start of a tag, so whenever your browser reads this symbol it expects a tag and does not visually display it. So how do you display a < symbol in your browser? Instead of just typing the character, you have to type its special code &lt; and the browser will then display this as <. There are five characters like this which have special meanings in HTML, which are :

Character Name Number Used:
< &lt; &#60; to begin a tag
> &gt; &#62; to end a tag
& &amp; &#38; to show special characters!
" &quot; &#34; for attributes
' &apos; &#39; for attributes

&apos; is not defined in HTML 4 however, and some browsers do not support &apos; so the XHTML specification (which is what we’re teaching you!) recommends the use of &#39; to display an apostrophe on the page. But for the other 4 characters, it’s often easier to remember and use their names instead of their numbers.

Other special characters

As there are only a limited number of characters on a keyboard, you need a way to represent characters which do not appear on a keyboard, such as the trademark sign — ™ — These characters have both a name and number representation as well, such as either &trade; or &#8482; for the trademark symbol. For a more comprehensive list of these characters, take a look at the list on w3schools.

Now remember to keep yourself well presented so that Sergeant Validator won’t yell on you!

« HTML101 Part 2 || HTML101 Part 4 »

Leave a Reply