HTML Part 3 – Headers and Basic Text Formatting

In our previous guide, we discussed document declaration and content you can put into your header tag. While it is one thing to help users find your site, it is quite another to make something splashy. This guide will help you get started on that something splashy.

Headers

Think of headers as a title. Some text in big bold letters at the top of your website to help explain something. Many designs use pictures for titles, but since we are new to this whole thing, we’ll use headers for now. Open up your HTML file you’ve been making in the previous titles. After the opening body tag, we want to create a heading to appear at the top of our page.. So, I’ll do so like this:

Notice how I added the “H1” tag and inserted text between the respective opening and closing tags. You can think of “H1” as “Heading 1”. In a default straight HTML page, the “H1” tag is the largest heading. There are a total of 6 different heading that you can use. They are “H1” (largest), “H2” (next largest), “H3” (third largest), “H4” (third smallest), “H5” (second smallest) and “H6” (smallest). Just make sure your closing tag matches the opening tag. So, if you opened with an “H3” tag, close it with an “H3” tag at the end of the heading! Any text you add after the closing heading tag will be moved down below.

Basic Text Formatting – Line Breaks and Paragraphs

If you have already tried adding multiple paragraphs to your HTML already, you may have noticed that simply pressing enter in the code to separate the paragraph will not work. This is because browsers ignore spacing made by the “enter” key (and, for that matter, any extra spacing made by multiple spaces). There are two ways to handle this: creating a paragraph or creating a line break.

A line break simply pushes any text after it down one line. Meanwhile, a new paragraph adds two spaces and can be much more easily formatted to create things like extra spacing at the beginning of each paragraph is you want to go that rout. Below, I’ve added some text to the code that demonstrates the proper use of both:

Note the fact that I have only added the “br” tag at the end. This particular piece of HTML requires merely the presence of one tag and does not require an open and closing tag. This pushes the text below it down merely by one line. Meanwhile, my “p” tag opens at the beginning of the paragraph and closes on end of that same paragraph. When testing out the above code, you may not notice much of a difference between the two, but when you create more text and separate them in different ways, you will most definitely notice the difference between the two. If you plan on adding some extra formatting to the paragraphs, it’s recommended you use the “p” tag instead of the “br” tag. When we get into CSS, we’ll show you how to indent your paragraphs.

Basic Text Formatting – Italics and Bold

While it is all well and good to have plain ordinary text, it’s sometimes good to add extra formatting to add emphasis to what you are saying. This can also be a design choice you may wish to employ depending on what you have in mind for an actual website. Let’s add some text to our website with two kinds of formatting: Italics and Bold:

Note that when I wanted to boldface the word “bold”, I used the tag “strong” tags. I like to think that I’m giving “strength” to my text when I boldface something. So, if I want to put some muscle into my text, I think of the “strong” tag to add strength to it. For making text in italics, I used the “em” tags. Think of “em” as short for emphasis.

If you are wondering how to underline text, you can do so using the “u” tags. However, just know that this is old deprecated code that should be avoided in code. Also, when you want to link to something, unless you use particular code to remove it, links are also underlined. If you have underlined text and links on the same page, this could theoretically lead to confusion, so it’s best to avoid underlining plain text that isn’t a link.

A Note on Clean Code

You should always try to keep your code as clean as possible. What I mean by that is that if you are using all kinds of tags in your code, make sure that if more than one tag ends at a certain point, close the last tag that you opened first, then go down the list of tags you used. If that sounds confusing, here are a few examples of both clean and unclean code:

CLEAN CODE:

I <strong>really like <em>ice cream</em></strong>

NOT CLEAN CODE:

I <strong>really like <em>ice cream</strong></em>

CLEAN CODE:

You <strong>are <em>happy</em></strong> today.

NOT CLEAN CODE:

You <strong>are <em>happy</strong></em> today.

You can probably see that the unclean code looks a little messy. While the unclean code may work, unclean code will gradually become more and more difficult and can lead to “spaghetti” code (where everything is a mess and you don’t know where something starts or ends). If you go back to change something in the code later on, it could be much more difficult to edit it if it’s basically spaghetti code rather than clean code. So, do yourself (and possibly others) a favor and write code as clean as possible. You may be surprised how many ways a website can break just by a single edit!

In the next tutorial, we’ll show you how to create different kinds of links!

Part 2 (Document declaration and header information) | HTML guide list | Part 4 (Linking – Internal, External and Anchor)