(X)HTML Tutorial

Attributes

In (X)HTML, an attribute is a way of configuring an element to appear or behave in a certain way. The markup for an attribute is given inside the opening tag of its element, separated from the element name by a space. The attribute name is given along with a value, separated by an equals sign. A good example is the align attribute. Consider the following code:

Important: In (X)HTML the value of the attribute must be contained within quotation marks. This is not necessary in HTML, but it is good practice.


   <p align="left">Hello</p>
   <p align="center">Hello</p>
   <p align="right">Hello</p>

In the web page, these will produce:

Hello

Hello

Hello

Hint: use lower case for the names of attributes. The World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation. Newer versions of (X)HTML will demand lowercase attributes.

In discussion, the shorthand @attribute is often used to refer to the name of an attribute. Thus @align means "the align attribute".

Some elements can have multiple attributes. For instance, the <table> element might be coded as <table align="center" border="1">. This would create table aligned in the centre of the screen with a 1 pixel border around it, like this:

Table Cell Table Cell

Multiple attributes in the same element should be separated by a space.

Attributes are often used for styling the appearance of elements using a technique called inline styling. Essentially, this means that the styling information (like text alignment) is given in the same line of code as the element. A special attribute, @style, can be used to add inline styling in written CSS. For instance, the following lines of code will produce the same result (<h1> is a first-level heading element):


   <h1 align="center">Hamlet</h1>
   <h1 style="text-align:center;">Hamlet</h1>

The first line of code certainly looks to be simpler, but the second is more elegant in keeping styling information separate from the (X)HTML code. It is therefore debatable which should be used. In general, styling should be done using CSS, but this can occasionally be unwieldy or impossible. Hence styling attributes like @align are not yet fully deprecated. Another method of would be to use to redefine the browser's default styling of the <h1> element at the beginning of the document, using a CSS stylesheet rather than inline styling. If that is done, the content of <h1>Hamlet</h1> will automatically be centred. Instruction on using CSS stylesheets will be given later in this tutorial.