HTML5 simple template and style guide

Below is a HTML5 template with style guide and coding conventions (as comments in the code).

HTML basic layout

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


<!doctype html>
<html lang="en"> <!-- recommend to specify page language -->
  <head> <!-- head tag can be omitted but not recommended to do so -->
    <meta charset="utf-8">  <!-- also define the encoding as early as possible -->
    <title>First Handcrafted HTML5 Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- set the viewport for different devices-->
    <link rel="stylesheet" href="styles.css"> <!-- no space around "="; not necessary to include "type" for stylesheet -->
    <script src="myscript.js"></script> <!-- simple syntax for scripts; "type" is not necessary -->
  </head>

  <body>
    <header>
        <h1>This is the Header Level 1</h1>
        <h2>Header Level 2</h2>
    </header>

    <nav>
        <ul> <!-- avoid unnecessary blank lines -->
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
        </ul>
    </nav>

    <section>
        <aside>
            <h1>Heading 1 in aside</h1>
            <p>This is a test paragraph</p>
	</aside>
	<article>
	    <h1>Heading 1 in article</h1>
	    <p>Paragraph in article</p>
	    <img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> <!-- always add the "alt" attribute, and define image width and height -->
	</article>
    </section>

    <footer>
        <p>Copyright paragraph<br />
	    <a href="#">Contact</a></p>
    </footer>

  </body>
</html>

CSS3 style

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


nav {
  display: block;
  margin-bottom: 10px;
}
nav ul {
  list-style: none;
  font-size: 14px;
}
nav ul li {
  display: inline;
}

CSS reset margins and box width

1
2
3
4
5


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

CSS elements

line-height; word-spacing; letter-spacing; font-weight; text-transform; text-align
min/max-height/width
overflow: hidden/scroll
border-width/style/color: border 2px solid Blue
padding/padding-top
margin/margin-top; margin: auto –> center element
display: inline/block/inline-block/none
visibility: hidden/visible
position: static/relative/absolute/fixed
floating: left/right
clear: left/right/both/none
background-image/background-repeat: repeat/repeat-x(y)/no-repeat; background-positin: 3x3 layouts –> background: url() repeat center bottom
background-image: -webkit-linear-gradient(#666CCC, #BC1324);
background-size: cover/contain; background-attachment: scroll/fixed
table: tr = “table row”; th = “table heading element”; td =" table data";
thead (tr–th) – tbody (tr–td) – tfooter (tr–td)
colspan=“2”: span 2 columns / rowspan

CSS coding conventions:

opening bracket on the same line as the selector
one space before the opening bracket
two spaces of indentation
semicolon after each property, including the last
Only use quotes if the value contains spaces
closing bracket on a new line, without leading spaces

Reference: