Home > Articles > Building Web Pages > HTML Basics

HTML Basics

What is a HTML Tag?

Hypertext Markup Language (HTML) is the language that all browsers use to render a page so that you can see it. Every HTML tag has a name by which it is identified, followed by an optional list of attributes, but all information relating to a tag is contained within angled brackets < >. The name of the tag usually gives a clue as to the purpose of it, with the attributes providing all the extra information needed to make the tag do what you want it to. Both tag names and attributes are case insensitive, so <img src="image.gif"> will work in the same way as <IMG SRC="image.gif"> - however the values of the attributes (those assigned to the attributes with the = operator) may be case sensitive.

Most HTML tags are containers, meaning that they have a start tag and an end tag - with the text between the two tags following the rules within that tag. One way is to think of such tags like switches; to make text bold you can switch it on with the <b> tag, write the text that you want to make bold, then, when you want to switch off the bold text you use a </b> to turn it off.

A few HTML tags however do not have end tags because they are used to add stand-alone elements on the page. The <img> tag is used to put a single image on the page, but because all the information needed to display it is contained in the attributes of the start tag, and they wouldn't affect the display of the text after it, it does not need an end tag.

As we have just said, attributes are used to extend or modify what the default tag does. A tag can have more than one attribute (or none at all), but they must be separated by at least one space although the order they appear after the tag name is not important. Most attributes take values that will determine the behaviour of the tag; sometimes the value will need to use quotation marks to "keep it together". Quotation marks are not necessary if the value contains only alphanumeric characters (a-zA-Z0-9) or the two special characters period (.) or hyphen (-). If it uses any other characters (including spaces and commas) then you should use the quotation marks. If in doubt, put your values in quotation marks - but make sure that you close them because missing quotation marks can cause a variety of problems!

Nesting HTML Tags

It is perfectly acceptable to want to apply different styles onto the same portion of text - however you should be aware that if you don't be careful you could get some disastrous looking pages! This is where nesting comes in. The idea is simple, when using two or more container tags, be sure that the tag you use second is opened and closed in the text between the first container tag. Here are some examples of nested code...

  • <b>bold with <i>italic</i> and <u>underline</u> can add emphasis!</b>
  • bold with italic and underline can add emphasis!
  • <i>you can <b>nest as <u>many</u> tags as you need</b></i>
  • you can nest as many tags as you need

To help me check which closing tag should go next, I work through the HTML code backwards until I find a container tag I haven't closed. This helps me to nest all my tags properly, which is particularly important when working with tables or frames.


Noticed a problem or got a question or comment?


This site will look much better in a browser that supports web standards, but it is still accessible to any browser or Internet device.


About this Page

Author: Rosemarie Wise
Originally Published: Fri 15th Dec, 2000
Last Revised: Sat 2nd Mar, 2002
URL: http://websiteowner.info/articles/pages/basics.asp

Want to use this article on your own site? Learn more...


The Web Site Owner's Resource © 2000-2007 Rosemarie Wise