Samples of HTML codes


To play with this file, use your browser's "View Source" menu item, save the source file, then open it with BBEdit or Qedit or any other editor you please. You can change it any way you like, and then use the browser's "Open File" menu item to see what it looks like with the changes.

(If you think about it long enough, it might occur to you that the browser is supposed to interpret the "<" and the ">", instead of printing them like this. The comments in this file -- which you can view with View Source -- give instructions on how to make this happen, among other tricks.)

(Note: Multiple spaces and multiple lines in the source file are ignored.)

Examples of various type sizes:

This is <H1>

This is <H2>

This is <H3>

This is <H4>

Now we're back to ordinary-size type. All type can be made italic, boldface, or boldface italic.

The marker <b> or <B> starts boldface, and the marker </b> or </B> ends it.

The marker <i> or <I> starts italic, and </i> or </I> ends it.

Use both together: <i><b> to do bold italic; and close both (in either order) </b></I> to end it.

(This all assumes you know why you'd want to use either one, of course;
knowing how to use HTML is not a substitute for knowing how to write.)

HTML is very handy for making lists. There are several types:

    This is an "ordered list", using numbers.
  1. The HTML marker to begin an ordered list is <OL>
  2. Unsurprisingly, the marker to end it is </ol>
  3. Each numbered item starts with <li> (for "List Item")
  4. You don't have to put in the number
  5. Not only that, you can't change it. Numbering is automatic.
There is also a "Directory List", which is useful for defining terms, and various other situations where you might want two levels of indentation.
The HTML marker to begin a Directory list is <DL>
... and it ends with </dl>
There are two types of item codes:
  1. <DT>, which stands for "Directory Term"
  2. <DD>, which stands for "Directory Definition"
Note that a Directory list doesn't look like a list;
<DT> skips a line, but doesn't indent, and doesn't make a blank line, while
<DD> skips a line and indents; if you happen to have a very long line (like this one) that would wrap around, the new line is lined up indented.
The <DD> mark was intended to be a "definition" of the term,
but it's good for lots of other things.
Netscape's "Bookmark" list is an HTML file, formatted using <DL>;
most of the "Hot List" pages on the Web started off being bookmark files.
There is no automatic "bullet" with list items in a Directory List, but
  • if you want a bullet to appear, you can use <li> after <dt>, like this
  • or after <dd>, like this
  • But ... this is what happens if you put <LI> before <DT>
  • and this is what happens with <LI> before <DD>, so be CAREFUL.
  • All kinds of lists start and end with implicit Paragraph marks.

    All of the marks above are just text formatting commands -- the sort of thing any wordprocessor does; but the real power of HTML, and the Web generally, lies in HyperText, that is, the ability to link one page to another so that it becomes a "hot link". These are the blue, underlined text pieces that you click on. They're called "anchors" in HTML, and they use the <A ...> ... </A> marker.

    A link like the following one to my home page: John Lawler looks like this in HTML:

    <A href="http://www.umich.edu/~jlawler/">John Lawler</A>

    Any URL can be linked this way. Clicking on it will go to that page, just as if you had typed it into Netscape, or "opened" it from a menu.


    Back to the Linguistics 114 home page
    The URL of this page is: http://www.umich.edu/~jlawler/html.sample.html
    Last change 2/19/01 John Lawler