Basic HTML tags

See more about:

Where are we?

On the previous page, you uploaded a standard template for a Web page. Let’s add some tags to it.

Headings and paragraphs

Most documents have headings. A heading is like “Headings and paragraphs” just above. It identifies a piece of a document.

Create headings with tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The tags close in the normal way, so the full tags are <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, and <h6></h6>.

This is what they look like:

Heading tags

Figure 1. Heading tags

CC
CC

So if I’m writing an article, and I have three sections: Introduction, Evidence, and Conclusion. I would do it like this, right?

<h1>Introduction</h1>
<h2>Evidence</h2>
<h3>Conclusion</h3>

Kieran
Kieran

No, that’s a common mistake. The numbers in the heading tags are not the sequence of things. They’re the level in an outline.

Let’s say your article had these headings and subheadings:

Article outline

You’d use HTML like this:

<h1>Introduction</h1>
<h1>Evidence</h1>
<h2>Creating the survey</h2>
<h2>Gathering data</h2>
<h2>Analyzing results</h2>
<h1>Conclusion</h1>
<h2>Humans are strange</h2>
<h2>Further research</h2>

CC
CC

Oh, OK, I get it. The numbers are whether it’s a heading, a subheading, a subsubheading, and so on.

Kieran
Kieran

Right!

So, headings separate sections of content. Most sections contain paragraphs. A paragraph is some text with white space before and after it. You’re reading a paragraph now.

Paragraphs are created with the <p></p> tag.

Here’s a page using heading and paragraph tags.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Building a Dog House</title>
  </head>
  <body>
    <h1>Building a Dog House</h1>

    <p>Building a dog house is easier if you work out what you are doing ahead of time. This page will help you with the process.</p>

    <h2>Find a plan</h2>

    <p>The first step is to find a plan for the dog house. There are many plans on the Web. But you need to choose carefully.</p>

    <h2>Buy the materials</h2>

    <p>Buy the wood, fasteners (nail, screws, etc.), paint, and whatever the plan calls for.</p>

  </body>
</html>

Figure 2. Page using headings and paragraphs

You can show the page in your browser.

An <h1> is used to show the user the name of the page. This is the same as the <title> on this page, but isn’t always. For example, the page you’re reading now has <h1>Basic HTML tags</h1> for the user, but <title>Basic HTML tags | CoreDogs</title> for the browser title and search engines. This page’s title is the heading with the site name appended to it.

“Appended” means “added to the end.”

On the dog house page, <h2> is used to start the major sections of the page. You don’t have to use heading tags this way. The browser doesn’t know anything about sections and subsections. You tell it to show a heading, and it will do so. You could have HTML like this.

<h5>Building a Dog House</h5>

<h1>Building a dog house is easier if you work out what you are doing ahead of time. This page will help you with the process.</h1>

<h3>Find a plan</h3>

<h2>The first step is to find a plan for the dog house. There are many plans on the Web. But you need to choose carefully.</h2>

Figure 3. Strange headings

The browser will do exactly what you tell it to, but it would look strange to the user.

Exercise: Try the strange headings

Create a Web page using the markup in Figure 2, but change it to use the markup in Figure 3. What do you think of the result?

(Log in to enter your solution to this exercise.)

Renata
Renata

A question.

Kieran
Kieran

Yes?

Renata
Renata

Do you use <h1> and <p> in CoreDogs?

Kieran
Kieran

Yes. If you look at the source code for this page, you’ll see them.

Renata
Renata

OK. But the fonts on the dog house page look nothing like the fonts on this page. How can they be the same tags?

Kieran
Kieran

The HTML tags are semantic. For example, <h1> says to “make a major heading.” But the tag doesn’t say exactly how to make a major heading, that is, what fonts, colors, etc. to use. It’s up to the browser to figure out how.

From reading books and magazines, we’re used to the concept of headings. And we’re used to them being in a larger font, and maybe bold. What you see when you look at the dog house page are the browser’s defaults for making headings and paragraphs. The defaults match our expectations.

