HTML Structure – Engineering Technology Services

Overview

HTML (HyperText Markup Language) files are, basically, just simple text files that you could create in any text editor. But to be displayed correctly on the World Wide Web, an HTML document must be structured correctly. Any variation from this structure will cause many web browsers to show the content incorrectly or not at all. Also, all HTML documents must have a suffix of “html” for the HTML code to be viewed correctly by a web browser.

The rule-making body of the Web, the people who determine what this stucture is, is the World Wide Web Consortium (W3C). Web browsers are supposed to follow these standards as close as possible. For the most part they all do well, but some browsers fall quite short of this goal (Internet Explorer being the worst culprit). Nonetheless, it is best when you are creating a web page to follow the current web standards. This will ensure your site is viewable in as many browsers as possible. All HTML instruction on this ETS site follows the W3C standards.

Example

<!DOCTYPE HTML>

	<html>

	<head>

	<meta charset=utf-8">

	<title>A Simple HTML Example</title>

	<style>

	p {text-align:center;}

	</style>

	</head>

	<body>

	<h1>This is a header</h1> 

	<p>This is a paragraph, centered on the page.</p> 

	<p>And this is the second paragraph with <strong>bold text</strong>.</p>

	</body> 

	</html>

This code generates a page that looks like:

In the above example, you can see the use of tags which are an essential part of an HTML document. An HTML tag consists of a left angle bracket (<), a tag name (such as "h1") and a right angle bracket (>). Tags are usually paired so that you have a tag at the beginning and the end of a section of the document (<h1> and </h1> for example.) All end tags look identical to the beginning tag except a slash (/) precedes the tag name within the brackets. A pair of tags delineates where the tag's effect should begin and end on the page. The current web standard from W3C suggests that all tag names be lowercase.

Attributes

Some tags may also include an attribute, which is additional information that is included only within the start tag. Attributes are specific to each tag, although there are many similarities. Some tags must have an attribute to function properly. An example of an attribute is shown in the first paragraph tag shown in the example above (<p align="center">.) The web standards suggests that all attribute parameters be contained within quotes. For example, it is not correct to have this: <p align=center>

Closing Tags

Also, all nested HTML tags must be ended in the reverse order they were created. For example, this is incorrect: <h1><b><i>This is a bold and italic header</h1></i></b> Because the <h1> tag was created first, it must be closed last and since the <i> tag was created last, it must be closed first. All of the tags must open and close within each other like a set of Russian nesting dolls.

Here is the correct example: <h1><b><i>This is a bold and italic header</i></b></h1>

Tag Placement

Within a web page, some HTML tags are required for the page to be displayed correctly. These tags are <html>, <head>, <title> and <body>. The <html> tags must begin and end the document and the <head> tags must appear before the <body> tags. Also, the <title> tags must be within the <head> tags. A simple explanation of each of these tags follows:

<html> This tag and its end tag must be the first tag (after the Doctype) and the last tag in your document. It tells the browser that everything within these tags should be viewed as HTML-coded information and should be parsed accordingly by the browser.
<head> This tag and its end tag sets apart the section of your document that will not be visible on your web page but helps the browser in working with the document. Many different tags can be placed within the <head> tags, but in our example above we only have the required tag, <title>.
<title> This is an identifier for the overall content of a document. This is not displayed within your web page, but (usually) at the top of your browser application's window titlebar. For example, this web page's <title> is "ETS - HTML Basics - Structure" as you can see by looking at the titlebar of this browser window. This title is also displayed in a browser's history and bookmarks, so it is best to be descriptive with this tag so that it will understandable out of context.
<body> This tag contains all elements of your document that will appear within a browser's window. This is the content of your document and is where the majority of HTML tags will be placed.

There are many more HTML tags that you will use to create your web page, but these four must always be within your document and ordered in the manner shown in the example above.