HTML Tags Every Web Page Must HaveThe 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).
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.
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:
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. 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.)
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. |