Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Elements of HTML
HTML is a means for structuring and formatting information delivered across the Internet. There are two primary high-level concepts of importance: the nature of the HTML document as seen by the Web browser on the client computer, and the structure of the HTML language itself.
The HTML Document: A Stream of Text
The Web browser receives the HTML document as a stream of text—content combined with markup instructions. Listing 1 illustrates how HTML combines content and markup instructions. The content consists of the labels and corresponding values, while the text contained within the "<" and ">" characters are HTML keywords that provide formatting instructions to the Web browsers.
Listing 1: An HTML Document Is Content Combined with Markup Instructions
<html> <head> <title>Example Web Page</title> </head> <body> <b>Year: </b>1976<br> <b>City: </b>Sunnyside<br> <b>State: </b>WA<br> </body> </html>
The HTML document often exists as a file, complete with HTML keywords, stored on a disk in the Web server's file system. This text stream is transferred over the network from the server to the client in response to a request. When the Web server software receives a request for the document, it reads the document from the file and sends it to the client as a stream of text. As the browser receives this text stream, it parses it for HTML tags to discover how to format the individual elements of the document.
This is the simplest scenario, but it is not always the case. Many of today's data-driven Web applications generate the HTML-formatted document stream dynamically at runtime, combining content, markup code, and scripts from different sources. The key point is that, regardless of how the text stream is generated, as long as the Web browser receives properly structured HTML, it can display the document correctly.
The HTML document itself is structured into two distinct parts: the head and the body. The next article on HTML coding guidelines explores the HTML document structure in more detail. In general, though, the head section contains information about the document, while the body section holds the meaningful content of the document.
The HTML Language: Elements and Their Attributes
Delimited by the "<" and ">" characters, HTML tags are specially formatted instructions that tell the browser to do something with a portion of the content—for example, to instruct the browser to apply certain typographical formatting or positioning to a paragraph when it is displayed. Most HTML tags are actually two tags: a start tag that instructs the browser to begin formatting the text stream and an end tag that tells the browser to stop applying the formatting. The two tags, along with the content that they delimit, represent an HTML document element.
The start tag of an element is written in the form <tag>. For example, the <b> tag instructs the browser to display everything that follows in a boldface font. The end tag is of the form </tag>. The leading slash character tells the browser to stop applying the format <tag> to the content. For example, the </b> tag would be used to tell the browser to stop using the boldface font to display content. In addition, certain tags can be nested to combine formatting characteristics (see Listing 2).
Listing 2: Example of HTML Tags
<html> <head> <title>Example Web Page</title> </head> <body> <p>Normal <b>Bold <i>Bold italics</i> Bold again </b>Normal again </p> </body> </html>
In addition, HTML tags often have optional attributes whose values specify additional information to the browser. For example, the tag to display a horizontal line across the browser window can be specified as <hr>, which will instruct the browser to display a horizontal line using the default width and color (that is, the default for that particular system). Alternatively, the tag could be specified with optional attributes, as <hr size="3" color="Red">, to instruct the browser to display a red, 3-pixel-thick horizontal line.
Conclusion
This article introduced the primary components of Web applications and HTML. The next article in this series explores HTML in more detail, presenting a number of coding and design guidelines that will help improve the maintainability and reusability of HTML code.