Learning the Basics of HTML
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:,, and
- Tags for titles, headings, and paragraphs:
,through, and - 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—,, and—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.
TheTag
The first page structure tag in every HTML page is thetag. It indicates that the content of this file is in the HTML language. Thetag should immediately follow theDOCTYPEidentifier (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:
...your page... </html>
Thetag 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 antag for you so that the page would make sense to its HTML processor.
TheTag
Thetag 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 theportion of the page (most notably, the page title, described later). You should never put any of the text of your page into the header (betweentags).
Here’s a typical example of how you properly use thetag. (You’ll learn about
This is the Title. It will be explained later on ...your page...
TheTag
The content of your HTML page (represented in the following example as...your page...) resides within thetag. This includes all the text and other content (links, pictures, and so on). In combination with theandtags, your page will look something like this:
This is the Title. It will be explained later on ...your page...
You might notice here that the tags are nested. That is, bothandtags go inside thetags; the same with bothtags. 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:
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.)