Code snippet of the week | Unordered and Ordered lists

Code snippet of the week | Unordered and Ordered lists

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.).

  1. 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!!)
  2. Next, open up the code editor and create a new file. We’ll name the file index.html
  3. 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 (@EdricChan03) on CodePen.

View Demo

About Edric Chan

(site owner)

A 16-year-old tech enthusiast since getting his first MacBook Pro 2015 in the year-end of 2015. When he's not at school, he usually works on small programming projects or reads technology-related books. He currently studies at School of Science & Technology, Singapore and will graduate in 2019 to pursue his post-secondary life.

Share "Code snippet of the week | Unordered and Ordered lists"

Successfully copied to the clipboard!
An error occurred while attempting to copy to the clipboard
An update is available!