<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style><![CDATA[

h1   {color: red;
     }

]]>
</style>



</head>


<body>

<h1>Beverages</h1>
<ul id="beverages">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<span id="note"></span>


<script>
<![CDATA[


// JavaScript statements
// This will be evaluated after the document has been loaded
// making it possible to easily access DOM elements.

var list = document.getElementById("beverages");
var listlength = list.children.length;
console.log(listlength);
var note = document.getElementById("note");
console.dir(note);
note.textContent = listlength + " types of beverages";
 

]]>
</script>


</body>
</html>