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.

Listen Along: Chit chat Across the Pond Episode 411

http://media.blubrry.com/nosillacast/traffic.libsyn.com/nosillacast/CCATP_2015_11_08.mp3

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.

  • The first item in a bulleted list
  • The second item in a bulleted list

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:

  1. The first item in a numbered list
  2. The second item in a numbered list

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.

HTML

The Hyper-Text Markup Language is a computer language for defining the content of a web page.

CSS

Cascading Style Sheets are used to define how a HTML web page looks.

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.

  • This top-level bulleted list item contains a numbered list:

      1. This is the first element in a nested numbered list
  2. This is the second element in a nested numbered list

  • This is a heading within a bulleted list

    This is a paragraph within a bulleted list, and below this paragraph is a definition list also contained within the same bulleted list item.

    First Definition Title

    This is the first definition in a definition list contained within a bulleted list.

    Second Definition Title

    This is the second definition in a definition list contained within a bulleted list.

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.

Extract from “Lines Written on a Seat on the Grand Canal, Dublin”

O commemorate me where there is water,
Canal water, preferably, so stilly
Greeny at the heart of summer. Brother
Commemorate me thus beautifully
Where by a lock niagarously roars

- Patrick Kavanagh

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:

HTML Block-level Tags Demo

HTML Block-level Tags Demo

This is a paragraph, and directly above is a top-level heading. Below is a sub-heading.

This is a sub heading

This is another paragraph.

List Examples

Below this paragraph are sub-sub-headings and examples of each type of HTML list:

A Numbered List

  1. This is the first element in a numbered list
  2. This is the second element in a numbered list
  3. This is the third element in a numbered list

A Bulleted List

  • This is the first element in a bulleted list
  • This is the second element in a bulleted list
  • This is the third element in a bulleted list

A Definition List

The First Definition Title

The first definition text - it’s not all that interesting!

The Second Definition Title

The second definition text - this is also not that interesting!

Block Quote Example

Below is a snippet from a poem by the great Irish poet W. B. Yeats, using a header and paragraphs within the block quote, because that is perfectly allowable:

Extract from ‘Among School Children’

O chestnut tree, great rooted blossomer,
Are you the leaf, the blossom or the bole?
O body swayed to music, O brightening glance,
How can we know the dancer from the dance?

- W. B. Yeats

(notice the use of explicit line-breaks within a paragrpah)

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