Anatomy of HTML

How is HTML Composed?

An HTML document is composed of tags that give structure and organization to content. HTML tags are formed by using '<' and '>' symbols, and are referred to by the word between them (or, in the case of certain tags, what the abbreviation stands for). For example, "<body>" is a Body tag, "<script>" is a Script tag, "<a>" is an Anchor tag, and "<p>" is a Paragraph tag. There are three types of tags:

  1. Start Tags - (e.g. "<body>", "<script>", "<a>")
  2. End Tags - (e.g. "</body>", "</script>", "</a>")
  3. Self-Closing Tags - (e.g. "<br />", "<hr />", "<img ... />")
Most tags are wrapped around some form on content on the page. For example, this is how you would put text into a paragraph:

HTML <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan iaculis tellus sed imperdiet. Pellentesque ut porta felis. Suspendisse tincidunt mauris nec velit faucibus tempus. Suspendisse potenti. Mauris diam velit, dictum quis volutpat a, accumsan id purus. Nullam suscipit molestie molestie. Integer ut risus purus.</p>


The Paragraph Start Tag is at the beginning of the text, and the Paragraph End Tag is at the end.

In the HTML standard, most tags have both a Start Tag, and an End Tag, and a few only have a Start Tag (because there is no content that goes between the Start and End Tags). In the XHTML standard, ALL tags have Start and End Tags, though those that do not require content to go between the can use the Self-Closing format as described above.

Order is Important

When writing HTML code, it is important to note the order in which you use tags within the document. The standard uses a FILO (First In, Last Out) method of ordering tags, which means that if you have nested tags, the tag opened first must be closed last. For example, if a paragraph is within a division, then the following order is incorrect:

HTML <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></p>

Above, since the Div Tag was started first, it must be the last tag closed, so the correct order would be:

HTML <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

Basic Composition of an HTML Document

There are four tags that are the bare minimum requirement for an HTML document:

  1. HTML tag (<html>) - This tag is the wrapper that will encompass everything else within the document. With the exception of a DOCTYPE declaration (discussed below), everything else will be within the HTML Start and End tags.
  2. Head tag (<head>) - This tag is where a lot of metadata is stored about your webpage (<meta> tags). It is also where you can define such things such as Javascripts, CSS style rules, and other things. The Head Tag comes immediately after the HTML Start tag.
  3. Title tag (<title>) - The Title tag must be within the Head tag (between the Head Start tag and the Head End tag). Whatever text you enter in the Title tag will appear in the title bar of the web browser when your page is viewed.
  4. Body tag (<body>) - The Body tag comes after the Head tag, and is where all of the content goes.

Based on these four requirements, a basic HTML page would look similar to this, in raw code:

HTML<html>
<head>
<title>Sample HTML Page</title>
</head>

<body>
This is an HTML document!
</body>
</html>


Again, this is the bare minimum that is required to get a functional web page, although if you want to validate your code and have it comply with the X/HTML standards, a few more things are needed.

Specifying a DocType

A DocType declaration is used to let your browser know what standard to adhere to when rendering the code in your web page. A DocType declaration comes first, followed by HTML Start tag. Common DocType declarations for HTML 4.01 and XHTML 1.0 are:

HTML 4.01

XHTML 1.0

The "Strict" declarations only allow the specifications from that standard and do not allow for depreciated elements, or the use of formatting attributes. The "Transitional" declarations, however, do allow for depreciated elements and formatting attributes, useful for pages that may be viewed with older browsers that don't fully support the use of style sheets. The "Frameset" declaration is used when you want to partition off your web page into two or more frames.

For this class, all of your web pages should use the XHTML 1.0 DocType declaration.

For those who do not have access to Adobe Dreamweaver, the following code can be used as a bare XHTML 1.0 Transitional web page:

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
</body>
</html>


The Meta tag in the Head tag provides additional information to the browser, specifying that what is being served is content (as opposed to a file download, for instance), that the content is text of the HTML variety, and is encoded using the UTF-8 character set.



Content by Vincent Santa Maria.