HTML5 cheat sheet

March 3, 2015

Just a simple HTML5 document

Sometimes it is very frustrating when you are starting a new project and you can not remember how to include javascripts or how to do a comment in HTML5. Of course you can find the way but if it takes more than one minute it is kinda annoying when you just want to do something quick.

Live demo!

 

<!doctype html>
<html lang="en">
<head>
    <title>HTML5 document</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="This is about to tell something important">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <meta name="author" content="Tuukka Merilainen">

    <!--An example of a comment-->
    <link rel="stylesheet" href="style.css">
    <script src="jquery-1.11.2.min.js"></script>

</head>
    <body>
        <main>
          <article>
            <header>
              <h1>This is HTML5 document </h1>
              <p>
                  UTF-8 encoded and written in english.
              </p>
              <img alt="HTML5 logo" src="html5-logo.png">
            </header>
          </article>
        </main>
    </body>
</html>

Write a valid code and make an easy usability

Remember to scan your documents with these two validators (first for markup second for accessibility):

http://validator.w3.org/
http://achecker.ca/checker/index.php

Sources:

https://github.com/bendc/frontend-guidelines

Leave a Reply