Basic HTML Paragraph Tags

Regardless of the website you are building, much of your page content is likely to be in the form of text. Ideally you should aim for multimedia – adding images, video and audio.

But thought should be given to the text too. So I’m going to run through some basic HTML paragraph tags with you.

The Tag

This is the easiest tag to remember! Each of your paragraphs should be wrapped in a   tag pair like this:

<p> Your paragraph of inspiring text goes in here!    </p>

Technically you don’t need the  but it is much better to keep the habit of doing so.

Bold Text – and

If you want to higlight some text in bold then you can do this with Bold Text or Bold Text tag pairs. Always remember to close your tags else all the text after your opening tag will appear in bold.

There is a slight difference between these two: bold is purely visual – for your users. strong means that text has a greater importance. Visually speaking they do the same, but they communicate different meaning to other systems such as search engines. In recent years I have just stopped using  altogether, and have not seen any negative impact from doing so. But the choice is yours!

Italic Text – and

If you want to make some text italic then you can use Italic Text or Italic Text tag pairs. As with bold text, please remember to close your italic tags!

And the same semantic difference applies in this case – so  and  are purely visual but  and  communicate importance, or emphasis (hence the  tag)

Underlined Text: the Tag

You can underline text really easily by using the underlined text tag pair. However be warned, people still expect underlined text to be clickable so doing this is really not encouraged.

Struck-thru Text: the <s> Tag

If you want to ~~strike through~~ some text then this is achieved with <s>struck-thru text</s>. This might be an odd one to offer, but e-commerce websites might use this to show the price of an item before a sale started, for example.

Adjusting Font Size On-the-Fly

If you want to adjust the size of a portion of text on-the-fly, then that can be done really easily. Why might you do that? Well you might have a ‘call to action’ at the bottom of your page – by that I mean a “call us now for a free quote” kind of sentence. You may decide that should be larger than your normal paragraph size.

Or you may want some small print, or a caption on an image, and decide that should be smaller.

The <big> Tag

To make text bigger, just surround that text with <big>This text is a little bigger</big> tags.

HTML Paragraph Tags are Simples! — Image Credit

The Tag

To make text a little smaller, you just need to surround that text with This text is a little smaller tags. Simples!

Subscript and Super Script

As you have in Word-Processor software like Microsoft Word, you can have subscript (slightly below the current line of text) and superscript (slightly above it). Some examples where you might use these are

Trade Mark Symbol ^TM
Footnote Numbers¹
Degrees of Temperature^o

Chemical Formulae: CO₂, H₂0

To achieve subscript wrap the letters or numbers you want altering in subscript text tag pairs.

To achieve superscript wrap the content you want to change in superscript text tag pairs.

New Lines: The Tag

Unless the beaviour of  tags has been modified, starting a new paragraph will create space before and after the text surrounded in  tags. But what if you want to go to the line immediatedly below?

This can be done by the single <br&gr; tag. This is a line break and does not have a closing tag.

<p> Paragraph 1, Line 1<br> Paragraph 1, Line 2</p><p> Paragraph 2.    </p>

Just remember you don’t need to have another   before your  because closing your paragraph will automatically force the next text entry down a line. If you do both, you might end up with a bigger gap than you originally intended!

Drawing A Line Under It All!

The last simple tag I want to introduce you to, is the ability to draw a simple straight line underneath a paragraph (or anything else for that matter). This is achieved using the Horizontal Rule or <hr> tag. It doesn’t have a closing tag and draws a basic line like the one below. How it looks may be determined by CSS but in pure HTML it will still show.

TL;DR HTML Paragraph Tags

There are a wide range of HTML Tags available for you to adjust how your text appears. Technically there are HTML Font tags, but in today’s web you’re really advised to use CSS to define fonts.

If you have any problems or questions about this tutorial, feel free to use the comments!