html5test.css

body {
    font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
    text-align: center;
}
h1 {
  text-align: left;
}
input { font-size: 14px; font-weight: bold;  }
 
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
 
output { 
    display: block;
    font-size: 5.5em;
    font-weight: bold;
}

html5test.html

<figure
<style>
 
h1 { position: relative; }
h1:hover { color: transparent; }
 
h1:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
 
}
</style>

>
    <img width=200 src="https://2.gravatar.com/avatar/3ab0b5bf051913d02fbf76add05da4bb?d=https%3A%2F%2Fidenticons.github.com%2Fd10276e8c4e7ea8dc16d1d2dd1380a82.png&r=x&s=460" alt="About image" />
    <figcaption>
        <p>This is an image of something interesting. </p>
    </figcaption>
</figure>

<small>Copyright &copy; dxTechnology </small>

<form action="" method="get">
   <label for="email">Email:</label>
   <input id="email" name="email" type="email" />
 
   <button type="submit"> Submit Form </button>
</form>

<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>

<form method="post">
    <h2> Total Recall Awesomness Gauge </h1>
    <input type="range" name="range" min="0" max="10" step="1" value="">
    <output name="result">  </output>
</form>

html5test.js

(function() {
    var f = document.forms[0],
        range = f['range'],
        result = f['result'],
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 
     
    // Determine if browser is one of the cool kids that 
    // recognizes the range input.
    var o = document.createElement('input');
    o.type = 'range';
    if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
 
    // Set initial values of the input and ouput elements to
    // either what's stored locally, or the number 5.
    range.value = cachedRangeValue;
    result.value = cachedRangeValue;
 
    // When the user makes a selection, update local storage.
    range.addEventListener("mouseup", function() {
        alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
        localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
    }, false);
     
    // Display chosen value when sliding. 
    range.addEventListener("change", function() {
        result.value = range.value;
    }, false);
     
})();