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 <p> Tag
This is the easiest tag to remember! Each of your paragraphs should be wrapped in a
<p> </p> tag pair like this:
<p> Your paragraph of inspiring text goes in here! </p>
Technically you don’t need the
</p> but it is much better to keep the habit of doing so.
Bold Text – <strong> and <b>
If you want to higlight some text in bold then you can do this with
<strong>Bold Text</strong> or
<b>Bold Text</b> 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
<b> altogether, and have not seen any negative impact from doing so. But the choice is yours!
Italic Text – <em> and <i>
If you want to make some text italic then you can use
<em>Italic Text</em> or
<i>Italic Text</i> tag pairs. As with bold text, please remember to close your italic tags!
And the same semantic difference applies in this case – so
<b> and <i> are purely visual but
<strong> and <em> communicate importance, or emphasis (hence the
Underlined Text: the <u> Tag
You can underline text really easily by using the
<u>underlined text</u> 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.
The <small> Tag
To make text a little smaller, you just need to surround that text with
<small>This text is a little smaller</small> 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 Numbers1
- Degrees of Temperatureo
- Chemical Formulae: CO2, H20
To achieve subscript wrap the letters or numbers you want altering in
<sub>subscript text</sub> tag pairs.
To achieve superscript wrap the content you want to change in
<sup>superscript text</sup> tag pairs.
New Lines: The <br> Tag
Unless the beaviour of
<p> tags has been modified, starting a new paragraph will create space before and after the text surrounded in
<p> 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
<br> before your
</p> 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!
More HTML5 Tutorials
- htaccess Hacks for Faster Website Speed
- Controlling Search Engine Bots and Your Search Snippet with HTML
- CSS and HTML Comments and their Uses
- HTML5 Forms – A Beginner’s Introduction
- Basic HTML Paragraph Tags