part0010

T he previous chapter introduced some basic HTML tags which we were able to view on a web browser. This chapter however, provides a detailed explanation on how the HTML tags used in the previous chapter works.

HTML tags are standard keywords written on text editors and saved as HTML files. These HTML files can be viewed on web browsers because web browsers by default displays the content of an HTML document. In HTML, every tag has a name and meaning attached to it, and they are usually represented in pairs also known as opening and closing tags e.g. <p></p> . The “p” tag is used for representing a paragraph, this would be further explained in subsequent chapters.

HTML tags are usually created with contents in between them depending on what the tag does. Figure 5.0 shows a “p” tag with some contents in between the opening and closing tags.

In HTML, any collection of opening and closing tags with a piece of content within it such as text, just like what we have in Figure 5.0, is referred to as HTML Elements.

From the codes written in the previous chapter, the first line of code was something like this <!DOCTYPE html> . This line of code is referred to as a “Document Type Declaration”. It informs a web browser that the current document is a HTML document. It is very important to always add a document type declaration tag at the beginning of every HTML file created. Although it does not stop web pages from loading, consider it a way of observing one of the many other standard practices for writing a standard HTML code.

The next line of code we have is the opening <html > tag which signifies the beginning of a standard HTML code. Every HTML file should have the opening <html > tag immediately after the document type declaration tag.

NOTE: Most HTML tags require an opening and closing tag. In the chapter ahead, you will discover that there are few HTML tags that do not require a closing tag.

Before reviewing the next tag, which is the <head > tag, it is expedient to gain an understanding on how nesting HTML tags works. Since HTML tags are used to create a structure for web pages, it's necessary that we take care to write our opening and closing tags correctly to avoid writing disorganized tags that cannot be improved afterwards.

A simple illustration will be used for clarification. Think of HTML tags as having a parent and child relationship, where the <html > tag is the parent tag to every other HTML tags.

When you look at the HTML code we have written so far, you will observe that the opening <html > and closing </html> tags are wrapping every other tag such as the <head > and <body > tags. Figure 5.1 shows a graphical representation.

Figure 5.1 shows that the <head > and <body > tags are all children tags to the <html > tag. We can use this idea on all other HTML tags. For example, by looking at Figure 5.1, you can as well confirm that the <title > tag is a child tag to the <head >. You might wonder as to the reason for parent and child relationship illustration. However, HTML tags are not meant to be placed just anywhere. By understanding which HTML tags belong to a particular parent tag, you will be able to write standard HTML codes, and that is what nesting is about in HTML. As we progress, you will gain a broader understanding about what we have just discussed.

NOTE: It's important to also observe that the <head> tag is not a child tag to the <body> tag, likewise the <body> tag is not a child tag to the <head> tag because neither of both tags are placed in-between each other. This implies that, a <body> cannot be used in between a <head> tag, neither can a <head> tag be used in between a <body> tag.

From our index.html file, notice that the opening and closing <body > tags contains two more tags in between them; the <h1 > tag and the paragraph tag. The <h1 > tag is mostly used for displaying titles in bold text, for example, “A news headline”. This is why it is referred to as the <h1 > tag i.e. “Header One”. Any text written in between the opening and closing <h1 > tag will be displayed in a bold format on a web browser. The header tags usually come in six different pairs (h1, h2, h3, h4, h5, h6). The differences between the header tags is that, they get smaller as they increase from <h1 ></h1 > to <h6 ><h6 >, something like this:

These header tags are commonly used as headlines, to draw the attention of a website visitor. The <p > tag on the other hand is used for creating paragraphs and only comes in a single form.

Another interesting tag to take note of is the <title > tag, which is a child tag to the <head > tag. The <title > tag is always used within the <head > tag and should not be placed anywhere else within your HTML codes.

The next pair of tags we will be looking at are the opening and closing body tags. The contents of any element written within the body tag are been displayed on a web browser.

From our first HTML codes, observe that in between the opening and closing body tags, we placed a <h1 > tag and a <p > tag. These are some valid HTML tags that can be used within the <body > tag. Figure 5.4 shows how the tags used in between the <body > tag works.

As a web designer, it is important for you to develop the habit of writing well-structured HTML codes. This will make your codes look presentable and easy for other programmers to build upon in cases where team work is required. Additionally, properly indented HTML codes are easier to maintain and errors within such codes can easily be spotted and fixed. Looking at Figure 5.5, a clear differentiation between a properly indented HTML code and a poorly indented HTML code is shown.

The white spaces added to the HTML codes while indenting is ignored by the web browser. That is, the browser will not apply any spaces on the contents of our HTML pages when we try to view it on a web browser. Figure 5.6 highlights some of the white spaces on our HTML code.

In this chapter, we were able to review the HTML tags that were mentioned in the previous chapter. We also discussed how nesting works and why it should always be practiced by web designers. The next chapter introduces other HTML tags that can be used to improve the contents of an HTML page.