The browser reads the HTML structure and builds the webpage from these elements.

Key Takeaway

HTML is essentially the structure of your webpage.

<h1> → Heading

<p> → Paragraph

<a> → Link

<img> → Image

<button> → Button

Once you understand tags, elements, attributes, and nesting, you'll be able to start building real webpage structures.

Double Tap ❤️ For More

𝗠𝗮𝘀𝘁𝗲𝗿 𝗣𝗼𝘄𝗲𝗿 𝗕𝗜 𝗳𝗼𝗿 𝗙𝗥𝗘𝗘! 🔥

Learn Power BI through these FREE learning resources
​
✨ What You'll Learn:
📊 Interactive Dashboards
📈 Data Visualization
🧹 Data Transformation
💼 Real-World Reporting Skills
🎯 Beginner-Friendly — No Coding Required

𝗦𝘁𝗮𝗿𝘁 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗳𝗼𝗿 𝗙𝗥𝗘𝗘
​
​https://pdlink.in/4hznwlu

💫Perfect for Students • Freshers • Data Analyst Aspirants • Working Professionals

🌐 Web Development Roadmap — Part 14

HTML Document Structure

Before learning individual HTML tags in depth, you need to understand how a complete HTML document is organized.

1. Basic HTML Structure

Every normal HTML page follows a structure similar to this:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is my website.</p>
</body>
</html>

Think of it like a building:

HTML Document

├──

│ ├── → Page information

│ └── → Visible webpage content

2. <!DOCTYPE html>

This tells the browser that the document uses modern HTML.

It is a declaration, not a normal HTML element.

3.

This is the root element of the document.

Almost everything else belongs inside <html>.

4.

The <head> contains information about the webpage.

Common things placed inside it include:

<meta> <link> <style> <script></strong>

Much of this information isn't directly displayed as page content.

5. <title></strong><br>
The title usually appears in the browser tab.

It is also important for search engines and accessibility.

6. <body>

The <body> contains the main content users interact with and see.

Examples: Headings, Paragraphs, Images, Links, Buttons, Forms, Lists, Videos

7. <meta>

<meta> provides information about the document.

A very common example is: <meta charset="UTF-8">

You will also commonly see: <meta name="viewport" content="width=device-width, initial-scale=1.0">

This helps webpages display properly on mobile devices.


8. <link>

<link> is commonly used to connect external resources to the HTML document.

For example: <link rel="stylesheet" href="style.css">

9. Complete Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to My Portfolio</h1>
    <p>I am learning web development.</p>
    <a href="about.html">About Me</a>
</body>
</html>

10. What Happens When the Browser Opens It?

HTML file → Read DOCTYPE → Read html → Process head → Load metadata, title, CSS → Process body → Build webpage → Display to user

11. vs

: Information ABOUT the webpage

: Content OF the webpage

🧠 Double Tap ❤️ For More

🚀𝗣𝗮𝘆 𝗔𝗳𝘁𝗲𝗿 𝗣𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁 𝗧𝗿𝗮𝗶𝗻𝗶𝗻𝗴 | 𝗕𝗲𝗰𝗼𝗺𝗲 𝗮 𝗙𝘂𝗹𝗹𝘀𝘁𝗮𝗰𝗸 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗪𝗜𝘁𝗵 𝗚𝗲𝗻𝗔𝗜

Start a high-paying tech career—even without prior coding experience

🏆 𝗣𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁 𝗛𝗶𝗴𝗵𝗹𝗶𝗴𝗵𝘁𝘀:
💰 ₹41 LPA highest salary
📈 ₹7.4 LPA average salary
🎓 2,000+ students placed
🏢 500+ hiring partners
✅ 100% job assistance
📜 Skill India–authenticated certificate

🔗 𝗔𝗽𝗽𝗹𝘆 𝗡𝗼𝘄👇:-

https://pdlink.in/3SuUeuD

🎯 HurryUp.....Limited Seats Available

🌐 Web Development Roadmap — Part 15

HTML Headings, Paragraphs & Text Formatting

Now let's learn the most common HTML elements used to display and organize text on a webpage.

1. HTML Headings

HTML provides six heading levels:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

The hierarchy is:

<h1> Most important

↓

<h2>

↓

<h3>

↓

<h4>

↓

<h5>

↓

<h6> Least important

2. <h1> — Main Heading

Usually, <h1> represents the main heading of a page.

<h1>My Portfolio</h1>

For example:

My Portfolio

─────────────

About Me

Projects

Contact

3. <h2> — Major Sections

Use <h2> for major sections under the main heading.

<h1>My Portfolio</h1>

<h2>About Me</h2>
<h2>My Projects</h2>
<h2>Contact</h2>

