Learning the Basics of HTML
This chapter is from the book
This chapter is from the book
This chapter is from the book
Over the first three lessons, you learned about the World Wide Web, how to prepare to build websites, and why you need to use HTML to create a web page. In Lesson 3, “Introducing HTML and CSS,” you even created your first very 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 are used to define 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’s displayed; they’re only there to help 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. The <html> tag should immediately 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 of 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 the <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’re closing the most recent unclosed tag. (You’ll learn more about closing tags as you go on.)