What Goes Into a Web Page?
HTML has come a long way from its humble beginnings. However, despite the fact that you can use HTML (and its derivatives) for much more than serving up static text documents, the basic organization and structure of the HTML document remains the same. Before we dive into the specifics of various elements of HTML, it is important to summarize what each element is, what it is used for, and how it affects other elements in the document. This post provides a high-level overview of a standard HTML document and its elements.
Specifying Document Type
One attribute of HTML documents that is frequently overlooked is the Document Type Definition (DTD). This definition precedes any document tags and exists to inform client browsers of the format of the following content - what tags to expect, methods to support, and so forth. The <!DOCTYPE> tag is used to specify an existing DTD. The DTD contains all the elements, definitions, events, and so on associated with the document type. A DOCTYPE tag resembles the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
This tag specifies the following information:
- The documentâs top tag level is HTML (HTML).
- The document adheres to the formal public identifier (FPI) “W3C HTML 4.01 Strict English” standards (
PUBLIC "-//W3C//DTD HTML 4.01//EN"). - The full DTD can be found at the URL
http://xhtml1/DTD/xhtml1-strict.dtd.
The Overall Structure: HTML, Head, and Body
All HTML documents have three, document-level tags in common. These tags, <HTML>, <head>, and <body>, delimit certain sections of the HTML document.
The <HTML> tag
The tag surrounds the entire HTML document. This tag tells the client browser where the document begins and ends.
<HTML>
... document contents ...
</html>
Additional language options were declared within the <HTML> tag in previous versions of HTML. However, those options (notably lang and dir) have been deprecated in HTML version 4.0. The language and directional information is routinely contained in the document type declaration (<!DOCTYPE>).
The <head> tag
The <head> tag delimits the heading of the HTML document. The heading section of the document contains certain heading information for the document. The document’s title, meta information, and, in most cases, document scripts are all contained in the <head> section. A typical <head> section could resemble the following:
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
<title>Title of the Document</title>
<meta name="description" content="Sample Page">
<meta name="keywords" content="sample, heading, page">
<script type="text/javascript">
function NewWindow(url){
fin=window.open(url,"","width=800,height=600,scrollbars=yes,resizable=yes");
}
</script>
</head>
Most of the content within the <head> section will not be visible on the rendered page in the client’s browser. The <title> element determines what the browser displays as the page title - on Windows machines, the document title appears in the browserâs title bar.
The main, visual content of the HTML document is contained within <body> tags. Note that with HTML version 4.0, most attributes of the <body> tag have been deprecated in favor of specifying the attributes as styles. In previous versions of HTML, you could specify a bevy of options, including the document background, text, and link colors. The onload and onunload attributes of the <body> tag, as well as global attributes such as style, are still valid. However, you should specify the other attributes in styles instead of within the <body> tag, such as in the following example:
<HTML>
<head>
<title>Document Title</title>
<style type="text/css">
body { background:black; color:white }
a:link { color: red }
a:visited { color: blue }
a:active { color: yellow }
</style>
</head>
<body>
... document body...
</body>
</html>
Tags: body, document, dtd, head, HTML, tag, title, type
Related:
Posted in HTML, XHTML. 310 views
Responses are currently closed, but you can trackback from your own site.
