From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 2.3: Structure of an HTML Document
It is traditional in programming books to start with a hello world program.
While HTML is a markup language, not a proper programming language, we can still easily create a hello world program and as that lets us see the basic structure of an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Basics Cheat Sheet</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
You will notice that there seems to be a lot of material between < and > symbols. These are known as tags which we will cover in more detail in the next sections. For now, lets take a look at the lines that make up this sample document.
The very first line “<!DOCTYPE html> ” is a semi-optional line that simply specifies the type of file that you are looking at. The purpose of this line is to inform the browser that you want to render the page as a standard HTML 5 page. If this line is omitted, the page will still be displayed but the browser may then assume that the page is in an older version of HTML and may display the page in what is known as "quirks mode" which may result in your document being displayed incorrectly. While you can technically have an HTML document without a doctype tag, it is strongly recommended.
The “<html lang="en">” line is required and indicates the start of the html document. There is often an optional lang attribute that simply specifies what language the document is written in. This makes it easier for a browser to translate a page into a different language as it knows for certain what the source language is.
The third line “<head>” indicates the start of the heading section. This section is used by the browser to determine things such as the title to show on the browser and holds additional information about the document. This additional information is often referred to as meta information. Meta means self-referential so in the case of HTML is information about the document. The header is also often where style sheets and scripts are placed. We will cover both in the following chapters. The header section consists of all the lines between <head> and </head>.
In our sample, there are only a couple of items within the header section. The “<meta charset="UTF-8">” line is used to indicate that we are using the UTF-8 character set. UTF-8 is essentially your standard text format and is what text files use. Sort of (it’s complicated). We will look at character sets when we get to JavaScript.The line “<title>HTML Basics Cheat Sheet</title>” sets the title of the web page. This is the text that appears on the tab that the page is on in your browser. It does NOT display any text within the page.
The ”<body>” line indicates the start of the body section, which continues until the ”</body>” line is reached. This is the main part of the document and is where the visible contents of the page reside. Normally, this is a very large section as it is the contents of the page, but for our hello world, we only have a single line as there is only one line of text in the document.
The line “<p>Hello World!</p>” indicates that we want to display a paragraph with the words “Hello World!” being the contents of that paragraph. Finally, the line “</html>” ends the document.
If you examine the source code for a few minutes, you should start to see patterns in how it is written. The thing about computer languages (even markup ones) is they are very structured. We will look at tags in the next section, but if this is new to you, you may want to spend some time typing the sample into a text editor and getting it to run. Remember the extension needs to be ".html" not ".txt".
Sidebar
Chapter 2 Contents
2.1 HTML Basics Cheat Sheet
The cheat sheet for this chapter.
2.2 What is HTML
A brief history of HTML
2.3 Structure of a HTML Document
What makes up a HTML file
2.4 Tags and Elements
How tags are used to create HTML elements
2.5 Special Symbols
How to display things such as <, >, &, 😀
2.6 Links
Linking to other pages, other sites, and within the page
2.7 Images
Adding images and image maps to your page.
2.8 Lists
Ordered and unordered lists and nesting lists.
2.9 Tables
Tables with spanning rows and columns.
2.10 HTML Only Game Project
The game of NIM is the project for this chapter.
2.11 HTML Only Game Solution
How my solution to the NIM game was put together
Bonus article
Solving Nim.
← previous section
What is HTML next section →
Tags and Elements Table of Contents