basic html tags
by Workshop, 8 July 1998types of tags
There are two basic types of tags that are used in a HTML document (web page) - standard tags and container tags.
Standard tags are tags that simply embed something on the spot like an image, paragraph or horizontal line. Container tags are tags that enclose other HTML tags or text.
An example of a container tag is the bold tag <B> that will make all text between itself and it's closing tag </B> bold. Container tags are sometimes referred to as being "turned on" and then "turned off".
A tag is turned on by it's name, and turned off by it's name with a forward slash eg: <B> some text here </B>. The <BODY> tag is an example of a container tag. It tells the browser that everything between the opening <BODY> tag and the closing </BODY> tag is to be displayed in the browser window as the body of the web page.
attributes of tags
Standard tags and Container tags sometimes have what is called an Attribute. An attribute of a tag is a special keyword that is placed after the tag name and before the closing right bracket > of the tag. A tag may have more than one attribute. An attribute usually has a value associated with it that is specified after an = (equals) sign. If the value that is associated with the attribute is a sentence or a few words, then the value must be enclosed in double quotes ".
the document structure tags
The <HTML> tag is the highest level container tag which must be used in a HTML document. Everthing within a HTML document must be within the opening <HTML> tag and the closing </HTML> tag.
The <HEAD> container tag defines the general document information. The most common use for the <HEAD> section is to specify a page title with the <TITLE> container tag. <HEAD> and it's closing </HEAD> tag must appear within the <HTML> container tag and before the <BODY> tag.
The <BODY> tag defines the actual contents of the web page that are displayed in the browser's main window and is where the bulk of your HTML editing will occur. The <BODY> container tag must be used after the closing </HEAD> tag. The closing </BODY> tag must be used just before the closing <HTML> tag.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
the document content formatting tags
The paragraph tag <P> is used when you want to break elements of your document up into different paragraph blocks. For example, you could use the paragraph tag to break up a section of text into two separate paragraphs with the HTML code below.
| code | result |
This is the end of my first paragraph<P>This is the start of my second paragraph.
|
This is the end of my first paragraph This is the start of my second paragraph. |
As you can see, the tag is not visible in the resulting HTML page that is displayed by the browser, but the formatting that is described by the tag is applied to the document.
The line break tag <BR> is used in a similar manner to the paragraph tag described above, except that it does not insert a blank line between the elements that enclose it. You can think of this as pressing the enter key once in a word processor and starting a new line of text directly on the line below. An example code snippet using the line break tag is demonstrated below...
| code | result |
This is my first line of text.<BR>This text will appear on a new line directly below the
first line of text.
|
This is my first line of text. This text will appear on a new line directly below the first line of text. |
The horizontal line tag <HR> draws a horizontal line on your web page. Some example code using this tag is shown below...
| code | result |
<HR>
|
|
The bold text tag <B> is a container tag that is applied to text that is "contained" within the bold begin tag and the bold end tag. You use the opening tag <B> to turn bold "on" and you use the closing tag </B> to turn bold off. An example HTML code using the bold tag is shown below.
| code | result |
The quick brown fox <B>jumped over the </B>lazy dog.
|
The quick brown fox jumped over the lazy dog. |
The opening and closing tags have been removed from the page that is displayed and the formatting defined by the tag has been applied to the appropriate section of the web page.
The italic text tag <I> is a container tag that is applied to text that is "contained" within the italic begin tag <I> and the italic end tag </I>. An example using the italic tag is shown below...
| code | result |
The quick brown fox <I>jumped over the</I> lazy dog.
|
The quick brown fox jumped over the lazy dog. |
lets use them all!
The tags above may be a little confusing when used out of context, so lets use them all together in one web page (HTML document)...
| code | result |
<HTML>
|
The quick brown fox jumped Did you know that the quick brown fox could jump really high |