HTML Definition and Characteristics » Best Practices Web Design

Looking for the lessons? Get started!

The definition and characteristics of HTML.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

The internet is a great way to get on the net. — Senator Bob Dole

HTML stands for HyperText Markup Language. In essence, HTML adds "markup" to standard English text. "Hyper Text" refers to links — hyperlinks — that connect Web pages to one another, making the World Wide Web what it is today. By creating and uploading Web pages to the Internet, you become an active participant — a producer and not just a consumer.

Markup is not the same as code. Often, people incorrectly refer to markup as code, but code goes beyond the basic abilities of markup. With code, you can create programs, and make your web page more dynamic, while markup simply deals with the page's structure. So, if you want to impress your friends and relatives, refer to it as markup rather than code. — Ian Lloyd

HTML is, at its core, a file format. Microsoft Word uses .DOC files, your music player uses .MP3 files, and your browser uses .HTML files. A "Web page" is the same thing as an "HTML file." (Some older pages use .HTM as their file ending. That's old-fashioned and nothing you need to worry about.)

(Since HTML 2.0 (back in the Dark Ages of Web design), HTML has been an application of a more generic markup language, SGML. If you want to know more about SGML, Google is your friend. Me, I don't really want to know....)

An HTML page is, in essence, a document tree — a collection of elements (see below) that stack up, one atop another, to make up an entire page, from the opening DOCTYPE to the closing </html> tag. Ian Lloyd gives us a nice visual representation of such a document tree.

HTML was written for Web sites, and is the language understood by Web browsers such as Firefox, Chrome, Opera, Safari, and Internet Explorer. You can learn enough HTML to build a basic Web site in just a few hours (or less!). However, it takes much longer to learn to build sophisticated, CSS-driven Web sites with HTML, JavaScript, and other languages.

Ross Shannon breaks down the meaning of HTML as such:

"HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in. Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicized text, for example). HTML is a Language, as it has code-words and syntax like any other language."

Tag Tags are marked-up text strings. Web browsers use tags to interpret commands. Tags look like this: <body> While HTML 4.01 Strict doesn't care if tags and such are written in upper- or lower-case, it's best practice to use lower case lettering, as explained below.
Element Elements are complete tags, with an opening and a closing. Elements look like this:  . You can also get away with not closing some tags in an element in HTML Strict, but it's best practice to close them even if you don't technically have to. Towards that end, I'm not going to tell you what tags you can get away with not closing. (There are a few, such as <img> and  , that don't have closing tags. That's a different situation.)
Attribute Attributes are used to modify values of an HTML element. Elements can have multiple attributes. Attributes look like this in an element:

As my friend Tommy Olsson writes:

Beginners often use phrases like "alt tag", but this is incorrect nomenclature; alt is an attribute, not a tag. Tags are surrounded by <...>.

And designer Craig Cook notes the difference:

Tag: This is the base unit of HTML, and it marks the beginning of an element. Most tags have a matching counterpart to mark the end of an element, called its "closing tag." Element: An element is made up of an opening tag and a closing tag, and everything in between. The only exceptions to this are empty elements.

Tags are surronded by angle brackets: < and >.

When tags surround "tagged" information, you have an element. Like so:

<p>This is a paragraph.</p>

is the "start tag."
This is a paragraph. is the "content."
is the "end tag."

There are essentially three levels of tags in HTML:

text-level or inline tags such as and , which mark up text within a single text string;
block-level tags such as and <h1> that format block elements; and
page-level organization tags such as <body> that control the entire page.

It's considered best practice to use only lower case (not UPPER CASE or CAPITOL) letters in both your HTML and CSS codes. In part, this is because the majority of Web servers (the computers which store your Web pages) are case-sensitive. In practice, this means that a folder titled images is a different folder from one titled Images. Ross Shannon writes, When linking to pages or typing in URLs, you don’t want to have to remember the case of each letter, so if everyone uses small letters the problem goes away. Other best practices include: closing all elements with a </element>, except for the few tags that specifically do not require closing (<img> and <a> are the two most common examples of this); putting quotes around all attribute values; and not using deprecated elements and attributes such as , <center>, and <align>.