Learning the Basics of HTML
This chapter is from the book
This chapter is from the book
This chapter is from the book
In the first three lessons, you learned about the World Wide Web, how to organize and plan your websites, and why you need to use HTML to create a web page. In Lesson 3, "Introducing HTML and XHTML," you even created your first simple web page. In this lesson, you learn about each of the basic HTML tags in more depth and begin writing web pages with headings, paragraphs, and several different types of lists. We focus on the following topics and HTML tags:
- Tags for overall page structure: <html>, <head>, and <body>
- Tags for titles, headings, and paragraphs: <title>, <h1> through <h6>, and <p>
- Tags for comments: <!--...-->
Structuring Your HTML
HTML defines three tags that describe the page's overall structure and provide some simple header information. These three tags—<html>, <head>, and <body>—make up the basic skeleton of every web page. They also provide simple information about the page (such as its title or its author) before loading the entire thing. The page structure tags don't affect what the page looks like when it displays; they're only there to help tools that interpret or filter HTML files.
At one time, these tags were optional. Even today, if you leave them out of your markup, browsers usually can read the page anyway. These tags, however, are required elements in HTML 4/XHTML 1.1 and HTML5, the standards supported by current browsers.
The <html> Tag
The first page structure tag in every HTML page is the <html> tag. It indicates that the content of this file is in the HTML language. In the XHTML 1.0 recommendation, the <html> tag should follow the DOCTYPE identifier (as mentioned in the previous note) as shown in the following example.
All the text and HTML elements in your web page should be placed within the beginning and ending HTML tags, like this:
<!DOCTYPE html><html> ...your page... </html>
The <html> tag serves as a container for all the tags that make up the page. It is required because both XML and SGML specify that every document have a root element. Were you to leave it out, which you shouldn't do because it would make your page invalid, the browser would make up an <html> tag for you so that the page would make sense to its HTML processor.
The <head> Tag
The <head> tag is a container for the tags that contain information about the page, rather than information that will be displayed on the page. Generally, only a few tags are used in the <head> portion of the page (most notably, the page title, described later). You should never put any of the text of your page into the header (between <head> tags).
Here's a typical example of how you properly use the <head> tag. (You'll learn about <title> later.)
<!DOCTYPE html><html> <head> <title>This is the Title. It will be explained later on</title> </head> ...your page... </html>
The <body> Tag
The content of your HTML page (represented in the following example as ...your page... ) resides within the <body> tag. This includes all the text and other content (links, pictures, and so on). In combination with the <html> and <head> tags, your page will look something like this:
<!DOCTYPE html><html> <head> <title>This is the Title. It will be explained later on</title> </head> <body> ...your page... </body> </html>
You might notice here that the tags are nested. That is, both <body> and </body> tags go inside both <html> tags; the same with both <head> tags. All HTML tags work this way, forming individual nested sections of text. You should be careful never to overlap tags. That is, never do something like the following:
<!DOCTYPE html><html> <head> <body> </head> </body> </html>
Whenever you close an HTML tag, make sure that you close the most recent unclosed tag. (You learn more about closing tags as you go on.)