Web design: learning HTML

Marking up text

Block tags and inline tags

As you write your content, you should be thinking about what kind of text it is. HTML provides you with many tools to mark up your text appropriately and you can use style-sheets later to change how that marked up content looks. One big distinction between the kinds of tags you use in marking up text is whether they form a separate block of text on their own, or whether you can use them to mark up text inside a paragraph block. There are limits to which tags can go inside which other tags: you can't put a paragraph inside a paragraph, for example. In the tables below, some tags are listed together, which means they have similar meanings. Make sure you use the same end tag as the matching start tag however. <strong>Example</b> does not work.

Inline tags
Start tags	End tags	Meaning
`<strong>, <b>`	`</strong>, </b>`	Bold, strong text.
`<em>, </i>`	`</em>, <i>`	Emphasised, italic text
`<tt>`	`<tt>`	`Teletyped (mono-spaced) text.`
`<code>`	`</code>`	`A piece of code`
`<samp>`	`</samp>`	`Sample output from programs or scripts, etc.`
`<kbd>`	`</kbd>`	`Text to be entered by a user`
`<var>`	`</var>`	`A variable or program argument`
`<acronym title="...">`	`</acronym>`	An acronym. Like TMI .
`<span>`	`</span>`	General-purpose inline tag.
`<br>`		A line-break

<span> doesn't have a default action on any browser: its purpose is to hold an id or a class so you can attach a style-sheet style to the piece of text. You'll see this used later. Acronyms, variables, samples and code look different on this page than by default because they have had their default styles changed. You can find out how to do this later, too. A typical piece of HTML code might look like this:

This <em>isn't</em> the first example, and it won't be the last. If you type <kbd>Hello World</kbd> then the computer will reply with <samp>Hello yourself</samp>.<br> This is on a new line, but it is still part of the same paragraph.

Of course you can mark up a section inside another section with different tags, they just accumulate. After all, your main content is already inside a <body> tag which is inside an <html> tag. However tags aren't allowed to overlap. That is...

He said, "<em>Damn, this coffee is <strong>strong</strong></em>."

...is fine, but...

He said, "<em>Damn, this coffee is <strong>weak.</em></strong>"

...isn't.

Those are nearly all the inline markup tags there are. Once you've learned the block tags, you can write a simple web page. Web browsers divide your document into logical blocks like headers, paragraphs, sections, lists, and tables. Here are the most useful block tags:

Block tags
Start tags	End tags	Meaning
`<p>`	`</p>`	Paragraph block.
`<ol>`	`</ol>`	Ordered list.
`<ul>`	`</ul>`	Unordered list.
`<dl>`	`</dl>`	Definition list
`<h1><h2>..<h6>`	`</h1></h2>..</h6>`	6 levels of headings
`<pre>`	`</pre>`	Pre-formatted text
`<blockquote>`	`</blockquote>`	A long, multi-lined quote.
`<div>`	`</div>`	General purpose block
`<hr>`		A "hard-rule". A line across the screen or the containing block.

Paragraphs

Every block of text apart that isn't a header or some other kind of block listed above should be treated as a paragraph with a <p> at the start and a </p> at the end. Most of your page will be paragraphs, which contain text and pointers to images.

Ordered and unordered lists

Unordered lists are also known as "bulletpoint lists" and are the foundation of a lot of very boring PowerPoint presentations. Ordered lists are numbered. Both types can only contain list item ( <li> ) tags, like so:

<ul> <li>Bread</li> <li>Milk</li> <li>Cheese</li> <li>Wine</li> </ul>

Using the <ul> tag around your list items will put a bullet-point at the start of each item, and using <ol> will put a number. You can use style-sheets later on to change the style of bulletpoints and numbering (unordered lists can have round, square, or image bulletpoints, for example, and ordered lists can use a variety of different numbering schemes, like roman numerals). List items can contain other lists and block and inline elements like this:

<ul> <li>head <ul> <li>eyes</li> <li>nose</li> <li>mouth</li> </ul> </li> <li>body</li> </ul>

... is just fine and will look like this:

head
- eyes
- nose
- mouth
body

Definition lists

Definition lists are lists that follow a style of term and definition. You create a list of terms, then define each one, much like the list you are reading now. "Definition lists" is the current term, and you are reading the definition. In HTML, definition lists look like:

<dl> <dt>HyperText Mark-up Language</dt> <dd>A subset of SGML devised by Tim Berners-Lee to describe hypertext documents to specialised web browsing software.</dd> </dl>

Headings

