HTML and CSS Reference
In-Depth Information
Defining Web Page Structure
To create an HTML document, you use a text editor to enter information about the
structure of the Web page, the content of the Web page, and instructions for how that
content should be displayed. This topic uses the Notepad++ text editor to enter the
HTML elements and content for all projects and exercises.
Before you begin entering the content for this project, you must start by enter-
ing tags that define the overall structure of the Web page. You do this by inserting a
<!DOCTYPE> tag and five tags (<html>, <head>, <meta />, <title>, and <body>) together
with the closing tags (</html>, </head>, </title>, and </body>). These tags define the
structure of a standard Web page and divide the HTML file into its basic sections: header
information and the body of the page that contains text and graphics.
The
<!DOCTYPE>
tag is used to tell the browser which HTML or XHTML
version and type the document uses. Throughout this topic, we will utilize the HTML5
<!DOCTYPE> tag. In addition to that tag, the World Wide Web Consortium (W3C)
supports three document types for other versions of HTML or XHTML: strict, transitional,
and frameset. The
strict
document type is specified when you want to prohibit the use
of deprecated tags.
Deprecated tags
are tags that the W3C has earmarked for eventual
removal from their specifications, because those tags have been replaced with newer,
more functional tags, attributes, or CSS properties. The
transitional
document type
allows the use of deprecated tags. The
frameset
document type, which is used to support
frames on a Web page, also allows the use of deprecated tags although the frame tags have
been eliminated by HTML5. The <!DOCTYPE> tag includes a URL that references a
Document Type Deinition found on the w3.org Web site. Although this topic does not use
deprecated tags, the projects do use HTML5, which does not require a URL reference to a
Document Type Definition.
The <!DOCTYPE> Tag
The w3schools.com Web
site provides additional
information about the
<!DOCTYPE> tag used
for the HTML5 or XHTML
strict, transitional, and
frameset document types.
To learn more about the
<!DOCTYPE> tag, visit the
W3C Web site at w3.org.
It provides a wealth of
information on this and
other HTML tags.
Defining the HTML Document
The first set of tags beyond the <!DOCTYPE> tag,
<html>
and
</html>
, indicates
the start and end of an HTML document. This set of tags contains all of the content of
the Web page, the tags that format that content, and the tags that define the different
parts of the document. Software tools, such as browsers, use these tags to determine where
the HTML code in a file begins and ends.
The Head
The next set of tags,
<head>
and
</head>
, contains the Web page title and
other document header information. One of the tags inserted into the <head> </head>
container is the meta tag. The
<meta />
tag has several functions. In this chapter, it is used to
declare the character encoding UTF-8. The
Unicode Transformation Format
(
UTF
) is a
compressed format that allows computers to display and manipulate text. When the browser
encounters this meta tag, it will display the Web page properly, based on the particular
UTF-8 encoding embedded in the tag. UTF-8 is the preferred encoding standard for Web
pages, e-mail, and other applications. The encoding chosen is also important when validating
the Web page. The meta tag has other purposes that are described in subsequent chapters
of the topic. The <title> tag is another tag inserted into the <head> </head> container. The
<title>
and
</title>
tags indicate the title of the Web page, which appears on the browser
title bar and taskbar when the Web page is displayed in the browser window. The title is also
the name given to the page when a user adds the page to a favorites or bookmarks list.
The Body
The final set of tags,
<body>
and
</body>
, contains the main content of the
Web page. All text, images, links, and other content are contained within this final set of
tags. Table 2-1 on the next page lists the functions of the tags described so far, as well as
other tags that you will use in this chapter.
