HTML Document Structure Visualization
Here we have a basic HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation
1. DOCTYPE Declaration
<!DOCTYPE html>
This tag tells the browser, this is an HTML5 document.
It’s like saying, “Hey, this is a webpage!”
2. HTML Root Element
<html>
</html>
This tag is the container for everything on the webpage.
It wraps all the content on the page.
3. Head Section
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
This tag holds information that doesn’t appear on the webpage itself but is critical for SEO and functionality.
Some Key elements are:
Meta Tags: Like
<meta name="description">for search engine snippets.Title Tag:
<title>(the clickable headline in search results).CSS & JavaScript Links: External stylesheets (
<link rel="stylesheet">) and scripts (<script>).Canonical URL:
<link rel="canonical">to avoid duplicate content issues.Viewport Tag:
<meta name="viewport">for mobile responsiveness (a Google ranking factor).
Its not necessory that all elements should include in it.
4. Body Section
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML page.</p>
<a href="https://www.example.com">Click here to visit Example</a>
</body>
This tag holds all the content you want visitors to see, like text, images, videos, and links etc.
How to View & Inspect HTML Code on Any Webpage
View the Full HTML Code
Press CTRL + U on any webpage, OR
Right-click on the page and select “View Page Source”A new tab will open, showing all the HTML code of the webpage.
Inspect any Specific Element
Right-click on the item you want to check.
Select “Inspect” (or “Inspect Element”).
A panel will appear, showing both HTML and CSS for that element.
You can edit the code live in this panel to see how changes affect the page.