Elements, tags and attributes

Elements and tags

The elements of the XHTML mark-up language are the ‘building blicks’ of web pages. They consist of tags. Every element contains a start tag and an end tag, and the contents inside the tags, e.g. a heading or a text paragraph. In the following example, <h1> is the start tag, ‘My Photo Gallery’ is the text, and </h1> is the end tag:

    <h1>My Photo Gallery</h1>

The tag <h1> shown in the example is used to mark a heading. Please note that elements can be inside each other, i.e. contain other elements. Example:

<h1> <a href="gallery.htm"> My Photo Gallery </a> </h1>

Attributes

The elements can have attributes that e.g. give the browser more information about the element. Attributes are written inside the start tag of an element, and they always have some value defined inside quotation marks. Different elements have different attributes that are specific for each type of element. Some attributes can be given to any element. The following example shows an image element with the file name of the image as attribute:

    <img src="dog.jpg" /> 

Please note that the start and end tags have been marked in the same bracket by writing / at the end of the tag.

Viewing an XHTML page with a browser

The following XHTML example contains a main heading marked with the h1 element, a paragraph marked with the p element, and a link marked with the a element. Please note the following things about the example, which are common for XHTML:

  • The tags denoting the start and end of an element are written inside angle brackets i.e. < and >. 
  • The start and end tags are always the same except for the / added to the end tag before the name of the tag. 
  • You can give additional information about an element with an attribute. The link target of the a element, for example, is given with the attribute href with the value in the form of the web page the link points to.
<h1>Hey world!</h1>
<p>
This is a simple text paragraph containing a
<a href="http://www.helsinki.fi">link</a>.
</p>

The XHTML mark-up shown above looks like this with the browser:

 

The box metaphor

It may be easier to understand the structure of the XHTML mark-up language if you imagine the elements as boxes and the text and other web contents as the contents of the boxes. Then:

  • The elements arrange the contents of web pages as separate ‘boxes’ 
  • Elements with different names are different boxes with different types of information 
  • The boxes may be inside each other, but they can never overlap partially 
  • The attributes are stickers with instructions on how to handle the boxes