START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

In this HTML lesson you’ll learn how to use HTML to mark up your text by making it bold or italic. This simple lesson will also introduce you to the basic syntax rules of HTML, which you can then apply to other code lessons down the road.

Go Bold or Go Home with the <strong> HTML Tag

learn html bold and italic graffiti tag

When learning HTML, bold text is usually one of the first things people find out how to do, as it’s often allowed in places like blog comments and other forms. Use the HTML  <strong>  tag to mark up bold text. This is a container tag, so your text is surrounded by an opening and closing tag that will indicate the beginning and end of the bold text. The closing tag looks like this: </strong>. Notice that the closing tag has a slash in it.

Here’s an HTML code example; you can surround your bold content with <strong>  tags like this:

Emphasize Text with the HTML <em> Tag for Italics

Likewise you can italicize text for emphasis using the HTML tag  <em>. Notice that this is a container tag, with an opening and closing tag wrapping around your italic emphasized text.

Here’s an example:

Italics is created with the em tag

Italics is created with the em tag

Learn 1,000 HTML Tags in One Minute

My friend Voltaire can teach you 1,000 words in Italian in one minute. It’s a bit of a cheat, but he basically teaches you how the language works, so that you can recognize an adjective and form one. It works surprisingly well. The same is true for HTML coding. Once you know how the rules work, you can guess how to structure a tag even if you’ve never seen it before.

learn html bold and italic bunnies

In HTML bold and italic are usually the first codes people learn, so we’re putting them at the beginning.

Hopefully you’re seeing a pattern here with our HTML’s bold and em tags. When we’re coding, we have the name of the code in brackets, then the stuff we want to be affected by that code. When we’re all done, it’s the same bracketed code (called a “tag”) with a slash to show the code is ending.

So if  <strong>   makes text bold and  <em>   text makes it emphasized, what might the tag <sing>  do? Well, nothing actually, because I just made it up. But you can be sure that in the future if there’s a tag that will make your text sing it would look something like this:

Likewise, now that the HTML tag for bold has taught you the basic structure of most code, hopefully you’ll be emboldened to guess how to write each of these codes:

  • Want to make a block quote? The code is <blockquote> </blockquote>
  • Want to mark up an address? The code is <address> </address>
  • Want to create a form? The code is  <form></form>

That’s it! You’re a coding master mind. Of course not all codes are that intuitive. But most of them are just abbreviations of whatever word would describe what it is you’re trying to do. However, there is a catch…

Watch the order of your closing tags

Watch the order of your closing tags

Bold and Italics: Order Matters when using Two Tags in a Row

You may need to use both <strong> and  <em> for text that is both bold and italics. When you use the  <strong> and <em> tag together, it is important to pay attention to the order of your tags.

Here’s an HTML code example using more than one HTML tag to create text that is bold and italic. Notice that it is ok to start with either  <strong>  or <em>, but depending on which one we start with, we need to end the tags in the right order (proper nesting):

 correct, #1:

correct, #2:

wrong:

The rule in HTML regarding the order of multiple tags is to open the tags in the opposite order you close them in. For example, in the first correct example above, the  <strong>  tag opens first, and closes last.

In the second correct example, I chose to start with  <em>  and then the  <strong>  tag. It doesn’t matter which one I start with. But I must close the tags in a particular order: the first tag in, is the last tag out.

Properly nested tags follow the rule First tag in, is the Last tag out

Properly nested tags follow the rule “First tag in, is the Last tag out”.

If you diagram the matching open and closing tags you’ll see they look like a series of bowls nested together (if your order is correct). This is where the phrase “proper nesting” comes from. Nothing to do with feathers or buying comfy furniture, it’s just a way to remember the order of tags.

russian nesting dolls can help you learn HTML

Think of HTML like Russian nesting dolls.

Brain Snack:

Now you do it!

Learn HTML With This Activity

We’ll keep this activity easy and short so you can zip on to Part II of this post. You’re going to learn six different codes, all based on the HTML code for bold.

First, start by writing a sentence in bold. If you have writers block, here’s a sentence you can use:

It’s tricky to rock a rhyme that’s right on time. It’s tricky, tricky tricky.

Now, try adding these new codes to your text, using the rules you learned above for basic coding. Try to use more than one code, so you can practice proper nesting. For example, you could make just the last “tricky” into superscript, and underline all of the “tricky”s. Here’s some codes to experiment with;

The code to underline is <u> .

The code to emphasize is <em> .

The code to make text into superscript is <sup> .

The code to show text highlighted with a yellow marker is <mark> .

Click here to go to the playground where you can test out your code.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.