HTML Tags and attributes

Tutorial intended to introduce the HTML code basis to users that have never written a web site manually. Writing HTML code is pretty much writing tags, attributes and content. That's why we'll focus in explaining how a tag and it's attributes and contents are defined. Note that we'll also set the rules to write XHTML code compliant documents.

You may find a lot of tags, attributes and JavaScript codes in this tutorial but none of them are properly described. This is because the objective of this tutorial is to focus on the general syntax, not on the characteristics of each tag. To find a list of tags refer to this HTML tags list, where you can find links to descriptive resources about each tag in HTML, with it's respective list of attributes and events.

Elements and tags

HTML is composed by a set of elements that are the basis of its structure. Elements are designed to provide tools to authors and give special information that will be used to compute the final representation of it. This means that where a tag is defined in the HTML code, something will happen in the representation of that document, that may be visual or not.

Elements are composed by two tags: start tag and end tag (except for empty elements when the end tag is ommitted). Elements are not tags, elements are represented by tags in the code, but they are usually considered, erroneously, the same thing. Here is a basic example of an HTML b element with both start and end tags, and the content in the middle:

Note how the start tag is composed by the tag's name enclosed by "<" and ">" symbols. In the other hand, the end tag is declared exactly as the star tag but with a slash before the tag's name. Whatever falls in the middle of them is called content, but be aware that not all elements allow content (empty elements).

Each one of the 93 standard tags produces a specific result when the document is rendered (e.g., the HTML b tag produces bold text) allowing authors to format and/or insert information into documents. Every tag may have attributes and events that must be declared inside the star tag separated from the name and other attributes or events by a space. Its content is placed inbetween the start and end tags. Look at this generic example:

This code could be difficult to understand, so we'll replace the generic values by some common examples to make it friendly (see the presentation on the right):

Now we can see clearly the tag's name (a), the attribute and its value (href), the two events and their functions (onmouseover and onmouseout), the content (List of HTML tags) and the tag's closing (</a>). Note that the events as well as the attributes share a common syntax: The attribute/event's name is followed by an equal sign and the value enclosed by quotes.

As we strongly recomend you to write XHTML code compliant documents, you should always use lowercase names for tags and attributes (<tag_name> instead of <TAG_NAME>).

Attributes

Attributes give certain characteristics to a tag (e.g., height, width, color, etc.), sometimes very important, that will finally set how the tag must be interpreted. For example, the HTML a tag inserts a link in an HTML document (a way to go from the actual document to another resource, usually with a click), but the rel attribute establish which is the relationship between the actual document and the destination resource.

Even when many attributes are shared by many elements, each element has a default set of attributes according to the standard that's being used. To se the attributes that an element accepts, check the description for that element in our list of HTML tags

As we saw in the generic example every attribute must have a value and must be defined in the start tag. In this example we insert a full definition (with content and closing tag) of an HTML a tag with two attributes: "href" and "rel".

See how the attribute's name is followed by an equal sign and the value enclosed by quotes. This is how every attribute must be defined to be XHTML code compatible.

There also exist a type of attribute which value is boolean (True or False). This means that you can define this attribute by only writing it's name (not the equal sign nor the value), but as we are writing XHTML code, the correct way to define a boolean attribute is defining it's own name as the attribute's value.

In the next example we show an HTML button tag definition, compatible with XHTML code, with the attributes: "id", "disabled" (boolean) and "tabindex".

Events

