Wicks Works: Setting up some HTML5 experiments

Recently, I have been increasing my knowledge about HTML5 and CSS by reading blogs and books. I have come across a wide range of information including the HTML5 specifications, tips, tricks, examples and best practices. To test my understanding, I am planning on creating some sample web sites and a few blogs posts.

To get started, I am creating a HTML5 page that contains some content and simple structure. It will be the base for examples, samples and experiments.

Putting styles in there place

Put the style code in its own file or files.
Don't use inline styles
Link to the style sheet should be placed within the <head> tags.

By keeping the content separate from the styling information makes the HTML easier to read, makes the HTML easier to maintain, makes the CSS easier to read, makes the CSS easier to maintain.

Remember to close the tags

By closing the tags it reduces validation errors, makes the code easier to understand, and it is considered a best practice.

Make place for the JavaScript

Place the scripts just before the closing </body> tag.
Avoid using inline script

JavaScript within the HTML page can block the browser from parallel downloading.

Use the correct DocType

By telling the browser what type of document the page, you get the benefit of more consistent results.

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Defines the title of the document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="me">
	<meta name="description" content="A simple template to use with learning projects">
	<meta name="robots" content="all">
	<link rel="stylesheet" media="screen" href="myStyle.css" />
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	</header>
	<main role="main">
	<h1>Page Header</h1>

	<div>The main element represents the main content of the body of a document or application.
	The main content area consists of content that is directly related to or expands upon the
	central topic of a document or central functionality of an application.
	- W3C HTML 5.1 Nightly A vocabulary and associated APIs for HTML and XHTML </div>

	<div> The main content area of a document includes content that is unique to that document
	and excludes content that is repeated across a set of documents such as site navigation links,
	copyright information, site logos and banners and search forms (unless the document or
	applications main function is that of a search form).
	- W3C HTML 5.1 Nightly A vocabulary and associated APIs for HTML and XHTML
	</DIV>
	</main>
	<aside>
	<a href="http://www.w3.org/">W3C</a>
	<a href="https://developer.mozilla.org">Mozilla Devevloper Network</a>
	</aside>
	<footer>
	<div>A nice footer message or hyperlinks could go here</div>
	</footer>
	<script type="text/javascript" src="path/script.js"></script>
	</body>
	</html>

view raw starter.html hosted with ❤ by GitHub

Wicks Works

19 October, 2013

Setting up some HTML5 experiments

Putting styles in there place

Remember to close the tags

Make place for the JavaScript

Use the correct DocType

No comments:

Challenging myself to learn something new