🌐 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!

🚀 𝗪𝗵𝗶𝗰𝗵 𝗧𝗲𝗰𝗵 𝗦𝗸𝗶𝗹𝗹 𝗪𝗶𝗹𝗹 𝗬𝗼𝘂 𝗠𝗮𝘀𝘁𝗲𝗿 𝗶𝗻 𝟮𝟬𝟮𝟲?

Want to build apps, uncover insights, or create AI solutions? Explore certification courses that match your career goals! 🎯

💻 𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁
👉 https://pdlink.in/3SuUeuD

📊 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰𝘀
👉 https://pdlink.in/45vk5ph

💫𝗔𝗜 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴
👉 https://pdlink.in/4fWJVID

🔥 Choose your path, sharpen your skills, and take the next step towards your tech career!

📌 Save this post & share it with a friend planning to upskill.

🌐 Web Development Roadmap — Part 16

HTML Links — Tag

Links are one of the most important parts of the web. They allow users to move from one page or website to another.

1. Creating a Link

HTML uses the <a> (anchor) element to create links.

<a href="https://www.google.com">Visit Google</a>

The browser displays:

Visit Google

When the user clicks it, the browser navigates to the specified URL.

2. The href Attribute

href stands for Hypertext Reference.

<a href="https://example.com">Visit Website</a>

Here:

<a> → Creates the link

href → Specifies where the link goes

URL → Destination

Text → What the user clicks

3. Linking to Another Page

Suppose your project contains:

my-website/
├── index.html
├── about.html
└── contact.html

From index.html:

<a href="about.html">About Me</a>

<a href="contact.html">Contact</a>

These are called relative links because they point to files within your website.

4. Linking to Another Website

You can also link to an external website:

<a href="https://www.example.com">
    Visit Example
</a>

The complete URL is used for an external destination.

5. Opening a Link in a New Tab

You can use target="_blank":

<a href="https://www.example.com" target="_blank">
    Visit Website
</a>

This tells the browser to open the destination in a new browsing context, commonly a new tab.

For external links, it's also good practice to use:

<a
    href="https://www.example.com"
    target="_blank"
    rel="noopener noreferrer">
    Visit Website
</a>

6. Email Links

You can create a link that opens the user's email application:

<a href="mailto:hello@example.com">
    Send Email
</a>

7. Telephone Links

You can create a clickable phone link:

<a href="tel:+911234567890">
    Call Us
</a>

This is especially useful on mobile websites.

8. Linking to a Section on the Same Page

You can jump to a specific section using an id.

<a href="#contact">Go to Contact</a>

<h2 id="contact">Contact Me</h2>

The flow is:

Click "Go to Contact"

↓

Find id="contact"

↓

Jump to that section

9. Navigation Menu Example

A simple website navigation could look like:

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="projects.html">Projects</a>
    <a href="contact.html">Contact</a>
</nav>

This creates the foundation of a website's navigation.

10. Link vs Button

This is important.

Use a link when the user is going somewhere:

<a href="about.html">About Me</a>

Use a button when the user is performing an action:

<button>Submit</button>

For example:

Go to Profile → <a>

Submit Form → <button>

Open Article → <a>

Delete Account → <button>

🧠 Remember

<a>

↓

Creates a link

href

↓

Specifies destination

target="_blank"

↓

Opens in a new browsing context

id

↓

Can create a destination within the same page

Key Takeaway

The <a> element connects the web together.

Page A

↓

<a href="page-b.html">

↓

Page B

Without links, navigating between webpages would be much harder.

Double Tap ❤️ For More

𝗧𝗢𝗣 𝗙𝗥𝗘𝗘 𝗖𝗢𝗨𝗥𝗦𝗘𝗦 𝗧𝗢 𝗕𝗢𝗢𝗦𝗧 𝗬𝗢𝗨𝗥 𝗦𝗞𝗜𝗟𝗟𝗦 𝗜𝗡 𝟮𝟬𝟮𝟲!

Explore FREE online learning resources to develop in-demand skills and improve your career opportunities!

🎓 Why Explore These Courses?
✅ Learn valuable professional skills
✅ Improve your resume
✅ Build practical knowledge
✅ Learn at your own pace

𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 𝗛𝗲𝗿𝗲👇

https://pdlink.in/3VBdt6V

💡 Learn New Skills → Build Confidence → Unlock Career Opportunities!