The header tags mark a piece of text as a header. The numbers mark the level of the header: <h2> tags should only follow <h1> tags, <h3> only after <h2> tags, etc. By marking up your document with the correct headers you create a consistent layout that makes sense to read. Some text-mode browsers like Lynx use the current header level to indent text and make it more readable, and screen-reading software like JAWS allows users to skip between sections with special key-strokes. As with the rest of your document, you can change the size and style of headers with style-sheets so you should never use the wrong header tag just because of its size or style.

Pre-formatted text

The <pre> tag wraps around a section of text that you want to appear on-screen exactly as laid out in the HTML. In general this isn't a fantastically good idea, but it has its uses. Pre-formatted text won't wrap lines to fit the screen, and you can only insert very few other HTML tags into a section marked as preformatted. In general, there are better ways of presenting text than preformatting, but an example used in the specification is poetry:
<pre> Turning and turning in the widening gyre The falcon cannot hear the falconer; Things fall apart; the centre cannot hold;</pre>

Block quotes

When quoting someone in your document, and the quote is longer than a few lines, then a blockquote is the answer. Blockquotes are indented by default to mark them apart from your own writing, but because they do not show quotemarks at the start or end, they have been widely misused as a way of indenting blocks of text. Don't unnecessarily complicate your code! If you want to indent a section of text, you can do it with one line in a style-sheet later. The HTML specification's example of a blockquote is a paragraph from J.R.R. Tolkien's The Two Towers. Blockquotes can contain other block elements like paragraphs and lists.

Divisions

Using the <div> tag allows you to group blocks of code into a section with a name or a type. Later, when we explore style-sheets, you'll see that you can lay out sections marked by <div> tags on the screen while maintaining a a meaningful order in the content for people who do not use visual browsers or are otherwise limited. For now though, just keep this tag in mind.

Hard rules

A hard-rule is simply a line across the current block. They're generally used to split pages into sections visually, though they aren't much to look at. An advanced technique for web design is to add hard rules to your content as you type it, and then use style-sheets to hide them so that they don't appear on visually rich browsers, but still show on older or less visually capable browsers so that every browser has some layout. You can read about it later in the optional "advanced techniques" section.

Entities

If you're really on the ball, you'll be thinking, "If < and > are used for tags, how do I write them in my text?" The answer is that you use what are known as HTML entities to tell the browser to include a symbol. Entities begin with the & character and end with a ; character. In between you either give a short name, or a number, whichever is more convenient to you.

The names for < and >, as they are used in mathematical notation, are "less-than" and "greater-than", and the entity names are < and >. There are many more entities you can use in your code, like © for the copyright symbol ©, ™ for the trademark symbol ™, and € for the Euro currency symbol €.

Now though you're probably thinking, "But if HTML thinks that & is the start of an entity, how do I write an & sign?". Well the answer is & (for ampersand). One of the most useful things that HTML editors can do for you is to handle these special characters for you automatically, but it's still useful to know what they are. Stray or spare < and > characters can stop a whole web page from showing on your browser, so look out for them if you don't know why your page isn't showing properly. You should also be careful how you write your entity names. In HTML 4, tag and attribute names aren't case sensitive (that is, <BODY> is the same as <body>), but entity names are case-sensitive (&egrave; is not the same as È as shown here: è È). There's a list of many common HTML entities on the HTML Quick-Reference page of this site, and you can get a full list of HTML entities from the Web Design Group's reference guide.

An extended example

The following is an example of a standard web page. It uses many of the tags listed above, uses tags appropriately, and is tidily marked up. This example shows up the same on virtually every graphical browser, and displays well on every other one. Make sure you're familiar with the code before you continue past this example; you can copy it into your text editor and change it if you want to experiment. Notice the clear structure discussed earlier: the document begins with a DOCTYPE, has a head and a body for the content, which is separated into blocks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>My first page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <h1>My first page</h1> <p>Hello. My first page is about bees. Bees are my favourite thing in the whole wide world.</p> <h2>Bee facts</h2> <ul> <li>Bees are insects</li> <li>Bees are black and white and yellow</li> <li>The purpose of the bee is to make honey</li> </ul> <hr> <h2>Bee hives</h2> <p> Bees live in hives which is where the queen lives. Queen bees lay bee-eggs in special holes in the hive called <em>honeycomb</em> which is made by worker bees. Worker bees do <strong>all</strong> the work and never get paid, but they don't mind because they're stupid. </p> <p> Bees make honey out of nectar and flower pollen and they use it to feed the baby bees when they hatch. <br>Sometimes when you buy honey you get a mouthful of dead baby bees. </p> </body> </html>

You can see how this example looks here. You can also either copy this example into a text file, or download the link (usually right-click on the link and choose "Save target as...") to play around with it on your computer. Get comfortable with which tags do what before we continue.

Lazycat.org | matt robinson