Go to main content
Bypass navigation bar HTML Reference HTML Tags HTML Tutorials
Bypass language selection
Bypass location bar

Location: Home > HTML Tutorials > HTML Tags and attributes

Bypass main content

HTML Tags and attributes

This tutorial is intented to introduce the HTML code basics 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 on how a tag and it's attributes and contents are defined. Note that we'll also set the rules to write XHTML compliant documents.

Bypass main content

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  give special information that will be used to compute their final representation. 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 where 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 strong element with both start and end tags, and the content in the middle:

Code
<strong>Text with a strong emphasis</strong>
View
Text with a strong emphasis

Note how the start tag is composed by the element's name enclosed by "<" and ">" symbols. In the other hand, the end tag is declared exactly as the start 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 elements produces a specific result when the document is rendered (e.g., the HTML strong element provides more importance to it's content which is usually rendered in bold style) allowing authors to format and/or insert information into documents. Every element may have attributes and events that must be declared inside the start 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:

Code
<tag_name attrib1="val1" attrib2="val2" ... event1="funct1" event2="funct2" ...>Content</tag_name>

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 bottom):

Code
<a href="../reference/tags.html" onmouseover="this.style.color='white'" onmouseout="this.style.color='black'">List of HTML tags</a>
View

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 closing tag (</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 an element (e.g., height, color, relationship, etc.), sometimes very important, that will finally set how it must be interpreted. For example, the HTML a element 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 establishes 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 see 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 element with two attributes: "href" and "rel".

Code
<a rel="help" href="anotherdoc.html">Another document providing help</a>
View

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 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 element definition, compatible with XHTML code, with the attributes: "id", "disabled" (boolean) and "tabindex".

Code
<button id="okbutton" disabled="disabled" tabindex="3">Ok</button>
View
Pages:123>

Diseño y desarrollo: Latitud29.com

Links and logos|Contact|Beyond HTML|Tools and resources|Sitemap|Webmaster|Donate