Each webpage on the internet begins with a basic HTML document or webpage. For us to utilize a browser, it is important to understand the life-giving anatomy structure of an HTML document.
HTML Document Building Blocks
🗂️ Doctype Declaration
This tag tells the web browser what version of HTML to expect in this document.
<!DOCTYPE html>📦 HTML Tag
The starting piece of any HTML document, at its core it's where every other component is nested.
<html lang="en">
<!-- Everything goes here -->
</html>👑 Head Section
It contains HTML meta tags along with the title of the webpage for indexing. By default, the title will be displayed on the top of the window.
🧍 Body Section
The Body Section usually contains the main content of the page such as headings, paragraphs, images, links etc.
<body>
<h1>Hello World!</h1>
<p>This is my first webpage.</p>
</body>📃 Full Example
Showing only the “Hello World!” example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a basic HTML document structure.</p>
</body>
</html>
🚀 Summary
With this basic structure you can create a snippet or a full website. In the end, having full control over your content is the key.