Special Characters and Lists in HTML

In this lesson, we will learn about special characters and lists in HTML. The concept of Lists is important in writing HTML scripts. So, please pay special attention to this lesson.

You'll notice a couple of important things in HTML. First, all your double spacing disappears. Second, tabs do not translate. Third, you don't know how to make a copyright symbol, an English pound symbol, or a thousand other symbols.

This can be a problem. For this, you need to understand how to insert special codes into your HTML.

Special codes are called entities in HTML, and begin with an & (ampersand), end with a ; (semicolon). The letters and numbers inside indicate which special character you're using.

& nbsp; is a hard space, for instance. You can put together dozens if you like, and space your text all the way across the page - but why would you? Most of the time, a hard space is useful as a placeholder, such as when you have a table cell that won't stay open.

Other frequently-used entities include:

&, the ampersand
& amp;
or
& #38;
<, the less-than
& lt;
or
& #60;
>, the greater-than
& gt;
or
& #62;
£, the English pound
& pound;
or
& #163;
©, the copyright symbol
& copy;
or
& #169;
°, the degree symbol
& deg;
or
& #176;


Note: In all the entities, remove the space after & sign.

You can find more complete lists online by searching for ASCII Entities.

When using these entities, make sure you only use lower-case letters, and there should be no spaces between the ampersand and semicolon.

Making Lists

Lists are the first truly confusing part of HTML. There are two commonly-used types of lists: unordered and ordered lists. A few sites also use definition lists.

Unordered lists place items in bulleted points, one line each. Ordered lists number each item in your list by default, but you can set them to use other ordinal characters, like letters.

Use <UL></UL> to create an unordered list, and <OL></OL> to make ordered lists. In both cases, list items are sectioned out by <LI></LI>. The </LI> tag is one of those you may often see not closed out with an ending tag, but this can cause problems in some browsers. Make sure you always close out your list items.

<UL>
      <LI> Your Text</LI>
      <LI>Your Text </LI>
      <LI> Your Text </LI>
</UL>
<OL>
      <LI> Your Text</LI>
      <LI> your Text</LI>
      <LI> Your Text</LI>
</OL>


Definition lists are slightly different. They don't use bullets or numbers, but they do require you to code notations as to which section is the defined term and which are the definitions. You can use multiple definition with one term, or multiple terms with one definition.
  • <DL></DL> is the definition list tag
  • <DT></DT> is the definition term tag
  • <DD></DD> is the definition description tag

<DL>
<DT>Word</DT>
      <DD>Definition</DD>
      <DD>Definition</DD>
      <DD>Definition</DD>
<DT>Word</DT>
      <DD> Definition</DD>
</DL>


Try This:

Using the information you've learned, make a definition list in HTML for at least three different special codes. Try to find more online if you can. Then make an ordered list of colors or some other set. By changing two tags, transform your ordered list into an unordered list.

After learning this lesson about special characters and lists in HTML, move on to the next tutorial.