wp-content/uploads/2016/01/PBS_Logo.png

In the previous instalment we introduced HTML, learned about HTML tags in the abstract, and looked at a basic template for all HTML pages. Over the next few instalments we’ll be working our way through the common HTML tags.

There are two major types of HTML tags, block-level tags, and inline tags, though it should be noted that there is a much less common third type which is a hybrid of the two, referred to as inline-block. For now, we’ll be ignoring these odd-balls.

Block level tags define regions of content – things like titles, paragraphs, lists, list items, and so on. Inline tags affect parts of a block – for example, a few words within a paragraph can be marked for emphasis. With practice the distinction will be comes obvious, especially when we get to the more advanced aspects of CSS, but the different in type can be confusing. A handy way of remembering the difference is that opening a new block-level tag will always start a new line on your page.

In this instalment we’ll start with some of the most common block-level tags.

Headings

There are six heading tags in HTML – <h1>, <h2><h6>, with <h1> being top-level heading, <h2> a sub-heading, <h3> a sub-sub heading, and so on.

As a general rule, pages generally have just one top-level heading, a few sub-headings, and perhaps the odd sub-sub heading, you’ll very rarely need to use the higher-numbered heading tags. Search engines use heading tags to help them understand what a page is about.

No other block-level tags should be contained within heading tags, but inline tags can be (not that that is often desired).

Paragraphs

Paragraphs of text should be contained within <p> tags.

No other block-level tags should be contained within paragraph tags, but inline tags can, and often are, contained within paragraph tags.

Lists

There are three types of list within HTML, bulleted lists, numbered lists, and definition lists.

Bulleted Lists – AKA Un-Ordered Lists

A bulleted list is defined by the <ul> tag – this stands for un-ordered list.

Each block of bulleted text should be contained within <li> tags – this stands for list item.

<ul> tags should only contain <li> tags. <li> tags can contain other block-level tags, including other lists to create nested lists, as well as inline tags.

Numbered Lists

A numbered list is defined by the <ol> tag – this stands for ordered list.

Like with bulleted lists, each block of text in the list should be contained within <li> tags. Note that the browser viewing the page takes care of the actual numbers. This makes it very easy to re-organise the list without getting the numbers out of order.

Again, like with <ul>, <ol> tags should only contain <li> tags.

Example:

Definition Lists

Think of a definition list as being like a dictionary – there is a term, and then there is a definition of what that term means.

The entire list should be contained within <dl> tags. Terms should be contained within <dt> tags (for definition title), and each definition should be contained within <dd> tags (for definition data).

If multiple terms have the same definition, you can have a number of consecutive <dt> tags followed by a single <dd> tag.

<dl> tags should only contain <dt> and <dd> tags, <dt> tags should only contain inline tags, and <ds> tags can contain any other tags, including block-level tags.

Nested Lists

Because <li> and <dd> tags can contain any other tags, lists can be inserted into list items to create nested lists. A nested list can contain a mixture of all the different list types.

Block Quotes

The <blockquote> tag is designed to mark a block of text as being some form of quotation.

Block quotes can contain both block and inline tags, including other block quotes.

Final Example

Let’s finish with a final working example.

Start by adding a folder called pbs3 to the document root of your web server. In there, create a file called index.html with the following contents:

Make sure your web server is started, and then visit http://localhost/pbs3/ in your favourite browser to see what this page looks like. It should look something like:

PB3 Final Example