4. <h3> — Subsections

If a section contains smaller sections, use <h3>.

<h2>My Projects</h2>

<h3>Web Development Projects</h3>
<h3>JavaScript Projects</h3>

This creates a logical content hierarchy.

5. Paragraphs

Use <p> for normal paragraphs.

<p>
    I am learning web development and building websites.
</p>

Multiple paragraphs can be written separately:

<p>HTML provides the structure of a webpage.</p>

<p>CSS controls its appearance.</p>

<p>JavaScript adds interactivity.</p>

6. Bold Text

Use <strong> when the text has strong importance.

<p>
    <strong>Important:</strong> Save your work regularly.
</p>

The browser normally displays it in bold.

7. Italic or Emphasized Text

Use <em> to emphasize text.

<p>
    This is <em>very important</em>.
</p>

The browser normally displays emphasized text in italic.

8. <br> — Line Break

<br> moves content to the next line.

<p>
    Hello!<br>
    Welcome to my website.
</p>

Result:

Hello!

Welcome to my website.

However, <br> should not normally be used to create large spaces between sections. CSS should handle layout and spacing.

9. <hr> — Thematic Break

<hr> represents a thematic break between sections.

<h2>About Me</h2>
<p>Information about me.</p>

<hr>

<h2>Projects</h2>
<p>My recent projects.</p>

The browser normally displays a horizontal line.

10. <mark> — Highlighted Text

<p>
    Learn <mark>
HTML</mark> before moving to CSS.
</p>

The browser normally highlights the marked text.

11. <small> — Smaller Text

<p>
    Website Terms <small>Last updated in 2026</small>
</p>

It represents side comments or small print.

12. Putting Everything Together

<h1>Web Development</h1>

<p>
    Web development is the process of creating websites
    and web applications.
</p>

<h2>Frontend Development</h2>

<p>
    <strong>HTML</strong> provides structure,
    <strong>CSS</strong> provides styling,
    and <strong>JavaScript</strong> adds behaviour.
</p>

<h3>Important Technologies</h3>

<p>
    Learn <em>HTML</em> first, then move to CSS and JavaScript.
</p>

<hr>

<h2>My Learning Journey</h2>

<p>
    I am learning <mark>web development</mark> step by step.
</p>

🧠 Remember

• <h1> → Main page heading

• <h2> → Major section

• <h3> → Subsection

• <p> → Paragraph

• <strong> → Strong importance

• <em> → Emphasis

• <br> → Line break

• <hr> → Thematic break

• <mark> → Highlighted text

• <small> → Smaller/side text

Key Takeaway

HTML text elements are not just about making text look different. They help create a meaningful structure and hierarchy that browsers, search engines, accessibility tools, and users can understand.

Double Tap ❤️ For Part-16

🎓 𝗠𝗶𝗰𝗿𝗼𝘀𝗼𝗳𝘁 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 𝘄𝗶𝘁𝗵 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗲𝘀! 🚀🔥

Upgrade your resume with Microsoft learning opportunities. Explore courses covering some of today's most in-demand tech skills!

🎯 Perfect for Students • Freshers • Job Seekers • Working Professionals

✅ Learn at your own pace ✅ Build career-relevant skills ✅ Explore available certificates and credentials

🔗 𝗔𝗰𝗰𝗲𝘀𝘀 𝗠𝗶𝗰𝗿𝗼𝘀𝗼𝗳𝘁 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 𝗛𝗲𝗿𝗲 👇

https://pdlink.in/3Uf5trR

🔥 Share with friends looking to upskill in 2026!

🇮🇳 𝗚𝗢𝗩𝗘𝗥𝗡𝗠𝗘𝗡𝗧 𝗢𝗙 𝗜𝗡𝗗𝗜𝗔 — 𝗔𝗜𝗖𝗧𝗘 𝗜𝗡𝗧𝗘𝗥𝗡𝗦𝗛𝗜𝗣𝗦 𝟮𝟬𝟮𝟲 🚀

Students and freshers can explore internship opportunities through the AICTE Internship Portal across multiple domains:

💻 AI, Data Science & Web Development
📈 Digital Marketing & Business Development
💰 Finance & Accounting
✍️ Content Writing & Graphic Design
⚙️ Mechanical, Civil & Electrical Engineering

🔗 𝗖𝗵𝗲𝗰𝗸 𝗢𝗽𝗽𝗼𝗿𝘁𝘂𝗻𝗶𝘁𝗶𝗲𝘀 & 𝗔𝗽𝗽𝗹𝘆 👇

https://pdlink.in/4y3vcBl

📢 Share this opportunity with your friends and classmates!