Before we get heavily into more advanced layout techniques such as tables, let's talk about a few elements that enable some simple layout tricks:
<blockquote></blockquote> — officially to be used for longer quotes, but often used solely for its indenting effect. If you are using it for a quote, you can use <cite></cite> for the author or title, which will usually appear in italics. Most browsers add a line space before <blockquote> and a line space after </blockquote>, but to conform to good HTML/XML practices, it's best to place the paragraph following a blockquote within <p></p> tags.<br> — inserts a line break (no close tag required, but recent changes in HTML make it advisable to code this as <br />, including the space before the closing slash — see the XHTML spec for details).
<center></center> — centers the text between the tags. (Note that this is an early Netscape tag and therefore not truly elegant! Nowadays, per HTML 4.0 and our friend XHTML, it's better to use <div align="CENTER"></div> for blocks of text and <p align="CENTER"></p> for individual paragraphs.)
<nobr></nobr> — ensures that no line break cuts up the text between the tags (useful for phone numbers and titles and such).
<p></p> — inserts a paragraph break — note that recent changes in HTML make it advisable to include a closing tag (</p>).
<pre></pre> — presents text as pre-formatted (usually in a monospace font such as Courier); useful as a stopgap when you need to dump in text and you don't have time to put it in HTML — note that HTML tags inside <pre></pre> will not be rendered and that most browsers add a line space before <pre> and a line space after </pre>.
It's time to practice: try duplicating some tricky stuff (as usual, clicking this link will open a small browser window; simply close that window to return to this page). Then we'll start talking about more advanced layout techniques by Setting the Table.