There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.
<ul> - unordered list; bullets
- <ol> - ordered list; numbers
- <dl> - definition list; dictionary
HTML Ordered Lists
Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.
<h4 align="center">Goals</h4> <ol> <li>Find a Job</li> <li>Get Money</li> <li>Move Out</li> </ol>
- Find a Job
- Get Money
- Move Out
Start your ordered list on any number besides 1 using the start attribute.
<h4 align="center">Goals</h4> <ol start="4" > <li>Buy Food</li> <li>Enroll in College</li> <li>Get a Degree</li> </ol>
Numbered List Start:
- Buy Food
- Enroll in College
- Get a Degree
Nothing fancy here, start simply defines which number to begin numbering with.
HTML Ordered Lists Continued
There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numberals or letters, both capital and lower-case. Use the type attribute to change the numbering.
<ol type="a"> <ol type="A"> <ol type="i"> <ol type="I">
Ordered List Types:
|Lower-Case Letters||Upper-Case Letters||Lower-Case Numerals||Upper-Case Numerals|
HTML Unordered Lists
Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.
<h4 align="center">Shopping List</h4> <ul> <li>Milk</li> <li>Toilet Paper</li> <li>Cereal</li> <li>Bread</li> </ul>
- Toilet Paper
Here's a look at the other flavors of unordered lists may look like.
<ul type="square"> <ul type="disc"> <ul type="circle">
Unordered List Types:
HTML Definition Term Lists
Make definition lists as seen in dictionaries using the <dl> tag.
These lists displace the term word just above the definition itself for a unique look. It's wise to bold
the terms to displace them further.
- <dl> - defines the start of the list
- <dt> - definition term
- <dd> - defining definition
<dl> <dt><b>Fromage</b></dt> <dd>French word for cheese.</dd> <dt><b>Voiture</b></dt> <dd>French word for car.</dd> </dt>
French word for cheese.
French word for car.
Bold, Italic and More
<p>An example of <b>Bold Text</b></p> <p>An example of <em>Emphasized Text</em></p> <p>An example of <strong>Strong Text</strong></p> <p>An example of <i>Italic Text</i></p> <p>An example of <sup>superscripted Text</sup></p> <p>An example of <sub>subscripted Text</sub></p> <p>An example of <del>struckthrough Text</del></p> <p>An example of <code>Computer Code Text</code></p>
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of superscripted Text
An example of subscripted Text
An example of
An example of
Computer Code Text
All of these tags add a pinch of flavor to paragraph elements. They can be used with any text type element.
HTML - Formatting Tag Usage
These tags should be used sparingly. And what we mean by that is that you should only use them to bold or italicize one or two words in your elements at a time. If you wish to bold an entire paragraph a better solution would involve Cascading Style Sheets, and you should consult how to do that in our CSS Tutorial. Ultimately the decision is yours, the web developer. Being a voice of experience, keep the use of these tags quick and sparse.
HTML Color Coding System - Color Names
There are 3 different methods to set color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colors where the value is simply the name of each color. Here is a sample of the most widely supported colors and their respective name values.
The 16 Basic Colors:
HTML Coloring System - RGB Values
We do not recommend that you use RGB for safe web design because non-IE browsers do not support HTML RGB. However, if you plan on learning CSS then you should glance over this topic.
RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an example of RGB in use, but if you are not using a browser that supports it, do not worry, that is just one of the problems with HTML RGB.
Red, Green, and Blue Values:
HTML Coloring System - Hexadecimal
The hexadecimal system is complex and difficult to understand at first. Rest assured that the system becomes much, MUCH easier with practice and as a blossoming web developer, it is critical to understand hexadecimals to be capable of using them in your own web publications. They are far more reliable and widely compatible among web browsers and are the standard for colors on the internet.
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
Here's a hexadecimal you might see in an HTML document.
My First Hexadecimal:
HTML Color Code - Breaking the Code
The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.
Hexadecimal Color Values:
So use letters as numbers?We will answer this question as we dive into the converting hexadecimals to regular numbers. Let's have a look at real Hexadecimal.
A Real Hexadecimal:
The letter "F" is the maximum amount we can send each color and as you may deduce, this color (#FFFFFF) represents the color white. A formula exists to calculate the numeric equivalent of a hexadecimal.
(15 * 16) + (15) = 255
The formula is real simple. Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15. The value 255 is the maximum allowed for any primary color.
Let's try another one.
bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green) (7 * 16) + (0) = 112 05(BB - Blue) (0 * 16) + (5) = 5
Hexadecimals are the best choice for compatible web development because of their consistency between browsers. Even the most minor of change in color can throw your entire site out of whack, so be sure to check your site in a number of browsers. If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser.