Lets apply the Best practices to the Image Gallery .
/*** index.html ***/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Gallery</title> <link rel="stylesheet" href="styles/layout.css" media="screen"> </head> <body> <h1>Snapshiots</h1> <ul id="imagegallery"> <li> <a href="images/fireworks.jpg" title="A fireworks display"> Fireworks </a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffe"> Coffee </a> </li> <li> <a href="images/rose.jpg" title="A red, red rose"> Rose </a> </li> <li> <a href="images/bigben.jpg" title="The famous clock"> Big Ben </a> </li> </ul> <div id="placeholder"> <img src="images/placeholder.gif" alt="my image gallery" > </div> <div id="description"> <p>Choose an image</p> </div> <script type="text/javascript" src="scripts/showPic.js"></script> <script type="application/javascript"> // alert (description.childNodes.length); // window.onload = countBodyChildren; //var description = document.getElementById("description"); //alert (description.childNodes[2].nodeValue); </script> </body> </html>