Break Down the Elements of HTML5

Elements are the building blocks for HTML. You use them to describe each piece of text on your web page. Elements are made up of tags and the content within (or between) those tags. In HTML, there are two main kinds of elements:

• Elements with content made up of a tag pair and whatever text sits between the opening and closing tags in the pair

• Elements that insert something into the page, using a single tag

Tag pairs in HTML

Elements that describe content use a tag pair to mark the beginning and end, with everything in between representing the element content. Tag pairs begin with an opening tag, followed by some content, and end with a closing tag, like this: .

Content — such as articles, asides, paragraphs, headings, tables, and lists — always uses tag pairs, where

• The opening tag () tells the browser, “The element begins here.”

• The closing tag () tells the browser, “The element ends here.”

Actual content is the stuff between the opening and closing tags.

Single tags

Elements that insert something into a page are called empty elements (because they enclose no content) and use a single tag, like this: . Images and line breaks insert something into an HTML file and use a single tag (empty element) — namely, and
, respectively.

In HTML5, empty elements don’t require special treatment. In an earlier version known as XHTML (based on the XML markup language), empty elements are required to end with a slash just before the closing angle bracket, so in HTML5 (and HTML4, for that matter) would be written as .

For backward compatibility with HTML4, this would often be written as because that space preceding the slash enabled older browsers to recognize the element properly even if they didn’t parse the markup as XHTML. You may encounter the extra space and the closing slash in pages you look at, so don’t let it bother you. These contortions no longer apply in HTML5.

For example, the element references an image. When the browser displays the page, it replaces the element with the file that it points to. (An attribute does the pointing.)

However appealing the concept may seem, you can’t make up your own HTML elements. Legal elements for HTML belong to a very specific set — if you use elements that don’t belong to that set, the browser simply ignores them. The elements you can use are defined in the various HTML specifications. (The HTML5.1 specification can be found on the W3C Working Draft page.)

Nesting markup

Some HTML page structures can contain nested elements. Think of them as suitcases that fit neatly inside one another. For example, a bulleted list uses two kinds of elements:

• The

  element specifies that the list is unordered (bulleted).

• The

element marks each item in the list. (The li stands for “list item.”)

When you combine elements using this approach, you must close all inside list item elements before you close the unordered list element, like this:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>