Tags and Elements

Web pages are just specially formatted text files. As alluded to in the previous chapter, the web browser needs to know what form the various pieces of content take in order to reconstruct the page for display or reading out. This is achieved through the use of tags. Here's a simple example:

<h3>I like cats</h3>
<p>I like cats</p>

Above you can see two identical lines of text, surrounded on either side by a series of strange looking characters. When the browser comes to actually display the page they will look like this.

The characters on either side of the line of text are the tags. The opening < and closing > angle brackets denote that this is a tag as opposed to actual content and the letters and/or numbers in between determine the type of tag it is (its identifier). In the example above the first line is a level 3 heading (html has 6 levels of heading of differing importance, h1 being the most important and h6 the least) and the second is a paragraph.

When the browser comes to process the html file it will see the opening tag (e.g. <h3>) and know that everything following it until the closing tag (e.g. </h3>) is the same type of content. The backslash / directly following the opening bracket of the second tag denotes that it is a closing, rather than opening, tag.

The whole section of text including the opening and closing tags, as well as the content in between them, is referred to as an element. In this case the first line is a h3 element and the second a p element. A web page is just a collection of different elements.

Element relationships

Elements don't have to proceed purely one after another, however, and can be nested inside one another to represent complex relationships. These relationships are very much like those you have with other members of your family, and thus share similar names with them. Any elements added in between the opening and closing tags of an element become 'descendants' of that element and will become associated with it. Time for another example:

<p>Todo list</p>
<ol>
    <li>Wake up</li>
    <li>Have breakfast</li>
    <li>Learn more about HTML</li>
</ol>

What we have here is a series of li elements, nested inside an ol element. An ol is an ordered list, and li stands for list item. Here the ol is the parent of the li elements, which are in turn siblings of one another.

When rendered by the browser, the above html will look like this:

The advantage of being able to form relationships between elements like this is it brings additional context to information. Here we can see that not only are the li elements items in a list, but they are all members of the same list and should be processed in a particular order. Consider another example:

<p>Todo list</p>
<ol>
   <li>Wake up</li>
   <li>Have breakfast</li>
   <li>Learn more about HTML</li>
</ol>
<p>My favourite foods</p>
<ul>
   <li>Pizza</li>
   <li>Pasta</li>
   <li>Cake</li>
</ul>

Here we have added another list after the first, in this case, however, it is an unordered list, or ul. While we now have 6 li elements, they are not all member's of the same list, and thus should be treated separately. Also, while the second list still represents related items, they do not have any particular ordering associated with them. Here's how the modified example appears when rendered by a browser:

There is no limit to the number of levels that elements can be nested, and most webpages will have a large number of different elements with complex relationships resembling the most well-researched family trees.

We've covered quite a lot in this chapter, so don't worry if it doesn't all take first time. Even experienced web developers often need to go over new material several times before they fully understand it. As long as you comprehend the principles behind what you've just read you should be fine and shouldn't need to remember the specifics; it will become second nature soon enough.

In the next chapter we'll look at our first web page.