HTML and CSS Reference
In-Depth Information
A basic HTML5 document
One of the best parts of web development is how easy it is to create and view a document—all you need is
a text editor and a web browser. This simple snippet provides the setup for all of the examples contained
in this topic. After you walk through the structure of these elements, we'll add a couple of minor additions
for clarity, but this is the basic HTML5 file you will use:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
//Our code here...
};
</script>
</body>
</html>
Save this file as
01-skeleton.html
and load it in your web browser. You won't actually see anything
because it's a blank document, but the page did load and is a completely valid HTML5 document. (You
can always view the source in your browser to confirm that something is there.)
Now let's go through the elements step by step. The first line simply declares that this is an HTML5
document type. If you have any familiarity with all the various HTML4 document types, you'll see that this
declaration is quite simple:
<!doctype html>
Next, we declare the root
html
element and the header:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
At the top of the
head
element, set the document character encoding to
utf-8
. UTF-8 is an encoding for
Unicode, which is a universal character set that defines the characters used in most of the world's
languages. The browser uses this encoding to read the characters from a file and display them as properly
formatted text. These documents are stored in a sequence of bytes contained in a file on a server
somewhere, transmitted across the network, then reassembled on the client's computer and displayed in a
web browser. The character encoding tells the browser how to convert this sequence of bytes into a
sequence of characters, which is then processed and displayed as a web page. If you don't include the
encoding declaration, the browser might attempt to guess the character encoding of the file (wrongly), or
