HTML Layout - Useful Tips CREATED BY =JAY-AR SIMON SEBASTIAN

Start from the beginning
                                        

Unordered list

How to create an unordered list in an HTML document.

Ordered list

How to create an ordered list in an HTML document.

(You can find more examples at the bottom of this page).

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items are marked with bullets (typically small black circles).

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

How the HTML code above looks in a browser:

Coffee Milk HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

How the HTML code above looks in a browser:

Coffee Milk HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

How the HTML code above looks in a browser:

Coffee- black hot drinkMilk- white cold drink Basic Notes - Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.

More Examples

Different types of ordered lists

Demonstrates different types of ordered lists.

Different types of unordered lists

Demonstrates different types of unordered lists.

Nested list

Demonstrates how you can nest lists.

Nested list 2

Demonstrates a more complicated nested list.

Definition list

Demonstrates a definition list.

HTML List Tags TagDescription <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines an item in a definition list <dd> Defines a description of an item in a definition list

Try-It-Yourself Examples

Create text fields

How to create text fields. The user can write text in a text field.

You've reached the end of published parts.

⏰ Last updated: Dec 13, 2014 ⏰

Add this story to your Library to get notified about new parts!

HTML Layout - Useful Tips  CREATED BY =JAY-AR SIMON SEBASTIANWhere stories live. Discover now