Code Snippet of The Week | Unordered and Ordered lists
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.)
Table Of Contents
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 (@Chan4077) on CodePen.
View Demo
Comments
Post a Comment