What is an HTML Document’s Basic Structure?

What is an HTML Document’s Basic Structure?

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.
The basic structure of an HTML document consists of these elements:

Doctype declaration
html
head
body

!DOCTYPE html

The <!DOCTYPE html> declaration needs to be there to inform the browser that this document is an HTML5 document.

The <html> Tag

Although several versions have been released throughout time, the fundamentals of HTML have remained the same.

The <html> tag is the root and is the container for all other HTML elements (except for the <!DOCTYPE> tag).
An HTML document’s structure has been compared to that of a burger. The HTML document has opening and closing HTML tags, just like a burger has two bun slices on the top and bottom.

These tags, surround everything else:

<html>
	<!-- content -->
</html>

The <head> Tag

The document’s head, which is identified by opening and closing head tags, appears immediately after the beginning HTML element.

The head of an HTML file contains all of the page’s non-visual elements. The head element contains metadata about the document, such as its title, scripts, and style sheets.

<html>
	<head>
	</head>
</html>

The <body> Tag

The body tag follows the head tag.
The tag defines the main content of the HTML document.
All visual-structural elements are contained within the body tag.

Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag. Like in our burger analogy, the body is like the contents of a burger e.g. cheese, lettuce, patty, pickles etc.

Basic HTML Structure

Here is the basic structure of a HTML document:

<!DOCTYPE html>
<html>
	<head>
		<title> Title here </title>
	</head>
	<body>
		web page content goes here
	</body>
</html>

HTML Cheat Sheet

If you want to learn more about HTML, grab my cheat sheet which is available on Gumroad.
This product will assist you in learning the fundamental HTML elements in your Web Development journey. It is intended for both beginners and experts who want to brush up on their knowledge.
All of the resources are structured and organised in a straightforward and easy-to-read manner. They include interactive external links, images, tag names and code snippets to help you understand the topics better.

If you liked this article, then please share. You can also find me on Twitter for more updates.