So far, your Web page contains a few lines of content but it doesn't have a heading.
There are six different headings you can use. Table 6.4 shows the six different header levels, from largest to smallest. The header level will determine how the content of your heading is displayed.
Headings, like paragraphs are also block-level elements ; they contain content.
Therefore Headings must have a opening and closing tag.
Headers for HTML Documents :
| Opening Tag | Closing Tag | Resulting Visual Effect |
|---|---|---|
<h1> |
</h1> |
This is Header 1 |
<h2> |
</h2> |
This is Header 2 |
<h3> |
</h3> |
This is Header 3 |
<h4> |
</h4> |
This is header 4 |
<h5> |
</h5> |
This is header 5 |
<h6> |
</h6> |
This is header 6 |
Steps to Success
- after the opening body tag <body>
type an opening header tag <h1>
type Welcome to My Web Page!
type a closing header tag </h1> - Save
and preview in the browser.
Great, now we are getting somewhere.
Let's explore all the possible headings in a new file called headings.html.
- Open a new file in Notepad: select File > New
- Add the following HTML. (or copy and paste)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
- Title the web page Headings
- Inside the body element, add the following:
<h1>This is a h1 title.</h1>
<h2>This is a h2 title.</h2>
<h3>This is a h3 title.</h3>
<h4>This is a h4 title.</h4>
<h5>This is a h5 title.</h5>
<h6>This is a h6 title.</h6>
- Save as headings.html in your steps folder
- Preview in the browser
