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 > Page 2

Bypass main content

HTML Tags and attributes (page 2)

Pages:<123>
Bypass main content

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.

Code
<a onmouseover="start_function()" onmouseout="stop_function()" href="reference.html">Go to the reference</a>
View

Note that the functions "start_function()" and "stop_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 element. To see which events are available for a specific element see the description page of the element from this HTML tags list. To see a complete list of all events in HTML see the HTML events document.

Content

The content of an element is in most cases the piece of content affected by the tag's effect/information (e.g., the text inside an HTML strong element is, in most browsers, rendered in bold style and aquires more importance than regular text) and goes in between the start and end tags.

Because of their nature and functionality, not all the elements have content (e.g., the HTML img element). These empty elements 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:

Code
<img onmouseover="start_funny_function()" src="logo.jpg" alt="Company logo"></img>
<img onmouseover="start_funny_function()" src="logo.jpg" alt="Company logo" />

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, even when not required by the standard, a space should always separate the last attribute from the slash (only for backward compatibility).

The content of an element may also be other elements or even pieces of HTML documents, although not all elements can be nested and some of them can contain only certain elements. As a general rule, inline elements cannot contain block level elements, block level elements 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 elements that can be contained varies from element to element. Take a look at this example:

Code
<p>This tag contains an <strong>inline tag</strong>.</p>
<div>
<div>Here we have a block level element containing another block level <span>element that is containing other <em>inline elements</em></span>.</div>
</div>
View

This tag contains an inline tag.

Here we have a block level element containing another block level element that is containing other inline elements.

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 give importance to the text (HTML em tag and HTML strong tag), we'll insert an image (HTML img tag) and separate all the examples with line breaks (HTML br tag)

Code
Read more about the <a href="../reference/tags/br.html">HTML br tag</a>.<br />
This page is intended to introduce the <strong>HTML tags and attributes</strong>.<br />
You should learn how to write <em>XHTML code</em> too.<br />
<img src="http://www.htmlquick.com/img/p/link-to-us/button.jpg" alt="HTMLQuick.com logo" width="88" height="31" />
View
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.
HTMLQuick.com logo
Pages:<123>

Diseño y desarrollo: Latitud29.com

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