Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 2.4Attributes and elements

Part 2.4Attributes and elements

As discussed previously, each part of HTML is constructed as an element. Elements themselves can contain further elements. This means that a paragraph of text can also contain a piece of text which is contained in a bold typeface element as well as standard text in the paragraph.

Elements are rendered on the page according to their attributes. The beauty of the web is CSS. CSS allows the attributes to be stored in a separate file altogether and the elements simply reference these attributes. This means less copying of attributes for similar elements.

Element diagram


As discussed before, elements form the page. This is because elements are nested into each other from the root element (that is the first element of some tree of elements).

When that element is specified, in the case of a HTML document, it would be the element: <html></html>, it has some inner elements that contain the page itself. Without these inner elements, the page would simply have a blank HTML document.

The first node or child that appears within the element html is the head element.


Attribute means something that belongs to something. In XML based markup, this is precisely the case. An attribute is a piece of information that informs the XML parser (or browser) that an attribute has some belongings. These belongings are what define the element, they specify directly what the element looks like.

In HTML attributes represent information about an element. For instance, an image can have a width and a height specified on it. All elements can have inline CSS applied to it through the style attribute.

It is possible to define the attributes of an element such as, and in this case for an image, width and height using the following syntax:

<img src="myimage.jpg" alt="test" width="500" height="300">

The attributes src, alt, width, height are all attributes of the image. These define information about this image. Some attributes, such as src are required, whereas other attributes such as width, height and altIn HTML5 alt is required, however, previous generations of HTML do not specify a requirement. are not required.

Custom attributes can also be added, as of HTML5. Basic syntax defines how this is achieved:

<img src="myimage.jpg" alt="test" width="500" height="300" data-custom-attribute="MyAttribute">

Custom attributes are attributes defined by the user and are defined to the browser using the prefix data and seperated or split using a dash ( - ). Such attributes can be used in many ways on the front end, particularly with JavaScript.

In the next part of this tutorial, the differences between HTML and XHTML will be laid out.

Feedback 👍
Comments are sent via email to me.