Basic HTML Tutorial #1

Knowing even the most basic HTML is a great skill in today’s workplaces. If you use a Content Management System (such as WordPress or Drupal) there will be times when you will need to understand the basics to fix some errant formatting. Alternatively, if you’re planning on becoming a web developer then mastering HTML will be your first step in the journey. The current version is HTML5 which was first introduced in 2014.

Almost all HTML elements follow the open and close rule, where open brackets around the <tag> start the element, and close brackets around the </tag> end the element.

This tutorial covers the use of the most common HTML tags. Those that create paragraphs & lists and make text bold or italic.

Paragraph Tags

Paragraphs of text should be placed within paragraph tags, and should be opened with a <p> and closed with a </p>. If your paragraphs are not formatted correctly they could look very weird.

List Tags

Lists need to be specifically coded in a HTML document (copying and pasting from MS Word definitely wont work!). There are two major types of lists; ordered lists and un-ordered lists.

Un-ordered Lists

Un-ordered lists are defined by the <ul> tag. Each list item is then defined by a <li> tag which must be opened and closed. The end of the list is then defined by a closed </ul> tag.

Ordered Lists

Ordered lists follow the same structure as un-ordered lists expect they start with the <ol> tag and are closed with </ol>.

Bold & Italic

As with creating paragraphs, making text either bold, italic or both with HTML requires a specific opening and closing tag around an area of text.

<b>Bold</b>
<i>Italic</li>

The b tag makes an element bold Bold
The i tag makes an element italic Italic
Combining the b & i tags makes an element Bold & Italic

In reality, its best practice to style your text using CSS but some CMS systems still use these HTML tags so it’s important to understand them.

HTML Tutorial 2 »

For more great HTML code tutorials check out these useful articles: