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.
Let's start by looking at an example element from HTML:
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:
The closing tag is identical apart from the forward slash:
The angle brackets sit around the tag name (
), 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:
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:
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 (
is the parent in the above example)
- an element can contain one or more child elements (
are child elements in the above example)
- elements with the same parent are known as siblings (the
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
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.