Chapter 2: Tags are Your Friends!

Tell Me What Tags are Already!

Okay! Tags are the building blocks of HTML, and a HTML document is made up entirely of them. In HTML there are two types of tag. The first type of tag is a regular tag, and must always be closed off with a separate, corresponding closing tag. One example of this type of tag is the paragraph tag:

<p>Here is a very small paragraph of text.</p>

As you can see, the <p> starts a paragraph, and the </p> ends, or closes the paragraph. So, more generically, regular tags always look something like this:

<tagname>text</tagname>.

The second type of tag, is a Self-Closing tag. Self-closing tags quite shockingly... close them selves. Here is the new line tag, which is known as a break:

<br>

As you can see, this tag does not require a separate closing tag. More generically, self closing tags look like this:

<tagname>

The term 'tag', is fairly generic. I will be referring to the opening tag i.e. <p>, tags as a whole i.e <p>Something</p> or <br>, and closing tags i.e. </p> using the word 'tag'. Honestly, it's really not that confusing as you will see!

Tags are also often referred to as 'elements'. The term element is used to reference a tag as a whole, i.e in the following three paragraphs:

<p>paragraph1</p>
<p>paragraph2</p>
<p>paragraph3</p>

I could say "the second paragraph element" to refer to paragraph two. Or to reference them as a whole I could say "the three paragraph elements". Don't worry if this all seems a bit daunting right now, sooner than you think you will understand!

Containers

An element that contains other elements, i.e.:

<div>
 <p>Hello world</p>
</div>

...is often referred to as a container, or a container element. When speaking about an element that has a container, you may say "it's container". In the above case, if I were to say "the paragraph element's container", I would of course be referring to the div element!

Attributes

Many tags have what are called attributes. Take a look at the following:

<div class="sub-section" id="first-section"></div>

In the above div tag (don't worry about what it does for now), both class and id are attributes. There are many different attributes, again, as you proceed through the tutorials you will learn about the different kinds and what they do.

Cool! I'm Off To Make a Website!

Hehe, slow down there my eager friend. Why don't you take the quiz for this chapter?