There are dozens of HTML elements which can be used to mark up the content of a web page. Some of these elements are structural, i.e. they define what the content is (a Paragraph, a list, a quote, etc.); whilst some are presentational, i.e. they define what the element looks (or sounds) like (right aligned, italics, blue, etc.). In general the use of presentational elements is deprecated. This means that the use of a non-HTML method of suggesting presentation (such as Cascading Style Sheets - CSS) is preferred.
The other main distinction between types of elements is that between block elements and inline elements.
Block elements (such as a Paragraph, Form, Table, etc) mark up a large portion of the content and are generally are preceded and followed by a line break. Block elements may sometimes contain other block elements and can almost always contain inline elements.
Inline elements (such as emphasized text, a quote, an image or a link) mark up a small section of content and can sit in the middle of a line of text without causing any line breaks. They may never contain block elements but may contain most other inline elements.
So let's demonstrate a few elements and use them to add a little structure to our basic HTML document.
The most widely used block element is the Paragraph <P>...</P>. The paragraph
is the smallest block into which copy can be split and as such it can not
contain any other block elements, but it can contain any inline element.
Paragraphs are typically rendered by browsers by having a blank line before
and afterwards, but this presentation is not set in stone - a new browser
could distinguish paragraphs by making the first line indented as in most
novels.
The P element has an attribute ALIGN which has the possible values of left,
right center and justify. So <P ALIGN="right">...</P> will cause the text in
the paragraph to be right aligned. Left is the default value and is only needed
if the Paragraph is contained in some higher level block with a different
alignment.
Similar to P elements but more specialized are Headings. These come in six
levels, <H1>...</H1> is the highest level of heading whilst <H6>...</H6> is the
lowest level. Like Paragraphs they can not contain any other block elements but
may contain inline elements. Headings are typically rendered as larger and
bolder than normal text with H1 elements being the largest and H6 the smallest.
One important rule regarding headings is that it's bad HTML to skip a level. So if your document starts with an H1 then the next heading should be a H2 or another H1, not an H3. However, some large documents span across more than one HTML page, so it isn't always the case that every document will start with an H1. A large report may have an H1 on the first page and then each section will start with an H2 and each sub-section with an H3. As this report is split up into multiple HTML pages, each page may start with a different level of heading, but at no point will levels be skipped.
Headings take the align attribute in exactly the same way as Paragraphs.
So a simple HTML document could look like this:
<H1 ALIGN="center">Welcome to my web page</H1>
<P>This is my web page, is it not groovy?</P>
<H2>My life</H2>
<P>These are some of the things I've done....</P>One special block element is the Horizontal Rule <HR>. This is an indication
of a division between sections of a document and is generally rendered as a
horizontal line across the page (hence the name). It's an empty element with
no content and no end tag. It takes various attributes, the most commonly
supported are ALIGN, which works exactly as with P, SIZE which specifies the
thickness of the line in pixels and WIDTH which specifies the length of the
line in either pixels or as a percentage of the page width.
As the page width will vary from user to user it's better to use a percentage
than to try and guess and pixel width. None of these attributes are required
and the default values (for IE5 at any rate) are given here:
<HR ALIGN="center" SIZE="2" WIDTH="100%"> is the same as <HR>.
But what about inline elements? They include a method of marking text as
emphasized <EM>....</EM>. This is typically displayed as italics by graphical
browsers, but this is not always the case: colour, outlining, underlining,
etc. could all be used to indicate emphasis. The important factor is that the
user agent recognize the text as emphasized and renders it in such a way that
the user gets the point that it is emphasized. If you really want to emphasize
something then you can use <STRONG>...</STRONG> which simply indicates strong
emphasis. This is typically rendered as bold text, but again that is not
required.
Presentational elements exist which do mean simply 'make this text
italics/bold'. They are the <I>...</I> and <B>...</B> elements. These should
not be used to denote emphasis, but should be used when the text is italicized
or bolded for purely typographic reasons or for cases where no structural
element exists. For instance the taxonomic (latin) names of plants and animals
are normally rendered in italics, but there is no structural element to
indicate a taxonomic name (i.e. no <TAX>...</TAX> element) so in this case
using <I>Home sapiens</I> is completely appropriate.
That's a small selection of block and inline elements. Enough to mark up basic copy into something easy to read.