Heading Tags

Heading tags start with an h, and have a number immediately following from 1 to 6. Typically, headers are used to show an importance with a lower number showing more importance, and defining what a large section of a page is about. 

Our heading tags start with an h and a number between 1 and 6.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

In many ways, you can think about heading tags like an outline you might have to write for an English paper. You have a few large roman numerals, those would be your main points, and like an h1 tag. You have capital letters, which would be like your h2 tags. These support your main point, and are just sub sections. You can keep going down your outline structure.

Since most people would write a web page about each main point, you’ll typically only have one or two h1 tags, a few h2 tags, etc. Most of the time, we won’t have h3 or less tags, and by default, the h4 tags and smaller, are generally the same size or smaller than your regular paragraph text.

As such, each page, essentially becomes like a big point in your outline, supporting your main theme – trust me, believe in me, buy from me…

Because heading tags are bigger, and stand out, sometimes people want to use them all over. They think it will make everything bigger and more important, but remember, if everything is “big and important” – nothing is.

So how should heading tags be used… well, this goes into how people read web pages. Mainly in the fact that people don’t read web pages. People scan web pages, looking for something that catches their eye to determine if they should keep reading deeper.

To do this, people will look at images and headings first. Using what they see, they determine if they should actually read the web page, or sometimes even just a portion of a webpage. So make sure you have a few headings and sub-headings to catch the user’s eye. Make what you write inside of your heading interesting enough to get people to keep reading.

Paragraph Tags

A Paragraph tag <p> is one of the most common tags you will see and use. Since web pages are still, for the most part, very text heavy, it is important to properly display text and the most common type of text is a paragraph. 

You could look any book or a magazine article and see the many paragraphs that they contain. Web paragraphs can contain inline tags but cannot contain paragraphs within a paragraph.

Because the creators of the HTML specification were geeks themselves, and geeks by our nature don’t like to write anything we don’t have to, they kept the paragraph tag simple – p. This was especially important when the Internet was in its infancy, and didn’t have a lot of bandwidth to write out <paragraph>, so the developers saw it faster to both create and transmit.

Now the paragraph tag cannot be nested within another paragraph. Because of this, you don’t technically have to have a closing paragraph tag, although it is generally considered good form to have it.

People will often put an image inside of the paragraph text, although it isn’t required. In a perfect world, they would avoid it, as the image isn’t technically part of the paragraph text. We’ll show how to avoid that, and place images so it works with your text when we discuss images.

Common Text Modifiers

Within our paragraph, we often need to modify the text. Typically this will be something like adding bold or italics to certain word(s). In other cases, we might want to define an acronym, or define something like a mailing address. HTML 5 allows us to modify text to bring in additional information, although not necessarily as one would expect.

Emphasis

The <em>, or emphasis, tag is used to show emphasis on a selection of words. It only works on text. Now with later versions of HTML, the developers of the specification were trying to remove the presentation from the tags which contain data. However, most web browsers will show emphasis as being italicized.

<p>This is <em>emphasized</em> compared to regular information.</p>

This is emphasized compared to regular information.

Strong

The <strong> tag is used to show that the included text is important. As with the <em> tag, the developers of the specification were trying to remove the presentation from the tags which contain data. However, most web browsers will show <strong> as being bold.

<p>This is <strong>really important</strong> for you to know.</p>

This is really important for you to know.

Other Tags

Of course there are various other inline tags which are used. Here are some sample tags you might find.

<ins> and <del> are often used together to show when information has been added (<ins>) or removed (<del>) from the original data.

<p>Version 3.14 of Pi in the Ski is <del>not</del><ins>now</ins> available.</p>

Version 3.14 of Pi in the Ski is notnow available.

The <abbr>, or abbreviation tag, is used to help define what an abbreviation is. It has an attribute that specifies what the full name would be, and is shown when a user hovers over the text.

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> manages much of the rules and specifications we use for online technologies.</p>

The W3C manages much of the rules and specifications we use for online technologies.

Basic Web Page Organization was originally found on Access 2 Learn