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.
Tags are the main element in an HTML document and give special information that's used to compute the final representation of a document. This means that where a tag is defined in the HTML code, something will happen in the representation of that document, sometimes visually and sometimes hidden.
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, events and content. All this information must be declared (in a generic way) as follows:
Since the XHTML code standard forces tags closing, a tag must always be closed (</tag_name>).
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.
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 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.
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.
Finally, we'll show some examples using simple tags. First we'll make links to other pages (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 /> See a complete list of tags at <a href="http://www.htmlquick.com/reference/tags.html">HTML tags</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. See a complete list of tags at HTML tags. This page is intended to introduce the HTML tags and attributes. You should learn how to write XHTML code too. 
|