HTML for Beginners 2

How to use the number and bullet tag structure in HTML

In the last HTML tutorial we went over what the basic HTML structure looks like for some very basic article posts.  We focused mostly on the <a href> tag because it will be an important part of your online marketing, whether you are selling products or ad space.

In this tutorial, we are going to go over the number and bullet HTML structure.

Text is easy and fun but if you go about writing text with no breaks, then you will probably lose readers.

Let’s face it, readers like to scan and the most read stuff on the internet understands white space and makes the read easy.

One way to break up the monotony is to throw in some bullet points.

Bullets are done two ways….

1. They are either numbers (like what you are seeing right now)- ex. <ol>

• Or they are bullets (like this one)- ex. <ul>

The tag for a number bullet is actually in two parts.

1. The first part tells the browser that a numbered bullet is about to happen and sets up the bullet structure.
2. The second part tells the browser when a new bullet is set up.

Let’s take a look at it visually…..

The tag highlighted in yellow tells the person’s browser that the proceeding text is going to be bulleted, in this case with a numbers bullet. <ol>  When you have completed the numbers and want to end your bullet text, you close the tag </ol>

The tag highlighted in green tells the person’s browser that each <li> is a different number.  You close each line with the closing tag </li> so you can move onto the next number.

Notice in the example that there is a lot more going on within my bullet.  Most notably, the <strong> tag.  You can use any other tag in conjunction with the bullet tag as long as you close the tag when you are finished with it.

The same can be applied to for a non-numbered bullet as well.  You simply use the <ul> tag to tell the browser that you want a non-numbered bullet and then close it when you want to resume to normal text.

 Subscribe in a reader