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?
- Basic HTML Structure
- What is a Tag?
- What is a
DOCTYPE? - What is the
htmltag? - What is the
headtag? - What is the
bodytag? - 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 and 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:
| Version | Year |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2012 |
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.
<!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 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 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 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.
Top comments (0)