Category Archives: HTML5

100% height does not work for HTML5 Doctype

Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.

<!DOCTYPE html>
<html>
...
</html>

Continue reading 100% height does not work for HTML5 Doctype

HTML5 Doctype

In HTML5, you can just use the following Doctype before the <html> tag.

<!DOCTYPE html>

Quote from W3Schools

The declaration must be the very first thing in your HTML5 document, before the tag.

The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, all declarations require a reference to a DTD, because HTML 4.01 was based on SGML.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Continue reading HTML5 Doctype

Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

Having problem on HTML5 and CSS3 with Internet Explorer? The Modernizr library could help you to tackle the problem. It checks the HTML5 and CSS3 features supported by the browser and developers could determine them by checking the classes of the <html> tag.

Download Modernizr and create the following index.html.
Continue reading Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

HTML5 – Sound on mouseover

This is an example which will play a beep sound when the mouse enter an element with the help of HTML5.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var beep = $("#beep")[0];
        $("#play").mouseenter(function() {
          beep.play();
        });
      });
    </script>
  </head>
  <body>
    <audio id="beep" controls preload="auto">
      <source src="music.ogg" type="audio/ogg" />
      <source src="music.mp3" type="audio/mp3" />
      Your browser isn't invited for super fun audio time.
    </audio>
    <span id="play">play sound</span>
  </body>
</html>

Continue reading HTML5 – Sound on mouseover

HTML5 – Play sound/music with <audio> tag @ 1

Next: HTML5 – Play sound/music with <audio> tag @ 2

With HTML5, we can easily play audio file with the <audio> tag. Here is an example.

<html>
  <head></head>
  <body>
    <audio controls loop autoplay>
      <source src="music.ogg" type="audio/ogg" />
      <source src="music.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio> 
  </body>
</html>

Continue reading HTML5 – Play sound/music with <audio> tag @ 1