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:
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>
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> - an element can contain one or more child elements (
<li> - elements with the same parent are known as siblings (the
<li>
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> 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.