HTML Elements

Previous sections have used discussed HTML tags and attributes, but a tag has not yet been formally defined.

What is an HTML Tag?

HTML has a set of rules when it comes to using a tag, and not every tag can be used everywhere in an HTML document. An HTML tag is always lowercase and at a minimum has a name. The simplest tag HTML has to offer is the <br> (line break) tag, which forces the following text to start on a new line:

<br />
A single line break tag

Line break is an example of a tag that doesn't have any content: it is meaningful by itself. These tags are called empty tags, and the slash at the end of the tag tells the browser not to look for any content associated with that tag. Most tags, however, do have content. For example, the header tags:

<h1>This is a large header</h1>
A single header tag with content

Tags that have content are divided into three parts: a start tag, the content, and an end tag. In the previous example, <h1> is the start tag, "This is a large header" is the content, and </h1> is the end tag. The end tag lets the browser know when to stop applying content to that tag.

Tag Attributes

A tag can also have attributes, such as the anchor tag's href attribute:

Click to view Live Example

<a href="http://spanglerco.com">Look, a link</a>
A link with an href attribute

Attributes always appear in the start tag, but empty tags can also contain attributes (such as <img>). Tags can also have multiple attributes separated by spaces, but can only have each attribute at most once (a link cannot have two destinations).

HTML Elements

All of these concepts combine to form the definition on an HTML element. An element is a tag, its attributes, and its content, including both the start tag and the end tag (if there is one). A tag's content can include other elements (such as list items in an unordered list), allowing HTML documents to describe a nested structure such as tables in a later section. Nesting elements also allows for formatting such as bold and italics. Formatting is the topic of the next section.

Click to view Live Example

<p>Nesting elements also allows for formatting such as <b>bold</b> and <i>italics</i>.</p>
Example a nesting elements using formatting