Приглашаем посетить
Хомяков (homyakov.lit-info.ru)

HTML Tags Every Web Page Must Have

Previous Page
Table of Contents
Next Page

HTML Tags Every Web Page Must Have

The time has come for the secret language of HTML tags to be revealed to you. When you understand this language, you will have creative powers far beyond those of other humans. Don't tell the other humans, but it's really pretty easy.

Before you get into the HTML tags, let's first address the messy-looking code at the top of Listing 2.1. The first line indicates that the HTML document is in fact an XML document:

<?xml version="1.0" encoding="UTF-8"?>

The version of XML is set to 1.0, which is fairly standard, as is the type of character encoding (UTF-8).

By the Way

It isn't terribly important that you understand concepts such as character encoding at this point. What is important is that you include the appropriate boilerplate code in your pages so that they adhere to the latest web standards.


The second and third lines of code in Listing 2.1 are even more complicated looking:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Again, the specifics of this code aren't terribly important as long as you remember to include the code at the start of your pages. This code identifies the document as being XHTML 1.1, which then allows web browsers to check and make sure that the code meets all the requirements of XHTML 1.1.

By the Way

The XML/XHTML boilerplate code isn't strictly required in order for you to create web pages. You can delete the opening lines of code in the example so that the page starts with the <html> tag, and it will still open fine in a web browser. The reason for including the extra code has to do with ensuring that your pages smoothly migrate to the new and improved Web that has already started unfolding. Additionally, the extra code allows you to validate your web pages for accuracy, which you'll learn how to do a bit later in this lesson.


Most HTML tags have two parts: an opening tag, which indicates where a piece of text begins, and a closing tag, which indicates where the piece of text ends. Closing tags start with a / (forward slash) just after the < symbol. Another type of tag is the empty tag, which is unique in that it doesn't involve a pair of matching opening and closing tags. Instead, an empty tag consists of a single tag that starts with a < and ends with a / just before the > symbol. Following is a quick summary of these three tags just to make sure you understand the role each of them plays:

  • An opening tag is an HTML tag that indicates the start of an HTML command; the text affected by the command appears after the opening tag. Opening tags always begin with < and end with >, as in <html>.

  • A closing tag is an HTML tag that indicates the end of an HTML command; the text affected by the command appears before the closing tag. Closing tags always begin with </ and end with >, as in </html>.

  • An empty tag is an HTML tag that issues an HTML command without enclosing any text in the page. Empty tags always begin with < and end with />, as in <br />.

For example, the <body> tag in Listing 2.1 tells the web browser where the actual body text of the page begins, and </body> indicates where it ends. Everything between the <body> and </body> tags will appear in the main display area of the web browser window, as you can see if you refer to Figure 2.1, shown earlier.

Web browsers display any text between <title> and </title> at the very top of the browser window, as you can also see in Figure 2.1. The title text is also used to identify the page on the browser's Bookmarks or Favorites menu, depending on which browser you use. It's important to provide a title for your pages so that visitors to the page can properly bookmark it for future reference.

You will use the <body> and <title> tags in every HTML page you create because every web page needs a title and some body text. You will also use the other two tags shown in Listing 2.1, <html> and <head>. Putting <html> at the very beginning of a document simply indicates that this is a web page. The </html> at the end indicates that the web page is over.

Within a page, there is a head section and a body section, each of which is identified by <head> and <body> tags. The idea is that information in the head of the page somehow describes the page but isn't actually displayed by a web browser. Information placed in the body, however, is displayed by a web browser. The <head> tag always appears near the beginning of the HTML code for a page, just after the opening <html> tag.

By the Way

You no doubt noticed that there is some extra code associated with the <html> tag in the example. This code consists of two attributes (xmlns and xml:lang), which are used to specify additional information related to the tag. These two attributes are standard requirements of all XHTML web pages.


The <title> tag used to identify the title of a page appears within the head of the page, which means it is placed after the opening <head> tag and before the closing </head> tag. (Upcoming lessons reveal some other advanced header information that can go between <head> and </head>, such as style sheet rules that are used to format the page.)

Did you Know?

You may find it convenient to create and save a bare-bones page (also known as a skeleton page) with just the opening and closing <html>, <head>, <title>, and <body> tags, similar to the document in Listing 2.1. You can then open that document as a starting point whenever you want to make a new web page and save yourself the trouble of typing out all those obligatory tags every time.


The <p> tag used in Listing 2.1 is used to enclose a paragraph of text. It isn't entirely necessary in this example because there is only one paragraph, but it becomes very important in web pages that have multiple paragraphs of text.


Previous Page
Table of Contents
Next Page