Ordered Lists

-

ORDERED LISTS IN HTML

An ordered list defines a list of elements in  which the order of items is taken into account.
The list items are enclosed by <OL> and </OL> tags. The ordering here is rendered by a numbering scheme, using Arabic numbers, letters or Roman numerals. An ordered list is also called a numbered list.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.



<!DOCTYPE html>

<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

Output:

An ordered HTML list

  1. Coffee
  2. Tea
  3. Milk

Ordered list of numbers:


<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>


Output:

Ordered List with Numbers

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Letters:


<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

Output:

Ordered List with Letters

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Lowercase Letters:


<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

Output:

Ordered List with Lowercase Letters

  1. Coffee
  2. Tea
  3. Milk



Ordered List with Roman Numbers:


<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>


Output:

Ordered List with Roman Numbers

  1. Coffee
  2. Tea
  3. Milk


Ordered List with Lowercase Roman Numbers:


<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

Output:

Ordered List with Lowercase Roman Numbers

  1. Coffee
  2. Tea
  3. Milk




Comments

Post a Comment

Popular posts from this blog

Introduction and Format of HTML

-
Image
What is HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page. Format of HTML < !DOCTYPE  html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html > The  <!DOCTYPE html>  declaration defines this document to be HTML5 The  <html>  element is the root element of an HTML page The  <head>  element contains meta information about the document The...
Read more

Headings In HTML

-
Image
HEADINGS IN HTML <!DOCTYPE html> <html> <body> <h1> Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6> </body> </html> Output: Paragraph tag in HTML HTML paragraphs are defined with the   <p>   tag. EXAMPLE:  <p> This is a Paragraph </p> <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> Output: This is a paragraph. This is another paragraph.
Read more

Strong big and small tags in html

-
<Strong> tag is used to highlight the text in a paragraph mainly. Here we can see the difference between both normal text and strong text <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><strong>This text is strong.</strong></p> </body> </html> Output: This text is normal. This text is strong. Big: This is used make the text Big and look good <!DOCTYPE html> <html> <body>  <big>Small</big> Formatting </body> </html> Output: Small  Formatting Small: This is used to make text smaller when compared to normal text. <!DOCTYPE html> <html> <body> <h2>HTML <small>Small</small> Formatting</h2> </body> </html> Output: HTML  Small  Formatting
Read more