Getting to the points of your HTML web page

Text makes up the majority of most web page’s content but large chunks of text can make the average user reluctant to read the whole article as they want to receive their information in short sharp pieces. If you do have a lot of text content a great way to break it up is by using bullet points or numbers list.

Bullet Point List

To start a bullet points list the tag used is <ul>. This indents the position where the bullet point begins but doesn’t display the bullet point. This is done with the tag <li>, this tells the web browser when a bullet point should be inserted. Onces <ul> is in place insert the text that you want positioned next to your bullet point. When you have finished close the tag with </li>, that will finish your first bullet point.

Continue to insert as many bullet points as you want by adding additional <li> tags underneath but remember to close each one. Once you have finished all your bullet points close the list with </ul> which is the closing tag for the original opening tag <ul>.

<ul>

<li>Bullet Point</li>

<li>Bullet Point 2</li>

</ul>

Numbered Points List

If you want a numbered list instead of a bullet point list, you copy the same process but instead of using <ul> you will replace it with the <ol> tag looking like:

<ol>

<li>Numbered Point 1</li>

<li>Numbered Point 2</li>

</ol>

The Image below shows how this is done within the coding.

Click to enlarge

Drawing a line under your HTML web page content

The <br> tag is a great way to separate content but another good way is by simply drawing a line across the width of your page to divide sections up. This is simple, just like the <br> tag this tag is a standalone and doesn’t need an end tag.  To insert this line put the <hr> tag between the content you want it to appear and its done.

The image below shows an example of this.

<br>eaking a HTML web page

So you can now group sections of text in paragraphs but what if you just want to have two different sentences on two different lines.

In a word document you would simply press the enter key but in the last post “introducing p, b and i to your list of html tags” you can see that clear space in html coding does nothing once opened in an internet browser.

Thats where the <br> tag comes in, it stands for line break and does exactly that, it breaks portions of text up and moves them onto different lines. This is a standalone piece of code meaning there is no end tag (so you dont need to put </br> ). You can also use it multiple times in a row to create greater space between content.

The screen shot below demonstrates the use of this. In green you can see it used to break a line of text putting it on two separate lines. Where in red it has been used multiple times to create even more space between text.

Click image to enlarge

Introducing p, b and i to your list of HTML tags

So, by now you should be able to;

• open, format and save a page capable of containing HTML coding
• create the basic format for starting a HTML web page, recognise the tags used and understand what they do
• insert contents into that web page 
• open your web page in any internet browser to check your html coding is working
• Insert titles into the body of your web page using a different format from the default setting.

Now to introduce three new tags to your HTML web page

<p>, <b> and <i>.

Lets start with the <p> tag. The <p> tag is used in the body of the page and stands for paragraph. It groups sections of text together like a paragraph seen in a book. If you were to write a chunk of text into the body of your coding, without being wrapped with the <p> tags, it would just come out in a continuous section like seen circled in red below even if its spaced out in the coding.  Paragraphs are a great way to split up the chunks of text making it easier on the eye for user. Even with the <p> tags text will remain in a continuous line even if spaced out in your code (demonstrated circled in green) but each <p> container tags will be spaced apart.

Click to enlarge

Now introducing <b> and <i>. 

<b> formats the display of the text between it and its closing tag </b> in bold.

<i> formats all text between it and its closing tag </i> in italics.

These can either be used separately on sections of text or working together making text both bold and italic. When you do this you should open and close the tags in the reverse order. e.g. If you open <b> first the <i> you should close </i> then </b> to up keep a good code of practice.

This is illustrated in the parts circled in orange above.

So now you’ve meet <p>, <b> and <i> play around with them to make sure you understand how to use them.