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.
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.
Attributes
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.
