How To Format Text Using HTML

HTML stands for HyperText Markup Language. It’s a way to format your text for viewing in web browsers. If you find yourself in a situation where you don’t have a WYSIWYG (What You See Is What You Get) editor, and you need to know a bit of HTML to format your text, here are some bits of code that you may find helpful.

To format a word, a paragraph, or an entire document, all you need to do is enclose it within two HTML tags – one to start the formatting, and one to stop it – main rule: you must close every tag you open! An opening tag looks like this: <p> and a closing tag is like this: </p>. When you’re opening and closing all of your tags make sure to avoid overlapping them – close them in the order you opened them. For example, don’t do this:

Do not <i><b>overlap</i></b> your tags.

Do this:

Keep your tags in <i><b>order.</b></i>

Be sure to close all tags that you open – if you try to make a single word bold, but forget to close your <b> tag, you’ll find that the whole rest of the page becomes bold as well.

Formatting text

<p>TEXT</p> – this surrounds paragraphs and creates space between them.

<i>TEXT</i> – italics

<b>TEXT</b> – bold

TEXT<br /> – this creates a line break after a line of text

Example code:

<p>This bag is longer from east to west than it is from north to south … hence its name! <b>Lucky Penny</b> was made from a beautiful vintage copper table runner.</p>
<p><b>Measurements:</b><br />
15″ wide at the top<br />
7″ tall<br />
4″ deep.</p>
<p>The straps are 20″ long so it is perfect to wear on your shoulder or in your hand without touching the ground. <i>This style has a zipper closure and an interior pocket.</i></p>

Result:

This bag is longer from east to west than it is from north to south … hence its name! Lucky Penny was made from a beautiful vintage copper table runner.

Measurements:
15″ wide at the top
7″ tall
4″ deep.

The straps are 20″ long so it is perfect to wear on your shoulder or in your hand without touching the ground. This style has a zipper closure and an interior pocket.

 

Bulleted lists

Maybe you want a list of item features with bullet points. Here is how you do that:

<ul>
<li>
bullet point one</li>
<li>
bullet point two</li>
<li>
bullet point three</li>
</ul>

“ul” stands for “unordered list”. If you want numbers instead, use “ol” – “ordered list.” “li” stands for “list item”. Start and end each list item tag.

Adding images

Here is the most basic code for putting an image on your page:

<img src=”picture.gif” />

Here it is again, with more detail:

<img src=”images/picture.gif” height=”60″ width=”20″ alt=”picture name “title=”picture name” border=”0″ />

Here are some of the variables:

  • src – your image source, which is the path to your image on your server.
  • width and height – specify the width & height of your image in pixels. This makes your page appear to load faster and is just generally a good thing to do. It’s usually not a good idea to take a big image and just shrink the height and width in the link to it.
  • alt/title – this is the text that will show on browsers that aren’t loading images. It also makes the little floaty-box thing when you hover over the image, and is important to people who have their images turned off or can’t view images. Describe your image here.
  • border – this is the border (or lack of border) of your image – it shows up when you make your image a link.

Making links

The anchor (<a>) tag is the tag you use to make links.

1) To another one of the pages on your site:
<a href=”page2.html”>go to page two</a>
you don’t have to type in the entire address, just the name of the file (and the path, if it’s in a different directory than your HTML page).

2) To a page on another website:
<a href=”http://www.site.com/page/”>learn some web stuff</a>
here you have to type in the whole URL (including “http://”) or it will try to go somewhere in your directory.

3) To email you:
<a href=”mailto:me@mydomain.com”>me@mydomain.com</a>

I hope this was helpful! You can check out the W3Schools HTML tutorials to learn more. Would you like to see more like this? What kinds of  help do you need with HTML, and what more would you like to know?

 

Get More Traffic & Make More Sales

More sales

Grab your free PDF guide to making more money from your online shop. How to grow your traffic and improve conversion rate.

You will also get weekly business building tips Powered by ConvertKit

About the Author

Hello, I'm Arianne! I am the head storyteller, idea hatcher, and yaysayer here at Aeolidia. I started making websites for friends in 1997, and never lost interest in building online homes for fascinating people. I have a great boss (me!) and I'm unafraid to play hooky to head out on an adventure. Some day I'll tell you about the time when, as a marine biology student, I was bitten by a baby elephant seal.

View more articles written by Arianne >

3 comments
  1. I’m learning HTML & CSS now! What I really struggle with is my emailing. I don’t understand how to link it so it opens up to an email. If that makes sense.

    • Hi Kat,

      Easy peasy! Try this:

      <a href="mailto:you@yourdomain.com">email me</a>

      One caveat: if you print your email address directly in your site code, spam bots can snap it up and start mailing you all kinds of stuff. You may prefer to have a contact form (or use an address you can change if it does get spammed).

  2. Thanks Arianne! It worked! I don’t know how to make a contact form. But I’ve used a separate email for now.

Leave a Reply

Or discuss this post in person by joining our Facebook group for creative product-based businesses.

Your email address will not be published. Required fields are marked *

Read more like this