Basic HTML tags
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
Many documents have headings. A heading is like “Headings and paragraphs” just above. It identifies a piece of a document.
Create headings with the <hx> tags, where x is a number from 1 to 6. So, the tags are <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>.
While headings separate pieces of content, paragraphs often are the content. A paragraph is some text with white space before and after it. You’re reading a paragraph now.
Writers use paragraphs to group sentences about a single idea. But the browser doesn’t care about that. It will just show what you tell it to, with white space above and below.
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>
<h3>How many dogs?</h3>
<p>Do you want your dogs to share the dog house, or is each dog going to get a house?</p>
</body>
</html>
Figure 1. Page using headings and paragraphs
You can show the page in your browser.
Look at the URL for the page. The page is in the file dog_house.html. All lowercase, with an underscore separating the pieces of the name.
The page is about building a dog house, so that’s what’s in the <title> tag. Use meaningful title tags to help users, and to increase search engine rankings.
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, if you look at the top of the page you’re reading now, you’ll see that the title has the site name appended to it.
As before, “appended” means “added to the end.”
On the dog house page, <h2> is used to start the major sections of the page: planning, buying materials, cutting, etc. <h3> is used for subsections, <h4> for subsubsections, and so on.
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 2. 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 1, but change it to use the markup in Figure 2. What do you think of the result?
(Log in to enter your solution to this exercise.)
A question.
Yes?
Do you use <h1> and <p> in CoreDogs?
Yes. If you look at the source code for this page, you’ll see them.
OK. But the fonts on the dog house page look nothing like the fonts on this page. How can they be the same tags?
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. 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 browsers 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 mammals 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 Weber tech. It’s an important topic later in this book.
Line breaks
Sometimes you want a paragraph to spread over several lines, without chunks of white space. Limericks are like this. 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 3. 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 3. 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? Why, or why not?
(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 4. 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. For example, I might add the following to the limerick page:
<hr> <p>© 2009, CoreDogs.</p>
Figure 4. The <hr> tag
You can see it in action.
HTML entities
There’s something strange in Figure 4. What’s that © thing?
This is called an HTML entity. It’s a code for a special character of some sort. For example, © 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.
Your might 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 <p> tag renders a paragraph.</p>
< renders as <, and > renders as >. Now the content will look right.
Another useful entity is . It’s a nonbreaking space. Normally browsers collapse spaces together. So six spaces together show as one space. Use several when you want several spaces.
Wikipedia has a list of HTML entities.
Summary
This lesson is about creating HTML pages with plain text. This page of the 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.
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.
GROAN!
GROAN!
Any more?
Any more puns? Please add them.