Step 8: Lists

In HTML5 you can still use all the options you’ve always had available to create lists, but there are a few new functions.

<ol>-element

The <ol>-element now allows you to reverse the order of the list, so let’s add a nice little pop chart to our sample file and reveal our number one last… well at least, for all non Internet Explorer users, because that’s the only browser that doesn’t support this function.

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Whatever title of your file</title>
</head>

<body>

<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>

<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>

<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online. You can listen to a mix of her songs right here:<br />

<audio controls>
<source src=”Nora-Tol-mega-mix.mp3” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>

or watch her video

<video width=”320″ height=”240″ controls>
<source src=”music-video.mp4” type=”video/mp4″>
Your browser does not support the video tag.
</video>

</div>

<p>
Nora’s top songs include (in the order of release):
<ol reversed>
<li>Burner</li>
<li>Catch Me</li>
<li>They’re Waiting 4 My Beat 2 Drop</li>
<li>Run Girl</li>
</ol>
</p>

</body>
</html>

You can add a nested list to this ordered list:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Whatever title of your file</title>
</head>

<body>

<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>

<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>

<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online. You can listen to a mix of her songs right here:<br />

<audio controls>
<source src=”Nora-Tol-mix.mp3” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>

or watch her video

<video width=”320″ height=”240″ controls>
<source src=”music-video.mp4” type=”video/mp4″>
Your browser does not support the video tag.
</video>

</div>

<p>
Nora’s songs include (in the order of release):
<ol reversed>
<li>Burner</li>
<li>Catch Me</li>
<li>They’re Waiting 4 My Beat 2 Drop
<ol>
<li>Originally released as “Beat 2 Drop” in 2010, on the Darlin Nikki movie soundtrack</li>
<li>Re-released in 2013</li>
</ol>
</li>
<li>Run Girl</li>
</ol>
</p>

</body>
</html>

<ul>-element

In HTML5 the unordered list has lost a few of it’s options. The attributes “compact” (used to publish data in a smaller font) and “type” (used to change the bullet to disc, square or circle figures) are no longer supported. You can change the bullets now using CSS.

However, I don’t like my nested order list in my sample, so I will show you that you can nest both list types if you want:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Whatever title of your file</title>
</head>

<body>

<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>

<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>

<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online. You can listen to a mix of her songs right here:<br />

<audio controls>
<source src=”Nora-Tol-mega-mix.mp3” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>

or watch her video

<video width=”320″ height=”240″ controls>
<source src=”music-video.mp4” type=”video/mp4″>
Your browser does not support the video tag.
</video>

</div>

<p>
Nora’s songs include (in the order of release):
<ol reversed>
<li>Burner</li>
<li>Catch Me</li>
<li>They’re Waiting 4 My Beat 2 Drop
<ul>
<li>Originally released as “Beat 2 Drop” in 2010, on the Darlin Nikki movie soundtrack</li>
<li>Re-released in 2013</li>
</ul>
</li>
<li>Run Girl</li>
</ol>
</p>

</body>
</html>

<dt>-element

When it comes to data lists, nothing has changed at all compared to the old HTML course. The only thing different is that the <dt>-element used to define an item in a definition list and now, in HTML5, it defines a name/term in a description list. However, this is only the terminology we now use behind the scenes. It makes no difference at the publishing end. The reason for this change is that a new HTML element has been introduced in HTML5 called <datalist>, which is used to create nice little suggestion lists in forms (step 12).

Go to the next step.

 

Bookmark the permalink.

Comments are closed