Ep. 004 – Lists, Quotations, and Comments – Learn HTML and HTML5

In the previous post, we have discussed paragraphs, headings, and anchor tags. In this post, we will learn about how to add ordered lists, unordered lists, quotations (Blockquotes), and HTML comments.

Lists:

Lists are used to group related items. Lists can be ordered or unordered.

Ordered Lists:

To add ordered lists in an HTML page, we use <ol> tag. Then to add items to the ordered list we can use the <li> tag. See the following example code:

Example Code:

<ol>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>

Output:

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered Lists:

To add unordered lists in an HTML page, we use <ul> tag. Then to add items to the unordered list we can use the <li> tag. See the following example code:

Example Code:

<ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

Output:

  • List Item 1
  • List Item 2
  • List Item 3

Blockquotes (Quotations)

Blockquotes are used when text is copied from an external source/author. To add blockquote to an HTML page, we use the <blockquote> tag. See the following example with an output:

Example Code:

<blockquote>Some quotation from external source</blockquote>

Output:

Some quotation from external source

HTML Comments:

HTML comments are written inside the HTML page for reference and they are not displayed on the actual web page. The HTML comments are helpful when you are working with a team. The other members of the team can understand why a particular piece of code was added by seeing the HTML comments. See the following example:

Example Code:

<!--This is a sample HTML comment-->

Output:

The output is empty because HTML comments are not displayed on the actual page.

Video Tutorial:

Got Stuck? Any Questions?

In case of any questions, please free to ask in the comments section below. Thanks for reading!

Leave a Comment