Attributes 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.
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
specified on it. All elements can have inline CSS
applied to it through the
It is possible to define the attributes of an element such as, and in
this case for an image,
height using the following syntax:
<img src="myimage.jpg" alt="test" width="500" height="300">
all attributes of the image. These define information about this
image. Some attributes, such as
whereas other attributes such as
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">
In the next part of this tutorial, the differences between HTML and XHTML will be laid out.