Code snippet of the week | Unordered and Ordered lists

by Edric Chan December 11, 2017

Note: This blog post originally appeared on my blog.

Yes, it’s a code snippet! You heard that right. I’ll be trying to create a code snippet with pure HTML. (You can view the source code by pressing Cmd+Option+U or Ctrl+U if you’re on the desktop.)

Notices

I won’t show the getting started section again anymore after this.
I’ll be using a tab indent of 4 spaces. You can use any code indent you want. (To format a document in Visual Studio Code, use Shift+Option+F)
I’m assuming you have a computer. (If you don’t have one, then…)

Getting Started

To get started, ensure that you have a code editor (ideally Visual Studio Code, Sublime Text, Atom, etc.).

Get started by downloading either of the coding editors as stated above (or you can search some online; DON’T USE YOUR BUILT-IN NOTEPAD/TEXTEDIT!!)
Next, open up the code editor and create a new file. We’ll name the file index.html
Create the bare minimal for an HTML file. Copy the code below:

<!DOCTYPE html> <!-- This is the line that is required in order for the page to work properly. -->
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document title</title>
    <!-- I'm a comment! -->
    <!-- Multiline comments
    are
    okay too -->
  </head>
  <body>
    <!-- Your page content goes here -->
    <p>Hello, world!</p>
</html>

Creating an unordered list

To create an unordered list, simply use the <ul> element and add some list items to it by using the <li> element.

<ul>
  <li>List item contents</li>
</ul>

Unordered lists can be used for example, shopping lists, etc.

Creating an ordered list

To create an ordered list, simply use the <ol> element and add some list items to it by using the <li> element.

<ol>
  <li>List item contents</li>
</ol>

Ordered lists can be used for legal documentations, as well as questions, etc.

Demo

Here’s a working demo for you to play with!

See the Pen Unordered & Ordered lists by Edric Chan (@Edric03) on CodePen.