HTML5 Basics for Beginners

HTML5 brings with it new elements, attributes, and APIs.

Before writing HTML5 you should always make sure old browsers will understand it.

In your CSS make the new HTML5 elements display block

main, section, article,
header, footer, aside,
nav, figure {
    display: block;    

Second add html5shiv

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

It’s a javascript file that’s used in the head

<!doctype html>
    <!--[if lt IE 9]>
      <script src=""></script>


The new elements improve semantics and readability of the code.

Before you would use divs with IDs and classes

<div class="header">
  <div class="nav-bar">

And in HTML5



You may be asking yourself, “when and in what order should I use these new elements?” Well, remember they’re all block elements just like divs.

They only improve semantics and legibility.





  <input type="color">
  <input type="email">
  <input type="text" required>
  <input type="text" placeholder="HTML5 rocks">

You can find many more attributes here


Websockets allow the client and server to keep a connection open. This is helpful for games where the client constantly has to update its position in space and chat boxes.

WebRTC allows client to client connections.

Web Storage API allows the server to store data in the client’s browser. Unlike cookies, they don’t have to be passed on every request. Also they have a higher storage capacity than cookies.

There are many more great things about HTML5, but of course this is only a basic introduction.

For more info I’d recommend continuing here

Thank your for reading.