HTML Hyper Text Markup Language: Basic HTML Tags

HTML Tags

• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like and
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, means the same as

The Opening Tag

The Opening Tag consists of an angular bracket < followed by a tagname and then completed with a closing angular bracket >.

Let\'s pretend the tagname of the tag we want to use is EXAMPLE. We would code the EXAMPLE Opening Tag like this:

The Tag Attribute(s)

A Tag Attribute lets you help define the tag it resides in more precisely and allows you to specify more functions within the same tag:

ATTRIBUTE=>

The Value

Values can be a number or a word depending on which attribute you are using:

ATTRIBUTE="VALUE"

An Opening tag consists of a Tagname, Attribute(s) and a Value for each Attribute(s). Now our Opening Tag is complete, so we can close it off with the \'other bracket\':

ATTRIBUTE="VALUE">

The Text Or Image To Affect

Now that we have the Opening Tag complete, we need to give the Opening Tag something to actually work on. We do that by defining some text, or perhaps a graphic WITHIN the Tag:

ATTRIBUTE="VALUE"> Text we want to affect here

The Closing Tag

All that remains now is to finish it off by adding the Closing Tag. This tells the browser to stop creating the effect we defined in the Opening Tag. A Closing Tag consists of a bracket, a forward slash (not a backward slash), the tagname and then the \'other bracket\', like this:

So, here is our complete example tag:

ATTRIBUTE="VALUE"> Text we want to affect here

Combining Tags With Several Attributes

Learning to properly COMBINE Attributes is extremely important! Let\'s use the tag to illustrate the way you combine attributes into a single tag.

What happens when you want black text, slightly larger than normal, displayed in Arial, on your page? (Don\'t worry, these attributes are discussed in detail in another tutorial)

This is how most beginners will code this scenario:

SIZE="4"> FACE="Arial"> COLOR="#000000">testing the tags and attributes

Bzzzzztt...WRONG!!!!!... thanks for playing...

As you can see each attribute was given it\'s own Opening and Closing Tag. All this will do is give you a zillion Closing Tags and confuse your poor browser. What you SHOULD do, is COMBINE all of the attributes into ONE tag like this:

SIZE="4" COLOR="#000000" FACE="Arial">testing the tags and attributes

All you really need to do is take all the Attributes and Values and nest them inside ONE Opening Tag. The order of the attributes is up to you. As long as you have them all set with the correct values, in quotes, it will work just fine!

Nesting Tags Properly

Nesting Tags is simply the process of applying more than one tag to the same block of text or object.

Let\'s take a simple font tag for example:

SIZE="2">Nesting the Tags

Here is how it looks on your page:

Nesting the Tags

Now let\'s say we want to have that text appear bolded. We have to add the Bold Tag set around the text we want to affect:

SIZE="2">\'Nesting the Tags\'

Here is how the newly bolded text will appear on your page

\'Nesting the Tags\'

Now let\'s add a third tag to our text. Let\'s display our text in Italics by adding the Italics Tag set to our text:

SIZE="2">Nesting the Tags

Now our text will be displayed like this:

Nesting the Tags

Learning how to properly nest multiple tags around one block of text or an object is crucial to successfully coding your web pages.

If you look at our final example above, the opening tags have been put in a certain order and the closing tags ALL appear in the EXACT OPPOSITE ORDER. For example:

[text or object here]

Making sure you have your multiple tags nested properly takes a little getting used to, but if you get into the habit at the very beginning it will become second nature to you in short order.

Basic Open and Close Tags

The majority of HTML tags do require both an open and a close tag (a begin and end tag). Most are very easy to understand because the tag is obvious. Here are a few and what they do to text:

Basic Single Tags

The open and close tag format dominates the majority of the available HTML tags, but there are tags that stand alone.

Examples