Understanding DOCTYPE, head, and body
Every HTML page shares the same basic skeleton. The three main parts you will see in almost every file: the DOCTYPE declaration, the <head> (metadata the browser needs but does not show), and the <body> (everything visible on the page).
How an HTML document is structured
An HTML document tells the browser what kind of page it is, what resources to load, and what content to display. Get the structure right and the browser knows how to render your work. Get it wrong and things get unpredictable.
Starting with DOCTYPE
Every HTML document begins with a DOCTYPE declaration. It tells the browser which version of HTML the page uses.
Example:
<!DOCTYPE html>This is the DOCTYPE for HTML5, the current standard. It is short and simple – older HTML versions had much longer declarations.
The <html> element
After the DOCTYPE comes the <html> element. It wraps the entire document and is called the root element.
<!DOCTYPE html>
<html>
</html>The <head> element
The <head> holds metadata – information about the page that is not displayed directly. Browsers and search engines use it heavily.
Title tag
The <title> tag sits in the head and sets the page title. This is what appears in the browser tab or title bar.
<head>
<title>My Web Page</title>
</head>Linking CSS and other elements
The head is also where you link external stylesheets and set meta-information such as character set, author, and description.
<head>
<meta charset="UTF-8">
<meta name="author" content="Your Name">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="A brief description of your web page">
<link rel="stylesheet" href="styles.css">
</head>The <body> element
The <body> contains everything visible on the page – text, images, buttons, videos, and so on.
<body>
<h1>My Web Page</h1>
<p>This is where all the visible content goes.</p>
<!-- More content here -->
</body>Putting it together
A basic HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<!-- Additional head elements here -->
</head>
<body>
<h1>My Web Page</h1>
<p>This is where all the visible content goes.</p>
<!-- More content here -->
</body>
</html>Self-closing tags
Some elements do not have closing tags. These are called self-closing tags. Examples include <img> and <br>. Worth recognising early – you will use them often.
Validating your HTML
It is worth validating your HTML to check it meets the standards. The W3C Validation Service will flag errors and help you improve the quality of your pages.
Try it yourself
The quickest way to get comfortable with this structure is to build pages and tweak them. Add elements to the body, change metadata in the head, and see what happens in the browser and in search results.
Next up we will look at each of these sections in more detail and start building more complex pages.