Full Stack Developer Course

Web Development Course

Introduction to HTML

What is HTML? Full Introduction, Basics, Features, Uses, Version

Full History of HTML: All Versions, Founder, Latest Version

Structure of HTML Document (Basic HTML Structure With Example)

All HTML Tags (Full List, Examples, Types, Syntax, Description)

HTML Tutorial

HTML Program

HTML Interview Questions

Learn HTML from scratch with this tutorial. Understand the basics of HTML, such as tags, attributes, and elements. Create your first HTML webpage today!

HTML Tutorial For Beginners (Learn to Build Websites)

HTML Quiz

Comprehensive tutorial to learn core concepts of HTML

HTML Tutorial For Beginners

Introduction

Meaning of HTML Structure

Key Elements of Basic HTML Structure

Basic Structure of HTML Document

Example of HTML Structure

HTML Document Type Declaration

The <html> Element

The <head> Element

The <body> Element

Comments in HTML

HTML Boilerplate Template

Common HTML Tags

Nesting HTML Elements

How to View the HTML Structure of Page on Any Website?

FAQs Related to Tags of HTML

HTML History FAQs

In today's digital age, the World Wide Web is an essential part of our lives, providing an endless array of information and opportunities. Behind every web page lies a powerful foundation known as Hypertext Markup Language, or simply HTML.&nbsp;
If you're a budding web developer or an enthusiastic learner, understanding the basic structure of HTML document is your first stepping stone.
In this blog post, we will talk about the core components and structure of HTML document or page. It will help you to gain a solid understanding of how to create a simple, yet functional HTML page and be well-equipped to start your web development journey.

The structure of HTML means the way web documents are organized and presented. HTML is the standard markup language used to create web pages and define their layout and content.&nbsp;
The&nbsp; HTML page is defined using elements and tags, which provide instructions to web browsers on how to render and display the content.
This structure is hierarchical, and elements are nested inside each other. The basic building blocks are called elements, and they are represented by tags.&nbsp;
Tags are enclosed within angle brackets ("&lt;" and "&gt;") and usually come in pairs: an opening tag and a closing tag. The opening tag indicates the beginning of an element, while the closing tag marks its end. The content of an element resides between the opening and closing tags.

The key elements of the basic HTML structure are:
<h3 dir="ltr">1. &lt;!DOCTYPE html&gt;</h3>
This declaration is the very first line of an HTML document and informs the browser that the document is written in HTML5.
<h3 dir="ltr">2. &lt;html&gt;</h3>
The root element of an HTML document. All other elements are nested inside this element.
<h3 dir="ltr">3. &lt;head&gt;&nbsp;</h3>
This element contains meta-information about the document, such as the title, links to external resources (CSS, scripts, etc.), and meta tags.
<h3 dir="ltr">4. &lt;title&gt;</h3>
The title element sets the title of the document that appears in the browser's title bar or tab.
<h3 dir="ltr">5. &lt;body&gt;</h3>
The body element contains the visible content of the web page, including headings, paragraphs, lists, images, and other elements.
These elements form the foundational structure of an HTML document.&nbsp;
The &lt;head&gt; section is used for providing information about the document and linking external resources, while the &lt;body&gt; section contains the content visible to the users.&nbsp;
The &lt;title&gt; element inside the &lt;head&gt; element specifies the title of the web page that is displayed in the browser's title bar or tab.&nbsp;
The &lt;!DOCTYPE html&gt; declaration ensures that the browser interprets the document as HTML5, the latest version of HTML.

<?xml encoding="utf-8" ?>Here is the code showing the basic structure of an HTML document:<pre class="language-markup"><code>

 
 
 
 Main HeadingThis is a paragraph.
 
</code></pre><h3 dir="ltr">Output:</h3><img title="Basic Structure of HTML Document.png" src="https://d2x0t6n5jvjipg.cloudfront.net/uploads/learning-course/images/lcourses/1aa3ba95-f356-4455-9542-fa4ecb097654-1693801366.png" alt="Basic Structure of HTML Document" width="368" height="251">

<?xml encoding="utf-8" ?>Let&rsquo;s understand this concept with an example of the HTML structure of the homepage of this website (tutorialsfreak.com):<pre class="language-markup"><code>


 
 


 
 Welcome to TutorialsFreakLearn Something New Every Day!
 Latest Tutorials
 
 Categories
 
 
 
 
 

</code></pre><h3 dir="ltr">Output:</h3><img title="example of HTML structure.png" src="https://d2x0t6n5jvjipg.cloudfront.net/uploads/learning-course/images/lcourses/de872762-4dd6-4f1a-9450-3728f5a1d91e-1693801734.png" alt="example of HTML structure" width="393" height="257">