Events are widely used in HTML documents as a way to associate HTML tags to scripts. In a simple way, scripts are client-side programs that perform some action and events are the things that occur that trigger scripts (e.g., the mouse pointer going over an element, the page ending it's loading, etc.). Read more about HTML events.

The syntax used to define an event is very similar to the attribute's syntax. In this example we show the HTML a tag, with the "href" attribute and the "onmouseover" and "onmouseout" events.

Note that the functions "start_funny_function()" and "stop_funny_function()" must be written in some client-side language, which will not be treated in our site. To read more about client-side scripts refer to this document about the JavaScript language.

The events availability depends on the tag used, which means that not all events can be used in every tag. To see which events are available for a specific tag see the description page of the tag from this HTML tags list. To see a complete list of all events in HTML see the HTML events document.

Content

The content of a tag is in most of the cases the piece of content affected by the tag's effect (e.g., the text rendered in bold style for the HTML b tag), and goes in between the start and end tags.

Because of their nature and functionality, not all the tags have content (e.g., the HTML img tag). These empty tags must be properly closed to make the document compatible with the XHTML code standard. There are two ways to close an empty tag: the first is by using a normal closing tag (</tag_name>) and the other is using a slash at the end of the start tag. See the examples:

Note that in the second case, the last slash is considered by older browsers as an unknown attribute for which it's ignored. This is why a space must always separate the last attribute from the slash.

The content of a tag may also be other tags or even pieces of HTML documents, although not all tags can contain other tags and some of them can contain only certain tags. As a general rule, inline elements cannot contain block level elements, block level element can contain inline elements, and block level elements can contain block level elements. This is a very general rule that have many exeptions but is ok to get a general idea. The acceptance of tags that can be contained varies from tag to tag. Take a look at this example:

Remember that to make your code XHTML code compatible you should respect the order in which the tags are opened and closed (i.e., the first tag opened is the last one closed).

As you continue with the tutorials you'll see which tags can be contained by others and which of them are inline and which block level.

Examples

Finally, we'll show some examples using simple tags. First we'll make a link to other page (HTML a tag), we'll render text in different styles (HTML b tag and HTML i tag), we'll insert an image (HTML img tag) and separate all the examples with line breaks (HTML br tag)

Code	View
Read more about the <a href="http://www.htmlquick.com/reference/tags/br.html">HTML br tag</a>.<br /><br /> This page is intended to introduce the <b>HTML tags and attributes</b>.<br /><br /> You should learn how to write <i>XHTML code</i> too.<br /><br /> <img src="http://www.htmlquick.com/img/links/button.jpg" width="88" height="31" alt="HTMLQuick.com logo" />	Read more about the HTML br tag. This page is intended to introduce the HTML tags and attributes. You should learn how to write XHTML code too.

Practice

We're going to build a nice paragraph with a link inside of it, so later we can change their properties.

The first step is to build the paragraph with its content. Paragraphs are inserted in HTML documents through the HTML p tag. We can do it as follows:

Now let's put the link inside of it, through the insertion of the HTML a tag. At the begining, we'll just place the tag with its content ("nice link") and no attributes or events:

As you may see, there is no link yet, so we should consider that adding an HTML a tag doesn't mean a link has been stablished (the "href" attribute does). We'll keep calling it like that because we know it will become a link soon or later.

This is the time where we start using attributes. The first attribute we're adding is "lang". With this particular attribute we're telling the procesing agent (browser, search engine robot, etc.) which language is this paragraph written in. The value for this attribute can be obtained from the list of Language codes.

There we go. We are now showing a piece of text and giving an extra hint about it. This type of attributes are most of the times hidden attributes, because we are not able to see them in traditional web browsers. However, many user agents use this information at some level (e.g. spoken browsers, commonly used by blind people, speak this text in english instead of the language of the document, for example, spanish).

Other attributes, like the one we're using next, are clearly visible. The "href" attribute works only in the HTML a tag and specifies a resource to which this document is making a reference to. It's value must be the address of the referenced resource, in this case, the HTML a tag's URL.

So far, we've learned to use tags and attributes in HTML documents. To end with this practice, we're adding an event.

Events are a jump beyond HTML, given that they're useless without a client-side language. Basicly, what an event does, is to trigger a program written in a client-side language. So, as this is an HTML tutorial, we'll limit to show how to trigger the script, not to build it.

In this example, we'll trigger two scripts named "do_something_click()" and "do_something_mouse_over()", in the same paragraph we've been using. The argument "this" will tell the script, which element it should affect.

The events we've picked up are "onclick" and "onmouseover". These events are triggered when the visitor clicks or passes the mouse over the content of the element. To check what other accions can trigger events, see this list of HTML events.

As we'll use this events in the paragraph, they will trigger the scripts when the visitor clicks or passes the mouse over the paragraph. To make it visible, we're using basic scripts to change the color of the text: red when the mouse passes over the text and green when it's clicked.

Congratulations! the practice is done. Get ready to take the next tutorial.

Bypass footer options Send to a friend