Understanding Elements, Tags, and Attributes

HTML code is composed of elements, tags, and attributes. An HTML document is composed of a hierarchy of elements. An element is the basic component of HTML documents—elements can include the HTML document itself, head and body elements, a title element, heading and paragraph elements, hypertext links, inline images, and much more. Elements are delimited or indicated by tags, with a start tag marking the beginning and an end tag marking the end of an element. An element's start tag can also contain attributes that indicate additional characteristics or properties for an element.

What Is an Element?

There are two basic kinds of HTML elements: container elements and empty elements. A container element is composed of two codes, a start tag and an end tag, which can bracket text or other elements. An empty element (also called a standalone element) is composed of a single tag, which does not bracket text or other elements. HTML elements can also contain attributes that can further elaborate or define their purpose or function.

HTML elements can also be distinguished in two additional fashions: as being either block elements or inline elements. A block element is displayed in a browser as a separate "block" in an HTML document, separated by line breaks and vertical spacing from other elements. An inline element is displayed inline, or at the point of insertion, without line breaks and vertical spacing separating it from surrounding text. In HTML, block elements are used to indicate headings, paragraphs, block quotes, lists, horizontal rules, and so on. Inline elements are used to indicate bolding, italics, monospacing, hypertext links, inline images, and so on. Inline elements are always nested inside of block elements, but block elements are never nested inside of inline elements.

What Is a Tag?

HTML elements are defined by HTML tags—in the form of either a pair of tags (start and end tags) that define a container element or a single tag that defines an empty element. An HTML tag is inserted into a document between less than (<) and greater than (>) characters (also referred to as left or right angle brackets). For instance, a start tag of a container element (or the single tag composing an empty element) looks like this:

<tagname>

To distinguish a container element's end tag from its start tag, a forward slash (/) is inserted in front of the tag's name:

</tagname>

To mark a section of text as forming an element, you bracket it inside a start tag and an end tag, like this:

<tagname>element content</tagname>

For instance, text contained in a level-one heading tag looks like the following, where <h1> is the start tag and </h1> is the end tag:

<h1>This Is a Level-One Heading</h1>

It is common to refer to HTML elements as "tags." However, except in the case of an empty element, that can be misleading. An HTML container element is not just the tags that delimit it, but also the content that is nested between the start and end tags. In the previous code example, for instance, the H1 element is composed of the <h1> start tag, the nested text ("This is a Level-One Heading"), and the </h1> end tag.

An empty element, on the other hand, is inserted as a single tag that does not bracket any content. In that case, the tag and the element are one and the same thing. For instance, the following shows an HR (Horizontal Rule) element, which is an empty element, inserted above an H2 (Level-Two Heading) element, which is a container element:

<hr>
<h2>The Meaning of Life</h2>

Note

Some elements, however, look like empty elements, but are actually container elements that have impliedend tags (with the end to the element being implied by the start of another element). That is because for some container elements, including the end tag is optional. This will be clearly noted when you get around to learning about using these kinds of elements.

What Is an Attribute?

An attribute is an additional value, characteristic, or property that can be assigned to an element. An attribute is included within the actual tag (between the left and right angle brackets), either within a start tag or an empty (standalone) tag. End tags can't contain attributes. You will be working in this session with several examples of using attributes in HTML elements.

While there are a few standalone attributes that can be inserted without values, most attributes are inserted into an element's start tag as a name/value pair.

attributename="value"

Attributes can be used to modify how an element is treated or displayed by a browser. For instance, the SRC (Source) attribute is used in the IMG (Image) element to indicate the source of the image:

<img src="myimage.gif">

Note

Tag names and attributes in HTML are case-insensitive, so you can type them in either lowercase or uppercase. XHTML 1.0, the new XML-version of HTML, however, requires that all element and attribute values be typed in all lowercase. In this book, all element and attribute names in the code examples are presented in all lowercase. In HTML, the placing of quotes around attribute values is often optional, but XHTML requires that allattribute values be quoted. In this book, all attribute values are quoted.

Nesting and Overlapping

Except for the root element (the HTML element), all elements are contained within other elements. The containment of an element within another element means that its start and end tags are contained, or nested, within the start and end tags of the bracketing element. You should always nest the tags defining HTML elements, and never overlap them. For instance, always do this:

<b><i>Always nest tags inside each other.</i></b>

Notice that the <i>...</i> tag pair is nested within the <b>...</b> tag pair. Never overlap element tags, so that the start tag is inside, but the end tag is outside, of another element, like this:

<b><i>Don't overlap tags like this.</b></i>

HTML operates in a hierarchical, top-down manner. An HTML element can bracket other elements or be nested within another element. If you overlap two tags, a browser can't tell what falls inside of what, and the browser might not be able to display your page correctly, or at all. This can be especially true when using styles, for instance, which can apply additional display characteristics to HTML elements—however, if an element is not clearly demarcated, it may not be clear what is or is not encompassed by the element.