HTML Text Basics

When you use the HTML templates which are available on this website you will need to know a few basic skills to get by. This Post is the first in a series that will explain in basic terms, how to use the templates successfully.

Please Note: This Post is not meant to be a in depth explanation of HTML Tag. It is only supposed to assist with adding information to the templates available on this site. For further in depth explanations please see W3schools

The Tags:

The P (Paragraph) Tag – <p></p>

When adding text to a page you may want to break it up into paragraphs. Unlike Microsoft Word or any other such similar products, we need to tell the browser where one paragraph ends and another begins.

To define a paragraph, use the the <p> tag. Web browsers will add space, called margins, both before and after each <p> element

Example:

<p>This is how a paragraph is set out with a opening tag and a closing tag. Not that the closing tag has a forward slash before the p.</p>

which appears as the following when paragraphs follow one another:

This is how a paragraph is set out with a opening tag and a closing tag. Not that the closing tag has a forward slash before the p.

The B (bold) Tag – <b></b>

At some stage, you will want to highlight your information. To do this place the bold tag around them:

Example:

<b> These words are bold</b>

which then becomes:

These words are bold

The Strong Tag – <strong></strong>

The strong tag does the same job as the bold tag in the sense that it makes text bold. The difference is that text within the strong tag is picked up by browsers and search engine spiders as being more important and relevant in relation to the content on the page.

<strong>These words are bold but have been highlighted using the tag strong</strong>

which then becomes:

These words are bold but have been highlighted using the tag strong

The i (Italic) tag – <i></i>

Using the <i> tag around text will create that text to be shown as italic.

Example:

<i> These words will show as are italic</i>

which then becomes:

These words will show as are italic

The em (emphasis) tag – <em></em>

Like the <b> and <strong> tags the <em> tag does exactly the same as the <i> tag but is seen by browsers and search engine spiders as being more important and relevant in relation to the content on the page.

<em>These words are italic but have been highlighted using the tag em</em>

which then becomes:

These words are italic but have been highlighted using the tag em

Headings

To create a heading surround your text with the heading tag. There are six tags that create headings of different sizes:

<h1>This is a heading of size 1</h1> becomes:

This is a heading of size 1

<h2>This is a heading of size 2</h2> becomes:

This is a heading of size 2

<h3>This is a heading of size 3</h3> becomes:

This is a heading of size 3

<h4>This is a heading of size 4</h4> becomes:

This is a heading of size 4

<h5>This is a heading of size 5</h5> becomes:

This is a heading of size 5

<h6>This is a heading of size 6</h6> becomes:

This is a heading of size 6

Need further Assistance? Email me!