HTML stands for HyperText Markup Language and its one of the basic tools we can use to create web pages.
Today, we’re going to start creating our basic web page skeleton – nothing special is going to happen, but bear with me, since this is just the beginning of a long journey!
Most elements in HTML have opening tags and closing tags, both of which start out with angle brackets:
<> and </>
We’ll use those to create first element for our page skeleton – doctype!
Fire up your favorite text editor, save your document as skeleton.html and type:
<!DOCTYPE HTML>
This tells our website what version of HTML page is written in – in this case, its HTML5 (its predecessor – HTML4 – would’ve required us to state explicitly what type of document we want, but thankfully we no longer have to do that).
After that we can set the language of our document by typing:
<html lang=”en”>
Here we used lang – so-called language attribute and set it to en (short for “english”). Attributes give HTML elements meaning.
Underneath doctype and lang attribute , we have the head of our document…and beneath that – the body (much like with real-world skeleton).
<head>
<meta charset=utf-8>
<title>HTML5 Skeleton</title>
</head>
<body>
</body>
</html>
Here we used meta tag along with charset attribute in order to define encoding for our page. Next we added title to our page.
Then we closed the head tag and proceeded to create an empty body.
Finally, we indicated the end of our document by creating closing html tag.
All in all, your skeleton.html should now look like this:
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=utf-8>
<title>HTML5 Skeleton</title>
</head>
<body>
</body>
If you’ll type all of the above into your skeleton.html and open it in your browser, you will not see much on the screen itself – but look at the top of the browser, however, and you’ll notice the words “HTML5 Skeleton” up there. This means that our page now have a title!
In next lesson, we’ll start filling the body with content and making our page come alive with text!