However, Webers routinely change the way HTML tags are rendered. They explicitly tell the browser what font to use for <h1>, <p>, and so on.

That’s what I did with CoreDogs. The typeface for an <h1> is Trebuchet, Helvetica, or a generic sans serif, depending on your computer (most people will see Trebuchet). The font size is 24 pixels. We’ll talk more about typefaces and font sizes later.

The technology to change the way browsers display <h1> and other tags is cascading style sheets (CSS). It’s a key Web tech. You’ll start learning about it later in this chapter.

Line breaks

Sometimes you want a paragraph to spread over several lines, without chunks of white space. Limericks have this formatting. For example:

<h1>In honor of Jim Porter</h1>

<p>Kieran wrote this for Jim's birthday.</p>

<p>
There once was a Porter named Jim,<br>
Whose voice filled the church to the brim.<br>
But his puns were so bad,<br>
He was bound and gagged,<br>
Until it was time for the hymn.<br>
</p>

Figure 4. The <br> tag

You can see the page.

The <br> tag at the end of each line breaks the line there, and continues at the beginning of the next line. It’s different from the <p> tag, because it doesn’t add white space above and below the line.

Exercise: Break tags on the same line

Create a page with the markup in Figure 4. Put the markup for the limerick all on one line, like this:

<p>There once was a Porter named Jim,<br>Whose voice filled the church to the brim.<br>But his

How does it look in a browser? Is it any different from my page?

(Log in to enter your solution to this exercise.)

Indenting

There are many ways to indent content. A simple way that just uses HTML is to use the <blockquote> tag.

Here’s Jim’s code, with the limerick indented.

<h1>In honor of Jim Porter</h1>

<p>Kieran wrote this for Jim's birthday.</p>

<blockquote>
There once was a Porter named Jim,<br>
Whose voice filled the church to the brim.<br>
But his puns were so bad,<br>
He was bound and gagged,<br>
Until it was time for the hymn.<br>
</blockquote>

Figure 5. The <blockquote> tag

You can try it.

Add horizontal lines

You can add simple lines with the <hr> tag. hr stands for “horizontal rule.”

Webers sometimes use them to separate parts of a page. For example, many pages have footers, giving copyright and other information. I might add the following to the limerick page:

<hr>
<p>&copy; 2010, CoreDogs.</p>

Figure 6. The <hr> tag

You can see it in action.

HTML entities

There’s something strange in Figure 6. What’s that &copy; thing in line 2?

This is called an HTML entity. It’s a code for a special character of some sort. For example, &copy; renders as ©.

HTML entities are useful things. For example, suppose you wanted to write a page about HTML. You wanted to display this:

The <p> tag renders a paragraph.

You type the following into your HTML file:

<p>The <p> tag renders a paragraph.</p>

See the problem? The browser hits the second <p> – the one between the words “The” and “tag” – and it starts a new paragraph. Ack!

You can use HTML entities instead, like this:

<p>The &lt;p&gt; tag renders a paragraph.</p>

&lt; renders as <, and &gt; renders as >. Now the content will look right.

Another useful entity is &nbsp;. It’s a nonbreaking space. Normally browsers collapse spaces together. Suppose you put six spaces together in your HTML, like this:

<p>Mostly      harmless</p>

The browser will display them as one space:

Mostly harmless

Use several &nbsp; when you want several spaces. This:

<p>Mostly&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;harmless</p>

will show as:

Mostly      harmless

Wikipedia has a list of HTML entities.

Summary

The chapter is about creating HTML pages with plain text. This lesson covered the heading, paragraph, line break, block quote, and horizontal rule tags. We also talked about HTML entities.

What now?

Let’s look at some tags you can use to do simple font work.

Renata's picture

Puns

Speaking of puns, I emailed a list of ten of my favorites to a friend. She said that none of them made her laugh. No pun in ten did.

CC's picture

GROAN!

GROAN!

Renata's picture

Any more?

Any more puns? Please add them.


How to...

Lessons

User login

Log in problems? Try here


Dogs