Text formatting and
the fundamental layout
elements in HTML

The next thing you'll need to know is how to format your text, and lay it out approximately as you want it. Once again, only a few elements need to be known to give you access to all the effects you're likely to need.

<p> . . . </p>

This is the single most common element in HTML, and indicates a new paragraph. Browsers display separate paragraphs by inserting a blank line between them. This tag can also be used to put a single spacing line before and after images, for example. The </p> closing tag is not technically required, but it's a very good idea to get into the habit of using it properly, for a number of reasons that won't be explained here, for conciseness.

<br>

This is the line break element, which forces text onto a new line, but doesn't leave a blank one. Use this to create simple lists of text items on separate lines, when you don't need to use the more stylish list elements given later. You can use multiple <br> tags to produce any number of spacing lines; multiple <p> tags will not work for this. This is not recommended practice, but it's about the only thing that works properly, until style sheets are properly implemented in the browsers.

<div> . . . </div>

This is the new generic block-level structural tag, which is used to split a document into logical sections, or to group a heading with its paragraph of text, for example. It doesn't imply any presentational attributes, other than a line / paragraph break in the text, and is therefore usually combined with style sheets to define presentational attributes for each section.

<span> . . . </span>

This is the new inline grouping tag, which is effectively an partner to <div>. It, too, is typically used with style sheets. Generally, its purpose would be to change the rendition of certain text entities without disrupting the flow of the text block, such as changing the color of a word within a line. It therefore does not imply any line or paragraph breaks.

<h1> . . . </h1>

The common heading element, at its largest possible size. Text between these tags is usually displayed in a bold, headline style font. Heading text automatically occupies its own paragraph, so don't use the <p> tag in conjunction with headings.

<h6> . . . </h6>

The smallest possible heading size. By substituting in the numbers 2, 3, 4 & 5, the intermediate sizes can be chosen. Here is a visual example of what each heading size looks like:

<strong> . . . </strong>

The generic element for making the text appear stronger, usually making it look bold. Just place this pair of tags around the word, or group of words, that you want to alter.

<em> . . . </em>

A similar element for emphasizing text, usually making it appear in italics. The nice thing about it is that it will produce some sort of noticeable effect in text mode browsers, even though they can't render italics explicitly.

<b> . . . </b>

This is the bold element, whose effect hardly needs explaining. In general, it is preferable to use style sheets to specify bold text, and to stick to <strong> or <em> alone in your HTML code, but this tag works in all modern browsers.

<i> . . . </i>

Similarly, this is the italic element, which will make any chunk of text appear in italics. This element is now in common use, being understood by all modern browsers, but again, it is preferable to use style sheets for the most part.

<u> . . . </u>

Use this to underline text. This element can also be nested within others, to create compound effect. Note that underlining tends not to look very stylish though, so don't overdo it on headings and titles. Yet again, this effect can be produced using style sheets.

<sub> . . . </sub>

Use this to create subscript₁ characters. Again, this element can also be nested within others, to create compound effect, though why you'd want to have bold or italic subscripts is beyond me!

<sup> . . . </sup>

As you might guess, this is the similar superscript² element. This is clearly quite a useful one, given that there's no other easy way to generate superscript characters, unless you're very clever with style sheets.

<pre> . . . </pre>

This pair of tags causes all intermediate text to be displayed in fixed width typewriter font, and preformats it as it appears in the actual HTML file. Extra spaces and carriage returns in your source file will now be rendered literally; normally they would be ignored by HTML. You can use this to create aligned columns of data, or simple tables, for instance.

<kbd> . . . </kbd>

A similar element, which produces fixed width text, but does not perform the preformatting operations of the previous element. It's best for short items on a single line, such as displayed representations of computer commands or filenames. The tags <code> and <samp> serve similar functions, though you'll rarely see them in use.

<big> . . . </big>
<small> . . . </small>

These tags can be used to simply cause all text placed between them to be rendered either one size larger, or one size smaller, than the current size, respectively. You're not generally advised to use them, as style sheets are a better option, but they work in current browsers, and are simpler.

<center> . . . </center>

As you would expect, this element allows you to create centered lines and paragraphs of text, as well as images and links. Note the American spelling of the word! It's probably most useful for headings, images and footers. Though you'll see it everywhere these days, and all browsers support it, it is technically deprecated, and you're advised to use style sheets instead to control your text alignment.

<blockquote> . . . </blockquote>

These tags create a separated paragraph of text which is indented at both sides. This paragraph has been rendered using <blockquote>, to show you the effect.

&   "   <   >   £   ©

These are escape sequences, which allow special characters to be included in your displayed text. The six above represent ampersand, double quotes, less than, greater than, the pound sign and the copyright symbol. You cannot simply include such characters in your source as they stand, because HTML tries to interpret them as instructions. For example, to display an HTML tag on a page, such as in this guide, you must use the &lt; and &gt; sequences to denote the angle brackets. Technically, escape sequences should be terminated by a semicolon, but most browsers are not fussy. Escape sequences must be lowercase, unlike elements.

<hr size="x" width="x">

This tag creates a graphical horizontal line across the browser window, used for visually separating sections within HTML documents. There's one just below this, to indicate the end of the page. The size attribute defines the thickness of the line in pixels, but you shouldn't need to use this, as the default value looks best. The width attribute allows you to set the percentage width of the browser window that the line will occupy. Combining the two attributes, you can create 3D boxes of any size, though of course, you can't put anything in them!