|
|
Unordered HTML List
|
Ordered HTML List
|
HTML Description List The first item Description of item The second item Description of item |
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
A style attribute can be added to an unordered list, to define the style of the marker:
|
Style |
Description |
|
list-style-type:disc |
The list items will be marked with bullets (default) |
|
list-style-type:circle |
The list items will be marked with circles |
|
list-style-type:square |
The list items will be marked with squares |
|
list-style-type:none |
The list items will not be marked |
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
|
Using a type attribute <ul type="disc">, instead of <ul style="list-style-type:disc">, also works. |
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
A type attribute can be added to an ordered list, to define the type of the marker:
|
Type |
Description |
|
type="1" |
The list items will be numbered with numbers (default) |
|
type="A" |
The list items will be numbered with uppercase letters |
|
type="a" |
The list items will be numbered with lowercase letters |
|
type="I" |
The list items will be numbered with uppercase roman numbers |
|
type="i" |
The list items will be numbered with lowercase roman numbers |
<ol type="1">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the data (description).
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
List can be nested (lists inside lists).
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
|
List items can contain new list, and other HTML elements, like images and links, etc. |
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to display horizontally:
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
With a little extra style, you can make it look like a menu:
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
An Unordered HTML List with Disc Bullets
An Unordered HTML List with Circle Bullets
An Unordered HTML List with Square Bullets
An Unordered HTML List Without Bullets
An Ordered HTML List with Numbers
An Ordered HTML List with Letters
An Ordered HTML List with Lowercase Letters
An Ordered HTML List with Roman Numbers
An Ordered HTML List with Lowercase Roman Numbers
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
|
Tag |
Description |
|
Defines an unordered list |
|
|
Defines an ordered list |
|
|
Defines a list item |
|
|
Defines a description list |
|
|
Defines the term in a description list |
|
|
Defines the description in a description list |
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
<div style="background-color:black; color:white; margin:20px; padding:20px;">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
Most HTML elements are defined as block level elements or inline elements.
Block level elements normally start (and end) with a new line, when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
Inline elements are normally displayed without line breaks.
Examples: <b>, <td>, <a>, <img>
The HTML <div> element is a block level element that can be used as a container for other HTML elements.
The <div> element has no special meaning. It has no required attributes, but style and class are common.
Because it is a block level element, the browser will display line breaks before and after it.
When used together with CSS, the <div> element can be used to style blocks of content.
The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning. It has no required attributes, but style and class are common.
Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic formatting.
When used together with CSS, the <span> element can be used to style parts of the text:
<h1>My <span style="color:red">Important</span>Heading</h1>
|
Tag |
Description |
|
Defines a section in a document (block-level) |
|
|
Defines a section in a document (inline) |
Classing HTML elements, makes it possible to define CSS styles for classes of elements.
Equal styles for equal classes, or different styles for different classes.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
The HTML <div> element is a block level element. It can be used as a container for other HTML elements.
Classing <div> elements, makes it possible to define equal styles for equal <div> elements:
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Paris is the capital and most populous city of France.
Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the région parisienne.
Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
The HTML <span> element is an inline element that can be used as a container for text.
Classing <span> elements makes it possible to design equal styles for equal <span> elements.
<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
Websites often display content in multiple columns (like a magazine or newspaper).
London
Paris
Tokio
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Copyright © W3Schools.com
|
The <div> element is often used as a layout tool, because it can easily be positioned with CSS. |
This example uses 4 <div> elements to create a multiple column layout:
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section"">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
HTML5 offers new semantic elements that define different parts of a web page:
|
This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright © W3Schools.com
</footer>
</body>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
|
The <table> element was not designed to be a layout tool. |
Layout can be achieved using the <table> element, because table elements can be styled with CSS:
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp td {
width:40px;
}
</style>
Layout using <div> elements
How to add layout using <div> elements.
Layout using semantic elements
How to add layout using <div> elements.
Layout using <table> elements
How to add layout using <table> elements.
HTML Forms are used to select different kinds of user input.
Create text fields
How to create text fields. The user can write text in a text field.
Create password field
How to create a password field.
(You can find more examples at the bottom of this page)