Block- and inline-level tags

HTML tags sit in two camps: block-level and inline-level.

Block elements fill our layout. By this we mean they expand to fit the full width of the available space, pushing other elements (even other block-level elements) onto the next line – without us having to do any styling. There are quite a few basic HTML tags that are defined as block-level, which we'll cover later in this article.

Inline elements don't fill our layout. By default they have no sense of width (unless we use styles to overrule this). They exist quite happily inside block-level elements, just going with the flow.

HTML tags

Block-level

Here's a list of block-level elements with definitions:

<h1>

First header tag. Only one per page.* Take a look at this newspaper's front page to see why the examples below are marked up as demonstrated.

<h2> <h3> <h4> <h5> <h6>

The other available header tags. As many of these per HTML page as you feel you require. However, they must be written sequentially, so don't use, for instance, the <h3> before the <h2>.

<div>

General-purpose box. Primarily used to hold our layout together.

<p>

Paragraph tag. Most every piece of copy should be inside them.

<ul>

Unordered list tag. By default will display bullet points against each of its list items. Use when you have points to get across (that wouldn't be satisfied by using a <p> tag) and that their order is not necessarily important.

<li>

List tag. Is used inside <ul>s and <ol>s for each list item required. These should not be written without a parent.

<ol>

Ordered list tag. Also uses list items within it. but by default will display numbers against each of them.

<dl>

Definition list tag. Its 'list items' are made up of two child tags and is itself invalid without them.

<dt>

Definition list term tag. Required to establish the title of the definition list item.

<dd>

Definition list description tag. Required for writing the description that relates to the definition list title.

Definition lists, or rather their definition titles, can have multiple definition descriptions. As a concept, it is a little odd, but in comparison to other types of HTML lists it at least allows us to have finer control over what kind of information we show and how we can style it. Essentially, until the next definition title (<dt>) starts in the list, you can have as many definition descriptions (<dd>) as you require. However, they must relate to what the definition title is on about – otherwise we lose semantic meaning to the markup and its content. Here's a quick demonstration using a second definition list with an image inside it:

<table>

Table tag. You can find out more about it, and its associated tags, in understanding HTML tables.

<form>

Form tag. Allows us to create forms that can be filled out by visitors. It has quite a few tags that are only allowed inside it, some demonstrated below for context. Read the article about HTML forms for more detail.

<blockquote>

Perfect for writing quotes. Combine it with a <p> tag for maximum effect and control.

Inline-level

Here's a list of inline-level elements with definitions:

<span>

The ultimate, all-purpose inline element.

<a>

The anchor is an extremely useful inline element. Use its href attribute to link to other HTML pages.

For an email address use the same parts, but just prefix the email address (inside the href) with mailto:. Clicking the link will launch the user's default email program, which may not always be the desired result. Best to write the email out in full, in the page, so users can make their own choice.

Concatenate ?subject= directly after the email address to pre-fill the subject line for them.

<strong>

Make text bold – without using CSS.

<img />

This self-closing tag allows you to show images on your HTML page. Use the src attribute to hook it up to the relevant image. Add the alt attribute to describe it briefly, so that those that won't be able to see it can still understand it.

<abbr>

If you're writing a word as an abbreviation, wrap it in this tag. Use the title attribute to explain it in full.

<acronym>

If you're writing an acronym, like BBC, wrap it in this tag. Use the title attribute to explain it in full.

<address>

If you're writing an address then wrap it up in this tag, using other markup to help control its parts. It's all about semantics, remember, so if there's a tag for something in particular, use it.

HTML 5 tags

In the not-quite-fledgling-anymore world of HTML5, there are series of new tags available for use and some old ones that are now deprecated. As it stands (as of 2012-06-13), the National Trust's national website doesn't use any of these. However, newer, stand-alone websites, should start using these.

<section>

Section tag. Not a replacement for the <div> tag, but they can help to give your HTML more implied structure and should contain <header> and <footer> tags.

<header>

Use this tag to define where your header elements sit, generally including visual identity and a main menu of navigation.

<footer>

Use this tag to define where your footer elements sit, sometimes including additional menus and copyright notices.

<article>

The article tag is very useful. Treat its contents as if they were alone, separate from the wider context of the document. Partly why multiple <h1>s can be used, as every <article> tag can accommodate its own <h1>.

<aside>

This tag represents content related to surrounding tags, typically the <article> tag.

<nav>

Keep your menu items in this tag, typically an unordered list of links to other pages. There is no need to use this for individual anchors.

You can find out more about HTML5 tags on External site: HTML5 Doctor, a particularly useful resource for using them in the field.