Basic HTML Structure

---

    

---

    

Basic HTML Structure
Every HTML document follows a basic structure that ensures proper rendering in web browsers. Below is an explanation of each essential part of an HTML page.

 <!DOCTYPE html>

✅ Ensures the page renders correctly in modern browsers.
✅ Prevents quirks mode (older browser behavior).

2. <html>, <head>, and <body> Elements
An HTML document is enclosed within the tag, which contains two main sections:

📌 HTML Structure Example:

 

<!DOCTYPE html>

<html>

<head>

    <title>My First Web Page</title>

</head>

<body>

    <h1>Welcome to My Websitev/h1>

    <p>This is a paragraph of text.</p>

</body>

</html>

🔹 <html> – The root element that contains all HTML code.
🔹 <head> – Stores metadata, title, and links to styles/scripts.
🔹 <body> – Contains the visible content of the webpage.

3. <title> Element

The <title> tag defines the title of the webpage, which appears in the browser tab.

 

<title>My First Web Page</title>

✅ Helps with SEO (Search Engine Optimization).
✅ Appears in browser tabs and bookmarks.

4. <meta> Tags (Character Encoding, Viewport)

<meta> tags provide additional information about the webpage. They are placed inside the <head> section.

 

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Common Meta Tags:

🔹 <meta charset="UTF-8"> – Defines character encoding to support special characters (like emojis 😊).
🔹 <meta name="viewport" content="width=device-width, initial-scale=1.0"> – Makes the webpage responsive on mobile devices.
🔹 <meta name="description" content="This is an HTML tutorial."> – Improves SEO by describing the page content.
🔹 <meta name="author" content="Your Name"> – Specifies the author of the page.

5. Comments in HTML

Comments help developers write notes inside the HTML file without affecting the webpage.

 

<!-- This is a comment and will not be displayed in the browser -->

<p>This is visible content.</p>

✅ Useful for documentation and debugging.
✅ Ignored by web browsers.

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="An introduction to HTML structure.">

    <title>Basic HTML Structure</title>

</head>

<body>

    <!-- This is a comment -->

    <h1>Hello, World!</h1>

    <p>Welcome to my first webpage.</p>

</body>

</html>

---

    Date: 2025-04-05 00:00:00.000000