HTML Headings, Paragraphs & Links — Beginner Guide

Headings — Structuring Content

HTML has 6 heading levels: <h1> (most important) through <h6> (least important). Think of a newspaper: one big headline, smaller section headlines, even smaller sub-headlines.

<h1>Sharma's Dhaba</h1>      <!-- Main title: use ONCE per page -->
<h2>Our Menu</h2>             <!-- Major section -->
<h3>Veg Starters</h3>        <!-- Sub-section -->

SEO Rule: Only one <h1> per page. Use <h2> for sections, <h3> for sub-sections. Never skip levels (do not jump h1 to h4).

Paragraphs

The <p> tag wraps a block of text. Browsers add spacing above and below automatically.

<p>Welcome to Sharma's Dhaba — serving Mumbai since 1985.</p>
<p>We use only fresh ingredients sourced daily from the local market.</p>

Extra whitespace in your code is ignored by the browser. Use <br> to force a line break inside a paragraph.

Text Formatting

Tag	Use it when
`<strong>`	Text is important (renders bold)
`<em>`	Text needs emphasis (renders italic)
`<mark>`	Text should be highlighted
`<del>`	Deleted or outdated text (strikethrough)
`<small>`	Fine print / legal text

<p>Original: <del>Rs.500</del> &nbsp; Sale: <strong>Rs.299</strong> <small>(40% off)</small></p>

Links — The Backbone of the Web

The <a> (anchor) tag creates clickable links. href sets the destination:

<!-- External website -->
<a href="https://www.example.com">Visit our partner website</a>

<!-- Another page on your site -->
<a href="/menu.html">See Full Menu</a>

<!-- Jump to a section on same page -->
<a href="#specials">Today's Specials</a>

<!-- Open in new tab -->
<a href="https://maps.google.com" target="_blank">Find Us on Maps</a>

<!-- Email link -->
<a href="mailto:hello@sharma.com">Email Us</a>

<!-- Phone link (tappable on mobile) -->
<a href="tel:+910000000000">Call Us</a>

Real-World Example

<header>
  <h1>Sharma's Dhaba</h1>
  <nav>
    <a href="/">Home</a> |
    <a href="/menu.html">Menu</a> |
    <a href="/contact.html">Contact</a>
  </nav>
</header>

<h2 id="specials">Today's Specials</h2>
<p><strong>Dal Makhani</strong> — Slow-cooked lentils. <em>Chef's favourite!</em></p>
<p>Was: <del>Rs.180</del> &nbsp; Now: <strong>Rs.150</strong></p>

Try It Yourself

Add a nav bar to about-me.html with 3 links
Add a "Skills" section using <h2> and <strong> for each skill
Add a link to your favourite website with target="_blank"

❓ Frequently Asked Questions

Search engines treat the H1 as the main topic of the page. Using more than one H1 makes the structure less clear and can hurt your search ranking.

Yes, but also add rel="noopener noreferrer" for security. It stops the linked page from accessing your page through window.opener.