Introduction

In the ancient times of the Internet, element attributes were important for styling the document with images, colors, font faces, font weight etc. With HTML 5, implemented in most major browsers by now, such formatting of HTML documents is preferably done using the so-called Cascading Style Sheets (CSS). The remaining or new attributes have a rather technical purpose, often of secondary interest to people looking at the web page presentation. Yet some attributes remain an important part of various elements necessary in building a web page. Attributes discussed next are: style, which is important for CSS style presentation, href and id. The latter two appear in navigation context.

Attributes

Attributes generally change the default rendering of the HTML elements by adding color, changing the position, and modifying functionality. An attribute consist of a name and a value, separated by an = character. In HTML 5 the attribute value can remain unquoted if it doesn't contain spaces or special HTML characters. However, when it comes to XHTML, attribute values must be typed in lower case and their values must be literals, which is achieved by enclosing them in parentheses. Attributes are always placed inside the start tag after the tag name. One element can contain several attributes separated by spaces.

Customized HTML

Let us consider a clickable label like this:

It is produced by inserting the following code snippet into the HTML 5 document body:

      <a href="#info">
         <button style="background-color:gray;
                         width:160px;
                         margin:20px auto auto 20px; padding:1em;
                         text-align:center; font-family:'Times New Roman';
                         border:0px none;"
         >
            <h1 style="color:white;">WORLD</h1>
            <h1 style="color:fuchsia;">of Colors</h1>
         </button>
      </a>
                

The snippet demonstrates the use of the style attribute and of the anchor/link attribute in the anchor element discussed more in detail next.

Style attribute

In our sample markup the style attribute is adding the margins and padding to the div element, the color to the background and text, and renders the default font family, whatever it is, to Times New Roman. The CSS syntax is discussed in detail in the CSS overview and here the reader is left to rely on the self-explanatory appearance of the markup. Though adding styles to individual elements via the style attribute can be handy it is not the most common way of applying the style sheets. Due to the importance of colors in a web page presentation it is worth adding how they can be implemented using the style attribute.

How to add the color

Some simple colors for use in web page development are in the table below. The numbers after the number sign form the so-called RGB (Red Green Blue) representation of the color. Such representation is useful if the basic colors in the table are not enough.

Table

The value of the style attribute adding color to the text is one of: color:colorname, cf. the sample markup, color:#xxxxxx, cf. the color table, or, instead of the number sign, it is possible to use color:rgb(xx,xx,xx). In other words, the style attribute values color:#000000 and color:rgb(00,00,00) produce the same color, black. The background color can be modified in a similar manner by replacing color by background-color; cf. the sample markup.

Anchor

The active link/anchor element <a></a> lets the user jump to marked locations within the current document or in a document specified by an URL (Uniform Resource locator) and therefore allows the programmer create hyperlinks in the document. It is worth mentioning that the active link turns the ordinary markup language into a hypertext document markup language, or HTML. In older markup, the 'true' nature of the <a>...</a> element is determined by the attribute following the a tag. The attribute name turns the a tag element into a target, href changes it into a link. The attribute name in the line

<h2><a name="chap1"> Chapter 1</a></h2>
		

makes the active link

<a href="#chap1"> ... </a>
		

added somewhere else in the same document jump, on click, to the h2 element with Chapter 1. Suppose, for the moment, that Chapter 1 is contained in a document named book.html, for example, and we want refer to Chapter 1 from a document named errata.html. This can be accomplished by adding in errata.html the link:

<a href="book.html#chap1"> ... </a>
		

Named anchors must not contain link anchors! Should an anchor serve as both named and linked, write both attributes in one item:

<a name="chap2" href="book.html#chap1"> ... </a>
		

In HTML 5, use of the name attribute is depreciated and we use the id attribute instead; cf. the above sample page. Let us recall that an HTML page must not contain two id attributes with the same value, i.e. the id uniquely determines the element. The interesting thing about the a element is, that it may contain entire paragraphs, lists, tables, sections etc. under the condition that it contains no other anchors.

Referencing media files

Interestingly, the href attribute of the anchor can refer also to images, audio files, send an e-mail or execute a Java Script code; see the following examples:

<a href="logo.jpg"> ... </a>
<a href="music.mid" type="audio/midi"> ... </a>
<a href="mailto:admin@nada.com"> ... </a>
<a href="javascript:myfunction()"; ... </a>
		

Opening a document in a new window

Often it is desirable that the referred page opens in a new browser window. That can be achieved using the anchor's onclick attribute:

<a href="#" onclick="window.open('http:...'); 
	return false;">...</a>
		

Summary

This page is discussing three essential HTML attributes, style, href and id. It indicates how to render the element's font family, font weight, font color, and background color, and how to make a hyperlink in an HTML document.

References

W3C Recommendation 26 January 2000, revised 1 August 2002, XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) , Retrieved 2013

W3C HTML 5, A quick introduction to HTML , Retrieved 2013

W3C HTML 5, The a element , Retrieved 2013