Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Element

Summary

An element is a part of a Web page or document. In XML and HTML, an element might contain a data item or a piece of a Web page such as a chunk of text or an image. A typical element includes an opening tag, attributes, content and a closing tag.

In depth

Let's start by looking at an example element from HTML:

<a href="https://developer.mozilla.org">MDN</a>

This is an anchor element, commonly known as a link. In this case the visible text is "MDN" - clicking the text will take the visitor to the MDN site, using the address listed as href attribute in the opening tag.

This element includes:

  • an opening tag
  • one attribute
  • some text content
  • a closing tag

Some elements are self-closing, which means that only the opening tag is required.

Some elements don't include any attributes, while others include lots.

The content of an element may be - more elements!

In its simplest form, an opening tag has the following structure:

<a>

The closing tag is identical apart from the forward slash:

</a>

The angle brackets sit around the tag name (<a>), which indicates what type of element we are dealing with. The type of element lets the browser (e.g. Firefox) know how to handle the data included in the various parts of the element (i.e. the content and attributes).

When it encounters an anchor, a Web browser will typically display the content of the element and take the user to the location indicated as href when they click on it. Other types of element are handled differently - and browsers sometimes vary in how they process and present the variety of elements.

If the element has any attributes they will be listed before the closing angle bracket of the opening tag - as in the opening tag from the example above:

<a href="https://developer.mozilla.org">

After the opening tag comes the element content. In the case of an anchor, this is whatever you want visitors to click on in order to visit the link ("MDN" text in the above example, but could be an image).

Take a moment to note the structure of the attribute:

href="https://developer.mozilla.org"

The attribute name href is followed by an equals sign and the attribute's value, which is enclosed in quotes. Attributes are used to provide additional information about the data in an element - in the case of HTML this information will often affect how the browser handles the element.

Elements can contain other elements:

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

In this case we have an unordered list containing three list items. This is known as a nested, or tree structure. As you can imagine, as a document gets longer, the nested structures branch out like a tree:

  • an element has only one direct parent (<ul> is the parent in the above example)
  • an element can contain one or more child elements (<li> are child elements in the above example)
  • elements with the same parent are known as siblings (the <li> elements are siblings to one another)

Let's finally look at an example of a self-closing element:

<img src="picture.png" alt="picture"/>

This is the standard way to include an image in a Web page. The <img> element includes attributes indicating the name (and location) of the image file to display (src attribute), along with alternative text to display if the image is not available (alt attribute). The forward slash before the closing angled bracket closes the element, so no closing tag is required.

When a Web browser encounters the image element, it will attempt to fetch the file listed as src attribute and present it within the page, showing the alt text if the image can't be fetched. So again you can see how the attributes determine what the browser does when it encounters the element.

You will encounter lots of other element types when you explore (and create!) Web content - have a look at the HTML Element Reference for an overview.

Know more

General knowledge

Technical reference

Learn about it

Document Tags and Contributors

 Contributors to this page: teoli, klez, SueSmith
 Last updated by: klez,