Main

 
Page #5: Manipulating Text With Headings

index previous page Manipulating Text With Headings next page

There are many ways to manipulate text. Let's start with the HEADING tag, which is used to identify sections and subsections within your page. The heading tag changes your text in three ways: (1) size, (2) face (makes it bold) and (3) adds blank lines both above and below — unless the heading is at the top of a page or table, in which case there is no blank line above.

The HEADING tag is a paired tag. The opening HEADING tag is <hn>. The closing heading tag is </hn>. The italicized letter "n" represents a number from 1 to 6. The smaller the number, the bigger the text in which the heading is displayed. It would be handier if the bigger number meant bigger text, but it doesn't. Think of the numbers, then, to indicate that <h1> is the 1st in importance — more important than <h6>.

Here are examples of the HEADING sizes and the code that creates them:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>
<h6>Heading 6</h6>

As we will see beginning on page seven, there are other tags we can use to make text bigger and smaller. You may find it tempting at times to use the heading tag to change the size of text that is not actually a heading. Don't do it — primarily for reasons having to do with the accessibility of Web pages to people with visual disabilities

Do not confuse the HEADING tag with the <head> section of the Web page. The HEADING tag appears in the <body> section of the page. The HEADING tag identifies that text as a section heading and tells the browser how to display the text. The <head> section is one of the three basic parts of the structure of the page.

Play Time!

  1. For this exercise, start with "prac04.htm". Using the HEADING code you see above, create a few headings.
  2. Some suggested text: (1)"[Names]'s second page." (2) "This is a heading." (3) "Look, Ma! A Heading!"
  3. Change the text that says "[Your Name]'s first web page" (or whatever you wrote) to something that tells you that this is your second page.
  4. Save your work. Call it "prac05.htm" or "prac05.html".
  5. Display your work.
  6. Fix any coding errors.