Basic HTML Structure Explained
Tags: html, beginners
Published: 2021-02-08 16:43:11

HTML is one of the first building blocks to learn how to build websites. There are a set of rules that must be followed in order to build HTML documents. Let's break down the basic structure of an HTML document to help us start building websites.

Table of Contents
- [What is HTML?](#what-is-html)
- [Basic HTML Structure](#basic-html-structure)
- [What is a Tag?](#what-is-a-tag)
- [What is a `DOCTYPE`?](#what-is-a-doctype)
- [What is the `html` tag?](#what-is-the-html-tag)
- [What is the `head` tag?](#what-is-the-head-tag)
- [What is the `body` tag?](#what-is-the-body-tag)
- [Conclusion](#conclusion)

## What is HTML?

**HTML** (Hyper Text Markup Language) is the most widely used markup language in existence. HTML is the primary markup language used to build websites. It was born out of [SGML](https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language) and [XML](https://en.wikipedia.org/wiki/XML) in the early nineties. HTML is used to semantically define the *structure* of a document.

Since the early days of the web, there have been many versions of HTML:

<table>
	<thead>
		<tr>
			<th>Version</th>
			<th>Year</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>HTML</td>
			<td>1991</td>
		</tr>
		<tr>
			<td>HTML+</td>
			<td>1993</td>
		</tr>
		<tr>
			<td>HTML 2.0</td>
			<td>1995</td>
		</tr>
		<tr>
			<td>HTML 3.2</td>
			<td>1997</td>
		</tr>
		<tr>
			<td>HTML 4.01</td>
			<td>1999</td>
		</tr>
		<tr>
			<td>XHTML</td>
			<td>2000</td>
		</tr>
		<tr>
			<td>HTML5</td>
			<td>2012</td>
		</tr>
	</tbody>
</table>

## Basic HTML Structure

HTML is written using a nested structure of tags. When the web page is loaded the browser interprets the tags and renders the document.

Below is an example of a basic `HTML` document. Let's break down each piece on the sections below.

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

</body>
</html>
``` 

## What is a Tag?

Tags are keywords the browser uses to determine how to render an HTML document. Tags that have content require an open and closing tag. For example: `<div>Content</div>`. Not all tags require content, so in those cases we can condense an open and closing tag into one. We call that a self closing tag. For example: `<br />`.

## What is a `DOCTYPE`?

The DOCTYPE sets the parsing and validation rules of a document. This ensures different browsers use the same set of rules. Since HTML has many different versions it's important to specify which rules the browser should follow. Below are a couple example of different `doctypes`.

```html
<!-- Html 5 doctype -->
<!DOCTYPE html>
<!-- Html 4.01 strict doctype -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body></body>
</html>
```

```html
<!-- Html 4.01 strict doctype -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body></body>
</html>
```

You can read more about `doctype` at the [W3C](https://www.w3.org/QA/2002/04/valid-dtd-list.html) site.

## What is the `html` tag?

The `html` tag is the root element of the document. This should be added immediately after the `doctype`. Within the `html` element, we separate the rest of our HTML code into two elements, the `<head>` and the `<body>` tags.

## What is the `head` tag?

The `head` tag will generally contain information about the document. Everything in the `head` tag will not be visible to the user, but are important to the browser. Inside the `head` tag we can define meta data (`<meta>`), document title (`<title>`), styles (`<style>`), and scripts (`<script>`).

**NOTE:** I will go more in-depth on each of these tags in a future blog.

## What is the `body` tag?

The `<body>` tag is where we put all our content. Anything that we want visible to the user will go inside the `body` tag. This is where the bulk of your HTML will be written. Everything from headers to images, paragraphs, tables, and forms will all end up here. Learning the various kind of HTML tags will allow you to build the body of the site.

## Conclusion

Knowing HTML is essential to building websites. This article covered the basic layout of an HTML document. Checkout back for more in-depth articles about HTML tags and how they can be used to build a site.