HTML Tags – Tags for the structure of the HTML document

This example shows the structure of a very basic HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic HTML Document</title>

</head>

<body>

This is the content of a very basic HTML document.

</body>

</html>

This is how the document appears in a browser window:

HTML-TAG VOCABULARY

HTML Tags – (1) Tags which set the structure of the HTML document

<!DOCTYPE >

If used, the DOCTYPE tag must come first. It specifies the precise version of the W3C standard for this document, and uses a link to the W3C website. This document was declared to be written in “XHTML 1.0 Strict”. DOCTYPE has no terminating tag.

<html>

Declares the start of the HTML document.

Terminating tags. Most tags have to bracket a character string or some expanse of HTM-Language. The terminating tag is formed by preceding the tag-name with a diagonal. The terminator </html> is usually found at the end of the HTML document.

<head>

Declares the head of the HTML document.

Gives information about the HTML document.

<title>

The title will display at the top of the browser window.

The head is ended by </head>, and the body begins with <body …>. The HTML background property is optional, but appears here frequently, allowing the background image, and/or background color to be declared. It could be specified in the CSS stylesheet, instead. In the example above, colors are declared for unvisited links (link=), visited links (vlink=) and text (text=). Leaving these out allows the browser-defaults: unvisited is normally blue, and visited is normally purple.

HTML Tags – (2) Tags for optional elements of the HTML document

The CSS stylesheet begins and ends as follows:

</style>

If you have a CSS stylesheet, it can go anywhere in the head of the HTML document. The CSS stylesheet is used to form the “presentational” (vs. the content) layer of the target document. Alternatively, the stylesheet could be an external file, or a hyperlink, importing a stylesheet from another website. The declaration ‘type="text/css"’ specifies the medium as text, and the language as CSS.

In addition to using “style” once as an html tag to declare the stylesheet, any number of “style” declarations can be embedded as attributes following html tags in the body of the html document.

Format of an HTML comment. A space should follow “”. HTML comments may appear in any part of the HTML document. CSS stylesheet comments have their own syntax.

HTML Tags – (3) Tags for the mark-up of the target document. These block elements may be used in the body of the HTML document, and help form the content layer.

The block element vs. the in-line element. Block elements are normally stacked vertically, at the left margin, one below another. In-line elements, previously known as “text” elements append in a horizontal fashion to the existing line. This distinction is overridable in the CSS stylesheet.

A div is a generic block area. Short for division.

Inventing names to refer to specific elements in the body of the HTML document. “id” is a generic property of any element. Naming a div, or any element, by means of an id is optional, but a name can enable it to be used in conjunction with a CSS stylesheet. Any user-invented name can appear in place of "mharea”, which was used to refer to the masthead area. When used in the CSS stylesheet, mharea would appear in a “rule” as a “selector” and be preceded by a number-sign, thus: #mharea.

<h1>

These six elements are all headings. <h1> is is the largest heading,

<h2>

is large.

<h3>

is medium-large.

<h4>

Medium, but…

<h5>

and …

<h6>

seem too small for headings. Headings are block elements

<p>

Paragraph. This is how to declare your boilerplate. It is a block element.

“img” (image) is used to bring in a picture. Declaring the height and width will speed up page-loading. There is no terminating tag.

HTML Tags – (4) Tags for the mark-up of the target document. These are mostly inline elements; that is, they can be used within strings of characters, but <br />, the line-break is between the two categories.

<span>

is the generic inline element. “Inline” means it is not a block element; that is, it doesn’t automatically break to a new line before or after the string of characters. Any collection of properties can be applied to a string of characters by using <span> and </span>.

<a href="http://www.wickfordart.org/festival.htm">Wickford Art Festival</a>

Shown here as a full example, the <a> declares a hyperlink, which is also termed an “anchor” when used to position to a spot in the same document.

<b>

Bold text.

<i>

Italicized text.

<u>

Underlined text.

<br />

Force a line-break. The older form was <br>. There is no terminating tag.

HTML Tags – (5) These tags are for tables.

<table>

Begin a table.

<tr>

Begin a new table row.

<th>

Begin a table cell which is used for a header.

<td>

Begin a table cell which is used for data, or for any type of content..

Colspan and rowspan are attributes of the <th> and <td> tags.

“colspan” - Merge the current cell with the one to the right. Any number of cells may be specified.
”rowspan” - Merge the current cell with the one below it. Any number of cells may be specified.