HTML Lists
HTML Lists are used to specify lists of information.
All lists may contain one or more list elements.
There are three different types of HTML lists:
Unordered List or Bulleted List (ul)
Ordered List or Numbered List (ol)
Description List or Definition List (dl)
Unordered list:
• HTML Unordered List or
Bulleted List displays elements in
bulleted format. The HTML ul tag
is used for the unordered list.
There can be 4 types of bulleted
list:
• square
• Circle
• disc
• none
To represent different ordered lists, there are
4 types of attributes in <ul> tag.
Type Description
Type "disc" This is the default style. In this style, the list
items are marked with bullets.
Type "circle" In this style, the list items are marked with
circles.
Type "square" In this style, the list items are marked with
squares.
Type "none" In this style, the list items are not marked .
HTML Unordered List Example:
<ul> • Output:
<li>HTML</li> • HTML
<li>Java</li> • Java
<li>JavaScript</li> • JavaScript
<li>SQL</li> • SQL
</ul>
ul type="circle"
<ul type="circle"> • Output:
<li>HTML</li> o HTML
<li>Java</li> o Java
<li>JavaScript</li> o JavaScript
<li>SQL</li> o SQL
</ul>
ul type="square"
<ul type="square"> • Output:
<li>HTML</li> HTML
<li>Java</li> Java
<li>JavaScript</li> JavaScript
<li>SQL</li> SQL
</ul>
ul type="none"
<ul type="none"> • Output:
<li>HTML</li> HTML
<li>Java</li> Java
<li>JavaScript</li> JavaScript
<li>SQL</li> SQL
</ul>
Ordered list:
• HTML Ordered List or Numbered List
displays elements in numbered format.
The HTML ol tag is used for ordered list.
There can be different types of Fruit
numbered list:
e
• Numeric Number (1, 2, 3)
• Capital Roman Number (I II III)
• Small Romal Number (i ii iii)
• Capital Alphabet (A B C)
• Small Alphabet (a b c)
• To represent different ordered lists, there
are 5 types of attributes in <ol> tag.
To represent different ordered lists, there are
5 types of attributes in <ol> tag.
Type Description
Type "1" This is the default type. In this type, the list
items are numbered with numbers.
Type "I" In this type, the list items are numbered with
upper case roman numbers.
Type "i" In this type, the list items are numbered with
lower case roman numbers.
Type "A" In this type, the list items are numbered with
upper case letters.
Type "a" In this type, the list items are numbered with
lower case letters.
HTML Ordered List Example
<ol> • Output:
<li>HTML</li> 1.HTML
<li>Java</li> 2.Java
<li>JavaScript</li> 3.JavaScript
<li>SQL</li> 4.SQL
</ol>
ol type="I"
<ol type="I"> • Output
<li>HTML</li> I.HTML
<li>Java</li> II.Java
<li>JavaScript</li> III.JavaScript
<li>SQL</li> IV.SQL
</ol>
ol type="i"
<ol type="i"> • Output
<li>HTML</li> i.HTML
<li>Java</li> ii.Java
<li>JavaScript</li> iii.JavaScript
<li>SQL</li> iv.SQL
</ol>
ol type="A"
<ol type="A"> • Output:
<li>HTML</li> A.HTML
<li>Java</li> B.Java
<li>JavaScript</li> C.JavaScript
<li>SQL</li> D.SQL
</ol>
ol type="a"
<ol type="a"> • Output:
<li>HTML</li> a.HTML
<li>Java</li> b.Java
<li>JavaScript</li> c.JavaScript
<li>SQL</li> d.SQL
</ol>
start attribute:
• The start attribute is used with ol tag to specify from where to start the
list items.
• <ol type="1" start="5"> : It will show numeric values starting with "5".
• <ol type="A" start="5"> : It will show capital alphabets starting with "E".
• <ol type="a" start="5"> : It will show lower case alphabets starting with
"e".
• <ol type="I" start="5"> : It will show Roman upper case value starting
with "V".
• <ol type="i" start="5"> : It will show Roman lower case value starting
with "v".
Example:
<ol type="i" start="5"> • Output:
<li>HTML</li> v.HTML
<li>Java</li> vi.Java
<li>JavaScript</li> vii.JavaScript
<li>SQL</li> viii.SQL
</ol>
HTML Description List or Definition
List
• HTML Description list is also a list style which
is supported by HTML and XHTML.
• It is also known as definition list where entries
are listed like a dictionary or encyclopedia.
• The definition list is very appropriate when
you want to present glossary, list of terms or
other name-value list.
• The HTML definition list contains following
three tags:
• <dl> tag defines the start of the list.
• <dt> tag defines a term.
• <dd> tag defines the term definition
(description).
Example
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:
• Aries
-One of the 12 horoscope sign.
• Bingo
-One of my evening snacks
• Leo
-It is also an one of the 12 horoscope sign.
• Oracle
-It is a multinational technology corporation.
Hyperlinks (Anchor Tag):
Hyperlinks are used for linking:
within the same page (Named tags)
To another page in your web site
(Relative Link or local link)
To another page outside your web site
(Absolute or remote link)
Email Link
Hyper Links: are highlighted and
underlined text. When you click
on it, it takes you to another page
on the web.
<A command=“target”>highlighted
text</A>
Hyperlinks:
Absolute Link: These are links to another page outside of your web
site. These links specify the entire URL of the page:
<A HREF=“http://www.nyu.edu/”>NYU Web Site</A>
NYU Web Site
Hyperlinks:
RelativeLink: These are links to another page in your site so
you do not have to specify the entire URL.
<A HREF=“index.html”>Go back to main page</A>
Go back to main page
Targeted Links
A tag includes a target attribute. If you specify
target=“_blank”, a new browser window will be opened.
<A HREF=“http://www.nyu.edu” target="_blank”> NYU</A>
More on this when we get to frames...
Email Link:
You can someone at:
<a href=“mailto:jj1@nyu.edu”>Send email to J.J.</A>
Lists
<html>
<!–- COMP519 page07.html 23.09.08 --> •there are 3 different
<head> <title>(Sort of) Simple Lists</title>
<style type="text/css">
types of list elements
.my_li:before { content: counter(list) ": ";
counter-increment: list; } • <ol>…</ol> specifies an
</style> </head>
<body> ordered list (using
numbers or letters to
<ul style="list-style-type: square;">
<li> ... first list item... </li>
label each list item)
•<li> identifies each list item
<li> ... second list item... ... </li>
</ul> •can set type of ordering, start
<dl> <dt> Dweeb </dt> index
<dd> young excitable person who may
mature into a <em>Nerd</em> </dd> • <ul>…</ul> specifies
<dt> Hacker </dt>
<dd> a clever programmer </dd>
unordered list (using a
<dt> Nerd </dt> <dd> technically bright but bullet for each)
socially inept person </dd> •<li> identifies each list item
</dl>
<ol style="list-style-type: none; • <dl>…</dl> specifies a
counter-reset: list 29;" > definition list <dt> identifies
<li class="my_li">Makes first item number 30.</li> each term
<li class="my_li">Next item continues to number • <dd> identifies its definition
31.</li>
</ol> * We will learn more about the “style”
attributes soon enough.
</body>
</html> view page
Hyperlinks •perhaps the most important
HTML element is the hyperlink,
<html>
<!–- COMP519 page08.html 15.08.06 -->
or ANCHOR
<head>
<title>Hyperlinks</title> • <a href="URL">…</a>
</head>
•where URL is the Web address of
<body> the page to be displayed when the
<p> user clicks on the link
<a href="http://www.liv.ac.uk">
The University of Liverpool</a> •if the page is accessed over the
<br/> Web, must start with http://
<a href="page07.html" target="_blank">
Open page07 in a new window</a> •if not there, the browser will assume
</p> it is the name of a local file
</body>
</html> • <a href="URL"
target="_blank">…</a>
•causes the page to be loaded in a
view page new
•Window
* Find more info on attribute
TARGET
Hyperlinks (cont.)
<html>
<!–- COMP519 page09.html 21.09.12 --> •for long documents, you can
<head> even have links to other
<title>Internal Links in a Page</title>
</head>
locations in that same
document
<body>
<p>
[ <a href="#HTML">HTML</a> | • <xxxx id="ident">…</xxxx>
<a href="#HTTP">HTTP</a> | •where ident is a variable for identifying
<a href="#IP">IP</a> | this location, where "xxxx" can, in
<a href="#TCP">TCP</a> ] principle, be any HTML element
</p> •(this is actually an HTML5 language
<p> specification, but seems to work in most
Computer acronyms: browsers)
<dl>
<dt id="HTML">HTML</dt> • <a href="#ident">…</a>
<dd>HyperText Markup Language
<dt id="HTTP">HTTP</dt> •will then jump to that location within the
<dd>HyperText Transfer Protocol…</dd> file
<dt id="IP">IP</dt>
<dd>Internet Protocol…</dd> • <a href="URL#ident">…</a>
<dt id="TCP">TCP</dt>
•can jump into the middle of another file
<dd>Transfer Control Protocol…</dd> just as easily
</dl>
</p>
</body>
</html>
view page
