Basic HTML Examples


 

 

When you are working on your website it is important to understand the basics behind HTML coding, because HTML is the code which an internet browser reads and then displays the website according to what is in the HTML code. There may also be times when you'll need to edit HTML code directly or diagnose a problem. Most HTML tags have an opening and closing tag, and only the HTML within these tags are affected.

It is also important to understand how styles work. When your website is designed styles are also created for the various HTML tags on the site so that text appears in the correct colours and size.

Heading Tags

These tags are used for page headings and sub-headings. There are 6 different headings available for use and each one can be styled differently, you can see the opening and closing tags for each heading tag below:

Opening Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Closing Tags: </h1>, </h2>, </h3>, </h4>, </h5>, </h6>

Example:

To create a main heading on your page (such as "Basic HTML Examples" at the top of this page) you would need to use this HTML: <h1>Basic HTML Examples</h1>

Paragraph and Line Break Tags

The paragraph tag is used to create paragraphs in your text. When a paragraph tag ends and a new one starts a new line is automatically inserted between the 2 groups of text to separate them.

Example:

<p>A dozen lunchtime diners at an upmarket Sydney cafe were left stunned yesterday when about 30 police stormed the premises to arrest two men.</p><p>Employees and diners at the Lavender Blue restaurant at McMahons Point were ordered to freeze.</p>

Paragraph Opening Tag: <p>
Paragraph Closing Tag: </p>
Line Break Tag: <br />

When you are using a paragraph tag and want to create a new line without inserting the extra line which separates paragraphs, you can use a line break. A line break tag will make any text that follows the tag appear on the next line below.

Example:

<p>This is the beginning of the paragraph tag, I will now insert a line break tag<br />
and as a result this text is now on the next line down.</p>

Bold Tags

To make some text bold, like this, then you would insert the text inside the "strong" tags.

Example:

This is the HTML code required to write the line above: <p>To make some text bold, </strong>like this</strong>, then you would insert the text inside the "strong" tags.</p>

Opening Bold Tag: <strong>
Closing Bold Tag: </strong>