Basic concepts

Advanced concepts

RichInStyle.com HTML 4 guide - Content-based elements

Content-based elements

Block-level elements

Content-based elements

The main thing about HTML is that it is content-oriented. This means that you should mark text according to what it contains.

For example, if you mark your address with the ADDRESS tag, you can then tell the web browser that you want ADDRESSes to be italic, or green or whatever. If you just mark it as a paragraph, this is not possible. Equally, you should avoid using tags for reasons other than they were intended. Thus you should not use the OL (ordered list) tag for reasons other than creating ordered lists. This is because if you do, it makes it impossible for you to specify that you want all ordered lists to be displayed in a certain way, since it would affect text that wasn't really an ordered list at all.

Block-level elements

Block level tags are so-called because they create a block - i.e. a new line before and after.

<P>

The most basic of all tags, this indicates a paragraph. It is closed by a </P> tag or by implication - another block-level element. E.g.,:

<P>
  This is a paragraph
</P>
<P>
This is in a separate P element.

<P>
  This is a paragraph
<P>
  This is a paragraph - the other one's end is implied.

The P tag may only contain inline tags (i.e. not other block tags such as P).

You should avoid using empty paragraphs to create white space.

Headings

As already explained there are 6 types of heading, from H1 (largest) to H6 (smallest).

You should try in use headings in a logical way:

<H1>THE WOMBAT HOME PAGE</H1>
<H2>Habitat<H2>
<H3>Australia</H3>
<P>
...
</P>
<H3>New Zealand</H3>
<P>
...
</P>
<H2>Food</H2>

This is a good way to structure your headings - going from H1 for the overall title, to H2 for categories to H3 to divisions of these categories. You should try and avoid skipping out numbers - e.g., going from H1 to H3.

The heading tags may not contain other block elements, so, for example, <H1> A heading <P> A paragraph </P><H1> is not valid. They must always have an end tag.

What now?

Believe it or not, having considered just a few elements, you now know enough to write great pages. This page, for example, is almost entirely constituted of H and P elements. Now that you really have the ability to write a good page, I suggest you go and practice your newfound skill. Remember, the essential elements (if you will pardon the pun) of an HTML page look like this:

<HTML>
  <HEAD>
    <TITLE>
      My first web page
    </TITLE>
  </HEAD>
  <BODY>
    <H1>
      About me
    </H1>
    <P>
      I live in New Hampshire.
    </P>
  </BODY>
</HTML>

Once you have done this, I suggest you continue by reading about all the other elements, but remember that pages will be mainly constituted of headings and paragraphs.

<BLOCKQUOTE>

This indicates that the following text is a block quote (i.e. a long quote, not just a few words). For example:

<BLOCKQUOTE>
  To be or not to be, that is the question.
</BLOCKQUOTE>

Generally browsers distinguish block quotes by indenting them both from the left and right margin. BLOCKQUOTEs must always be closed by an end tag.

<PRE>

Normally web browsers ignore line breaks and additional spaces between words. This is because HTML would be very difficult to read if it only had spaces where they appear on screen. However, <PRE> overrides this, meaning that spaces and line breaks appear on screen where they do in the document.

In addition, to ignoring spacing, most browsers display PREformatted text by default in a monospaced font.

<PRE>
A bit here.
                     And some more over here.
A   N    D    S O  M E        EXTRA S     P A     C E S
</PRE>

The PRE tag may only contain inline elements (not block ones such as P or H1). It must always be closed by an end tag.

<DIV>

The DIV tag is very similar to the P tag. However, it differs in two main ways: 1. browsers tend to have a whole blank line between paragraphs, whereas DIV tags just have a line break, 2. DIV tags may contain other block elements, making them useful for marking logical divisions in documents, 3. DIV elements must be closed with an end tag. E.g.:

<DIV>
  <P>
    A paragraph inside a DIVision.
  </P>
  <P>
    And another.
   </P>
</DIV>

The DIV element is best reserved for containing other elements so that styles can be applied to all of them.

<ADDRESS>

This is used for marking something as your (e-mail/home/company, etc.) address. E.g.

<ADDRESS>
  E-mail me at joepublic@joepublic.com
</ADDRESS>

Browsers tend to mark addresses in italic.

The ADDRESS tag may only contain inline tags. It must always have an end tag.

Lists

There are two main types of list:

Numbered (or ordered) lists

And bulleted (or unordered) lists

Therefore, there will be two HTML elements: one for ordered lists, and one for unordered lists.

LI

This states that the element is a list item. List items may only occur inside the OL or UL elements. E.g:

<LI>
  This is a list item
</LI>

Note that the example above is not valid on its own, since you have failed to state what sort of list you want it to be. To see the types of list, read on.

The end tag of list items can be omitted, so <LI>This is a list item<LI>This is another list item is also valid.

