Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Elements and Attributes

Last updated Oct 17, 2003.

By Molly Holzschlag

One thing that even many experienced Web designers and developers don't get exposed to is a proper understanding of the syntax of HTML and XHTML because most Web designers and developers were not formally educated in these languages (and, of course, the languages themselves have been in a state of flux for the majority of our careers). As a result, we haven't really learned the grammar of the languages with which we work.

An element in HTML and XHTML is a tag or tag set that is used to mark up content or provide some kind of direction to the browser. When we refer to elements, we are referring to the entire tag or tag set plus any content within that element.

There are a variety of element types, including the following:

  • Empty Element. An empty element does not contain content; for example, <img> or <br />. Although at first glance it seems that an image has content, from a programmatic perspective, it does not—the image is an object separate from the document. Content is therefore considered any actual text or characters that are for display, not external objects.

  • Non-Empty Element. A non-empty element is any element that contains content. So, if I wrote <p>Hi, this is Molly!</p>, the element is the tag set (<p> . . . </p>) and the content within the tags.

  • Inline Element. An inline element is an element that displays without a carriage return. Examples include the anchor element, the image element, the span element—anything that you can use in a line without forcing a line break.

  • Block Element. A block element displays as a block, forcing a line break. Block elements include list items, paragraphs, headers, and so on.

NOTE

The distinction between empty and non-empty elements becomes important in XHTML because all empty elements must be terminated with a trailing slash (as in <br />), and all non-empty elements must be contained with a closing tag (as with paragraphs and list items). In HTML, these guidelines are not required. Inline and block elements become distinctively important in the context of CSS because you can actually modify the presentation of these elements, turning an inline element into a block element, and vice-versa. This technique is often used to create horizontal lists for navigation and similar techniques, proving that what is structural is not necessarily tied to what is presentational.

A tag refers to the component of the element; for example, <p> or </p>. Many people confuse the term element and tag. An element always has a tag or tag set, whereas a tag is specifically a tag.

Finally, an attribute is used to add information to the opening tag within an element. Attributes tend to be presentational in nature, such as with <p align="center">. However, not all attributes are presentational, such as the class and ID attributes used in well-structured, styled documents: <p class="small">.