The Document Type Declaration, often referred to as the &lt;!DOCTYPE&gt; declaration, is a critical element at the beginning of every HTML document. It tells the web browser which version of HTML the document is written in and helps the browser render the page correctly.&nbsp;
The &lt;!DOCTYPE&gt; declaration is not an HTML tag but rather an instruction to the browser.
In HTML5, the &lt;!DOCTYPE&gt; declaration is quite simple and looks like this:
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;</code></pre>
This declaration tells the browser that the document is written in HTML5, the latest and most widely supported version of HTML.
However, in older versions of HTML, you may encounter different &lt;!DOCTYPE&gt; declarations, such as HTML 4.01 or XHTML 1.0, which were used in the past.

The &lt;html&gt; element serves as the root of every HTML document. It contains all other HTML elements, and everything in your web page should be enclosed within the &lt;html&gt; element.&nbsp;
Here's an example of how the &lt;html&gt; element is structured:
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;!-- The rest of your HTML content goes here --&gt;
&lt;/html&gt;</code></pre>

The &lt;head&gt; element is an essential part of an HTML document. It contains metadata and information about the document but is not directly visible on the web page.&nbsp;
Here are some common elements found within the &lt;head&gt; section:
<h3 dir="ltr">&lt;meta&gt;&nbsp;</h3>
The &lt;meta&gt; tag is used to specify metadata about the document, such as character encoding and authorship information.&nbsp;
<h4 dir="ltr">For example:</h4>
<pre class="language-markup"><code>&lt;meta charset="UTF-8"&gt;
&lt;meta name="author" content="Your Name"&gt;</code></pre>
<h3 dir="ltr">&lt;title&gt;</h3>
The &lt;title&gt; tag sets the title of the web page, which appears in the browser's title bar or tab. This title is also used when bookmarking a page or sharing it on social media:
<pre class="language-markup"><code>&lt;title&gt;My Awesome Website&lt;/title&gt;</code></pre>

The &lt;body&gt; element contains the visible content of your web page, such as text, images, links, and other HTML elements. Everything you want users to see and interact with should be placed within the &lt;body&gt; element.&nbsp;
Here's a basic structure of the &lt;body&gt; element:
<pre class="language-markup"><code>&lt;body&gt;
 &lt;h1&gt;Welcome to My Website&lt;/h1&gt;
 &lt;p&gt;This is a sample paragraph.&lt;/p&gt;
 &lt;a href="#"&gt;Click me!&lt;/a&gt;
 &lt;!-- More content goes here --&gt;
&lt;/body&gt;</code></pre>

In HTML, you can add comments to your code to provide explanations or notes for yourself or other developers. Comments are not displayed on the web page and are ignored by web browsers. They are enclosed within &lt;!-- and --&gt; tags.&nbsp;
Here's an example:
<pre class="language-markup"><code>&lt;!-- This is a comment. It won't be visible on the web page. --&gt;</code></pre>

An HTML boilerplate template is a starting point for creating new web pages. It includes the basic structure of an HTML document, including the &lt;!DOCTYPE&gt;, &lt;html&gt;, &lt;head&gt;, and &lt;body&gt; elements.&nbsp;
Here's a common HTML5 boilerplate template:
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;My Web Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;!-- Your content goes here --&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
You can use this template as a foundation for your web projects and customize it as needed.

HTML provides a wide range of tags to structure and format your content.&nbsp;
Some common HTML tags include:
<ul>
<li dir="ltr" aria-level="1">
&lt;a&gt; for links
</li>
<li dir="ltr" aria-level="1">
&lt;img&gt; for images
</li>
<li dir="ltr" aria-level="1">
&lt;div&gt; for divisions or sections
</li>
<li dir="ltr" aria-level="1">
&lt;p&gt; for paragraphs
</li>
<li dir="ltr" aria-level="1">
&lt;ul&gt; and &lt;ol&gt; for unordered and ordered lists
</li>
<li dir="ltr" aria-level="1">
&lt;li&gt; for list items
</li>
</ul>
Each of these tags serves a specific purpose and can be customized using attributes to achieve the desired appearance and functionality.

In HTML, you can nest elements within other elements. This means you can place one HTML element inside another.&nbsp;
For example, you can nest a &lt;p&gt; (paragraph) element inside a &lt;div&gt; (division) element:
<pre class="language-markup"><code>&lt;div&gt;
 &lt;p&gt;This is a nested paragraph.&lt;/p&gt;
&lt;/div&gt;</code></pre>
Nesting allows you to create complex structures and layouts by combining different HTML elements.

To view the actual HTML structure of any specific website, you can use the browser's developer tools (usually accessible through the F12 key) to inspect the page's source code.&nbsp;
This will show you the HTML, CSS, and JavaScript used to create the page.

HTML Document Structure FAQs

Learn the basics of the Structure of HTML Document with examples. Explore the essential elements that make up the structure of HTML. Start coding today!