OL

This states that a list is ordered. E.g.:

<OL>
  <LI>
    This list item will be prefixed by the number 1.
  </LI>
  <LI>
    And this one will be prefixed by the number 2.
  </LI>
</OL>

That example might be rendered like this:

This list item will be prefixed by the number 1.
And this one will be prefixed by the number 2.

Browsers left-indent ordered lists by default.

UL

This states that a list is unordered. E.g:

<UL>
  <LI>
    This will be prefixed by a bullet.
  <LI>
    As will this, by an identical bullet.
</UL>

That might be rendered like this:

This will be prefixed by a bullet.
As will this, by an identical bullet.

Note in the code how the optional end tags of the LI elements have been omitted.

Browsers left-indent unordered lists by default.

Definition lists

These are used when you are defining a number of phrases, terms, words, etc. E.g.:

Block element: One that is preceded and followed by a line break
Tag: Something in between < and >.

This type of list is not required nearly as often as the ordered and unordered kinds.

Here is an example of the code for a definition list:

<DL>
  <DT>
    Term to be defined
  </DT>
  <DD>
    Definition
  </DD>
</DL>

Note that a single definition description may define several definition terms and vice versa.

<DL>

This, like OL and UL, indicates that there is about to be a Definition List. The Definition List is required in order to enclose the Defintion Term and the Definition Description.

<DT>

This indicates the Term to be Defined.

<DD>

And this indicates the Definition Description. Defintion descriptions are by default left-indented.

Inline elements

Inline elements are used for marking bits of content within a block. For example, you might like to specify that a piece of text within a line should be bold. Like this piece of bold text.

That effect was created by this code:

<P>
Inline elements are used for marking bits of content within a block. For example, you might like to specify that a piece of text within a line should be bold. Like <B>this piece of bold text</B>.
</P>

Here is a list of the main inline elements:

Name of tag	Content	Typical formatting
<EM>	EMphasized text	Italic
<B>	Bold text	Bold
<I>	Italic text	Italic
<BIG>	Big text	Bigger
<SMALL>	Small text	Smaller
<STRONG>	STRONGly emphasized text	Bold
<DFN>	That the text is a definition	Italic
<SAMP>	That the text is sample output of a program (or similar)	Monospaced font
<INS>	That the text has been inserted	Underlined
<DEL>	That the text should be deleted	Strike through
<CODE>	That the text is computer code	Monospaced font
<VAR>	That the text is a variable	Italic
<KBD>	That the text is keyboard input	Monospaced font
<CITE>	That the text is an authority that is being CITEd	Italic
<ABBR>	That the text is an ABBReviation	Plain text
<ACRONYM>	That the text is an acronym	Plain text
<Q>	That the text is a short quotation	Quote marks will be inserted before and after it
<SUB>	That the text should be subscripted	Subscript
<SUP>	That the text should be superscripted	Superscript

Note that all inline elements must be closed by an end tag. For example:

Inline elements may not span block elements. Invalid is:

<P>
<B>
Bold text
</P>
<P>
New block element; invalid - B should have been closed</B>

Special elements

<BR>

This indicates a line break. Unlike elements we have met previously, it does not have a closing tag. E.g:

<P>
This is a paragraph. I don't want the extra space of a new paragraph, so I'll just have a line break.<BR>
And thus we continue.
</P>

<HR>

Horizontal rules are used to indicate divisions within documents. They are specified by use of the <HR> tag. For example:

<P>
End of a section
</P>
<HR>
<H3>
A heading in the new section
</H3>

Here's what the typical horizontal rule looks like:

Sample page

Here's a sample web page:

<HTML>
  <HEAD>
    <TITLE>
      My second web page
    </TITLE>
  </HEAD>
  <BODY>
    <H1>
      About me
    </H1>
    <P>
      I live in <EM>New Hampshire</EM>.
    </P>
    <H2>
      I like
    </H2>
    <OL>
      <LI>
        cheese
      <LI>
        pies
    </OL>
  </BODY>
</HTML>

And here's how it might be rendered:

About me

I live in New Hampshire.

I like

cheese
pies

I strongly recommend that you go and hone your skills now - practise writing documents in HTML; convert some of your existing work into HTML - anything to get practise with HTML.

The next section deals with formatting of elements, and after that comes how we make links between pages.

RichInStyle.com HTML 4 guide - Content-based elements

Contents

Content-based elements

Block-level elements

Lists

Definition lists

Inline elements

Special elements

Sample page

Content-based elements

Block-level elements

<P>

Headings

What now?

<BLOCKQUOTE>

<PRE>

<DIV>

<ADDRESS>

Lists

LI

OL

UL

Definition lists

<DL>

<DT>

<DD>

Inline elements

Special elements

<BR>

<HR>

Sample page

About me

I like