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.
Table of contentsBypass table of contents
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:
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:
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):
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 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".
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.
Diseño y desarrollo: Latitud29.com