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.)
- 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…)
- 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
- 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
<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
<ol> <li>List item contents</li> </ol>
Ordered lists can be used for legal documentations, as well as questions, etc.
Here’s a working demo for you to play with!