HTML5 simple template and style guide

A simple HTML5 layout template with some style guide. Just for my notes.

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

HTML basic layout

<!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

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

* {
  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
Z. Lu avatar
Z. Lu
Data scientist, bioinformatician, retro fan and web lover.
comments powered by Disqus