Basic HTML Tags: Headings, Paragraphs, and Formatting

24 May, 2023

Contributors

Shruti Balasa

@shrutibalasa

Let’s look at some of the most commonly used and highly useful HTML tags. If you’re displaying an article on your web page, you will mostly need headings and paragraphs with bold and italic text. You will soon be able to do that using HTML.

Headings

Headings (just like this one above) give structure to long-form content. They also help search engines understand your web page better. There are six levels of headings in HTML, starting from <h1> to <h6> , with <h1> being the biggest one and the most important and <h6> being the smallest.

<h1>This is the largest heading</h1>
<h2>This is slightly smaller</h2>
<!-- ...and so on till h6 -->
<h6>This is the smallest</h6>

Now paste this above code within the HTML skeleton we learnt about previously, within the empty <body> tags.

When you open this up using the live server, you’ll see this in the browser.

Note that <h1> should be used for main headings, followed by <h2> for subheadings and so on.

Comments

Did you notice that we had this  on line 3 above, and yet we didn’t see it in the browser? These are comments, and that’s how they work. In between your HTML code, you might want to add notes for yourself or for other developers. So, anything you add within  won't be displayed on the webpage.

Try replacing the statement “...and so on till h6” with anything you want. It doesn’t get displayed, right? It’s best practice to use comments throughout your code to explain to yourself or another developer what / why you’ve written that piece of code.

Paragraphs

We’ve already seen the <p> tag in our previous examples. Each <p></p> creates a new paragraph element. You have your first short article combined with one of the heading elements.

<h1>Shotest article</h1>
<p>This is my first short article on a web page. It has a simple heading and a short paragraph.</p>
<p>Here's another paragraph of the article.</p>

And this is what you see:

Notice how browsers automatically add some vertical spacing before and after each heading and paragraph, so they appear well-spaced without you doing anything.

Div Elements

Before we look at formatting our text, it’s time introduce the <div> tag. This tag is a container unit that holds other page elements and divides the HTML document into sections. These sections can then be easily styled or manipulated with CSS or JavaScript. Here's an example:

<div>
  <h1>Article Title</h1>
  <p>This is the first paragraph of the article.</p>
</div>

The <div> tag doesn't represent anything. It just serves as a container for other HTML elements and can be used to style those elements with CSS. We’ll use this quite a lot, later while learning CSS.

Basic Formatting

HTML has several tags to format your text. Here are a few basic ones:

Bold and Strong

The <b> and the <strong> tags can be used to make your text bold, like this:

<b>This text is bold</b>
<strong>This is strong text</strong>

While they seem to do the same thing - making the text appear bold, they differ slightly. <b> changes the way the text looks on the browser, while <strong> also indicates that its content has importance - useful for search engines. So it’s better to use the latter.

Italics and Emphasis

The <i> and <em> tags are used to make your text appear in italics. Similar to <b> and <strong>, <i> only changes the look of the text while <em> adds emphasis too.

<i>This text is in italics</i>
<em>This is emphasized text</em>

Make sure to try all of these yourself in your own code.

Underline

The <u> tag underlines your text. Simple.

<p> This is how you <u>underline</u> text.</p>

There are a few more such formatting tags like <s>, <sup>, <sub> and more. Use them in your HTML and see what they do.

Wrapping up

You just learned about some basic HTML tags that you will use throughout to create well-structured and formatted web pages. Don’t forget that you can use these tags in combination too. Here’s how you’d make text strong and emphasized simultaneously.

<p>This text is <strong><i>bold and italics</i></strong> too.</p>

The most important thing to remember is that the tag you open last will be the first to close. As you see above, <i> is opened after <strong>. So </i> has to close before you close </strong>. It’s just like brackets in mathematics. If you don’t like math, think about the tags as differently-sized boxes within each other. You have to close the innermost box first, and so on.