A Smarter Way To Learn HTML & CSS(2015)

3
Creating headings

A heading on a webpage serves the same purpose as a heading in a newspaper or magazine. It shows the user what’s important and gives her a sense of what the paragraphs underneath it are about. Headings also help search engines understand a page.

HTML gives you six sizes of headings to choose from, h1 through h6. h1 is the largest, h6 is the smallest.

You don’t have to include all the different sizes of headings in your HTML document, but you should include an h1 heading, because search engines look for it. You can have as many h2, h3, h4, h5, and h6 headings in your document as you want, but you should have only one h1 heading. Otherwise, search engines might get confused.

This is how you code the largest heading.

<h1>This is the largest heading.</h1>

Notice that there’s both an opening and a closing tag.

Here’s a longer one, in h3 size.

<h3>This is a long heading that goes on and on and on, but it still has just one opening and one closing tag.</h3>

Let’s look at another heading. If you write…

<h3>All the king’s horses and all the king’s men couldn’t put Humpty together again.</h3>

…the browser will break the lines according to how much width is available. It might break the heading like this:

All the king’s horses and all the king’s

men couldn’t put Humpty together again.

Or it might break it like this:

All the king’s horses and all the king’s

men couldn’t put Humpty together

again.

Or maybe it’ll break it some other way. But you won’t control, and may not be able to predict, how the heading breaks. If you’re at all fussy, you might want to tell the browser how to break it. Maybe you want it broken this way:

All the king’s horses

and all the king’s men

couldn’t put Humpty

together again.

So you try writing…

<h3>All the king’s horses
and all the king’s men
couldn’t put Humpty
together again.</h3>

But this way of writing the heading has no effect on the browser. It still breaks the heading the way it wants to. The browser ignores carriage returns.

If you want the browser to break the heading a certain way, you have to tell it to do so explicitly, using the tag <br>.

<h3>All the king’s horses<br>and all the king’s men<br>couldn’t put Humpty<br>together again.</h3>

Note that there’s no space between the text and <br>. And there’s no closing br tag.

By default, browsers separate paragraphs by adding space between them. For example, if you write…

<p>Slow lorises are a group of several species of primates which make up the genus Nycticebus.</p>
<p>They have a round head, narrow snout, large eyes, and distinctive coloration patterns that are species-dependent.</p>

…the two paragraphs might come out looking something like this:

Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus.

They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are species-dependent.

If you wanted a break at the end of the first sentence, but no space between it and the next sentence, you’d consolidate both sentences into a single paragraph and use <br>.

<p>Slow lorises are a group of several species of primates which make up the genus Nycticebus.<br>They have a round head, narrow snout, large eyes, and distinctive coloration patterns that are species-dependent.</p>

Then it would display like this:

Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus.
They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are species-dependent.

The browser displays each heading on its own line. The browser doesn’t care whether you put each heading on its own separate line, but for human-readability, please do. For example:

<h1>Our Mission</h1>
<h2>Helping People Help People</h2>

In your practice.html document replace the two paragraphs about your name with an h1 heading, an h2 heading, and a multi-line paragraph. Save the file and display it in your browser. Sample HTML code:
http://asmarterwaytolearn.com/htmlcss/practice-3-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/3.html