martin2k

How HTML Works - Introduction; Tags

HomeForumTutorials Tags:
 
 

Contents

Introduction

Tags

Attributes and Values

Text

Comments

Creating a Simple Web Page

Tag Reference

Introduction

HyperText Markup Language (HTML) is the most used of all the markup languages.  It is used to define documents used on the world wide web (WWW).

The term 'HyperText' means that it is possible to jump to another document using embedded links - usually by clicking on them with the mouse.  'Markup' means that the documents are made up of tags, which define items on the page such as images and tables as well as the way text is displayed.  The tags are invisible to the user - only the effects of the tags are seen.

Put together, web pages can be created with many multimedia elements (if supported by the user's browser), with links to any other page available on the WWW.

Playing a video at YouTube
Playing a video at YouTube

Web page documents can be written manually with a text editor such as Notepad or using a specially written HTML editor program such as Macromedia Dreamweaver or Microsoft FrontPage.

The main components of HTML are Tags, Attributes and Values, Text and Comments.

Later on, you will find out how to create a simple web page using all of the above components.

Tags

Tags are probably the most important part of HTML.  They are used to define items on the page as well as specify how text appears.  There is a tag for almost every purpose e.g. the IMG tag defines an image, the A tag defines a hyperlink, the TEXTAREA tag defines a multiline textbox for use as part of a form etc.  There are about 94 tags - however not all browsers will have support for every tag.

Defining Tags

Tags in HTML documents are surrounded with the '<' and '>' characters to allow the browser to recognise them as tags.  Many tags have to be closed i.e. where their effect is ended.  Tags are closed in the same way in which they are opened except that you must use the '/' character before the tag name.  An example would be the B tag, which causes text to render as bold:

<b>This text will render in bold</b>

Which generates:

This text will render in bold

Any text before the opening <b> tag and after the closing </b> tag will not render in bold.

When using a tag that does not have a closing tag, a space and a '/' character should be used before the '>' character e.g. <br />.  However this is not absolutely necessary.

Nesting Tags

An important feature of HTML is that different tags can be used within each other (called nesting) to combine the effect of two or more tags.  E.g.:

<b>This text will render in bold <i>and this text will render in bold and italic</i></b>

Which generates:

This text will render in bold and this text will render in bold and italic

As you can see with the above example, the tag that is opened first, in this case B, must be closed last.  Nesting tags is also used where tags are related i.e. when defining cells and rows in a table.

Necessary Tags

Certain tags must be used when writing an HTML document.  The HTML tag must be defined first, which defines the page as being an HTML document.  Within this tag, the HEAD tag is defined to define information about the page such as the author and title etc.  All the visible parts of the document are contained within the BODY tag (after the HEAD tag has been closed).

Therefore the basic layout of an HTML document looks like this:

<html>
  <head>
    (meta information)
  </head>
  <body>
    (visible information)
  </body>
</html>

See the Tag Reference to find out what tag to use to generate a specific effect.

Many tags have attributes, which can be changed to alter the effect of the tag.  For example the WIDTH attribute of the IMG tag specifies how wide the image should be.  See the next section for how to use attributes.


Next - Attributes and Values; Text; Comments


blog comments powered by Disqus

Archived Comments

From: seszer
Date: Monday, July 14, 2008 at 19:23:51
Comments: Html Attribute for <MARQUEE ...> -- Marquee Slide Image and Text ---
http://html-lesson.blogspot.com/2008/06/marquee-slide-image-text.html
 
From: james
Date: Friday, February 9, 2007 at 06:49:08
Comments: very good information gives about html tags

© Martin Allen 1999 - 2011.  Last updated Sunday 07 August 2011 01:01:48 AM +0100.