Common HTML TAGS

Now we are going to take a look at some of the more Common tags that you will encounter:

Headline
Paragraph
comments

Headings

The heading structures are most commonly used to divide sections of text.

There are six levels of heading (from H1 to H6) and by default browsers will display the six heading levels in the same font, with the point size decreasing as the importance of the heading decreases.

Heading tags look like this:

<H1>Text for Heading 1</H1>
<H2>Text for Heading 2</H2>
<H3>Text for Heading 3</H3>
<H4>Text for Heading 4</H4>
<H5>Text for Heading 5</H5>
<H6>Text for Heading 6</H6>

Here is how the headings would be displayed in a browser

The most commonly are headings 1-4. On most pages you will find usually an opening H1 headline and all others use h3 or an opening H2 headline and all others use h4.

H2 is often used in preference to H1, as H1 can appear too large unless it is modified (using a style- not covered in this course)

Paragraphs

A page is composed of a number of sections separated by headings, each of which is composed of one or more paragraphs.

The beginning of a paragraph is marked by <P>, and the end by </P>. When a browser comes across a <P> tag it starts a new line and adds some vertical white space between the last line and the new line.

Paragraphs don't strictly speaking require the closing tag </P> but you should use it.

Exercise 2.

1. Open the page1.htm file in Notepad and position your cursor after the first body tag.

2. Now delete the line

My First Web <b>Page</b>

3. Insert the following text between the body tags. You can copy and pase it from this page to save your typing:

<H1> Starting HTML - A beginners Guide </H1>

This is the first paragraph. Notice that I haven't used the paragraph tags as the heading tag itself puts some white space before and after it.

<H2> This is a sub heading with two paragraphs</H2>

<P> Paragraphs are a very important part of web page layout . It is good practice when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long.</P>

<P> This is the second paragraph and I will use it to illustrate how very large paragraphs look on web pages. Has stated above it is good practice when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long. So here we are going to make a very large paragraph that you can later view in a browser of your choice just to see if it looks ok or not. The paragraph itself is not exceptionally long as it only spans 7 lines, Can you imagine how it would look it it spanned 10 or 15 lines.</P>

<P> Lets finish with a nice short paragraph</P>

4. Save the file and view it in a browser.

The file should look like this

End Exercise 2.

HTML comments

An HTML comment begins with "".Because of that the comment should not contain "--" or ">" anywhere in the comment.

The following are examples of XHTML comments:

Why use HTML Comments

If you are editing a document that may be edited by others then comments are a good way of explaining what you have done and why.
Hiding Script from older browsers
Documenting script functions and code.
Marking out blocks of text or script.
Temporarily remove sections from a page.

Exercise 3- Inserting a comment

1. Open page1.html

2. Insert the following text into the page after the closing H2 tag.

3. Save the file and view in a browser. The comment should not be visible.

End Exercise 3.

Quiz

Here is a sample of html code that is incorrect. There are two errors can you spot a correct the mistakes.

Question 1

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<h1>Welcome to the Test Website<h1>
<p>This is short opening paragraph followed by a bullet list.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

</BODY>

Answer to Question 1 (opens a new window)

Continue to next---->Lesson3

Lesson1<------Previous

Main menu

Website Resources

Hosts I Use

Other HTML Books

Amazon UK

HTML for the World Wide Web with XHTML

Other HTML Books