Basics of an HTML Web Page
A very brief introduction to the structure and content of HTML pages. Most versions of HTML are structured similarly with a simple set of requirements and common elements. Certain tags are mandatory, and once they are present a valid HTML page exists. All that’s left then is to add the content.
HTML Structure
An HTML web page has a specific structure and several mandatory elements as defined by the World Wide Web Consortium (W3C). The precise elements and their possible values depend on the HTML version that you are writing, and for the purposes of this article we’ll assume that it is HTML 4.01 Transitional.
A Basic HTML Web Page
All HTML web pages should have a Document Type Declaration (DTD) tag, an HTML tag, a head tag, a title tag, and a body tag. So a simple web page could look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Your Title</title> </head> <body> ... your content ... </body> </html>
Those tags should be included as a bare minimum, but additional tags are recommended. Such additional tags include the various META tags for the page description & keywords, and character encoding. Then in the content of the page itself paragraph tags and text formatting tags would be used, along with many other types of tags.
Basic HTML Tags
The Document Type Declaration (DTD) tag is
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
and that tells the user agent (such as web browser or search engine spider) what type of data this document contains. This is important because the user agent then knows how to interpret and render the code that it encounters.
This particular DTD specifies that the document is HTML that HTML version 4.01 Transitional is used.
The HTML tag is
<html>
and that signifies that the DTD has ended and the following markup should be interpreted as HTML as specified in the DTD. Simple really!
The head tag is
<head>
and that signifies that any information found between <head> and </head> tags is header information. The W3C says this about the head element:
“The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content.”
At a minimum you should include the title attribute in your head element by using the title tag:
<title>Your Title Here</title>
The title tells the user agent what the current document’s title is. No surprises there, then!
Once you have added all of the required attributes to your <head> element you should close it with </head>.
Next comes the body tag to signal the start of the body element (the main part of the document):
<body>
The W3C says this about the body element:
“The body of a document contains the document’s content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colours, graphics, etc…”
Once the content of the web page has been entered you close body the body element and the HTML element like so:
</body> </html>
And that’s basically how an HTML web page is made!