Common HTML Tags

Analogy categoryAnalogies

Introduction

Once you understand the overall document structure, the next step is learning the everyday tags used to mark up content. These include headings, paragraphs, text-level formatting elements, and generic containers that organize a page into logical sections.

🏏

Cricket analogy: Learning common HTML tags after document structure is like learning individual shot types such as the cover drive after you already understand the basic stance and grip.

Syntax

html

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>A paragraph of text.</p>
<strong>Important text</strong>
<em>Emphasized text</em>
<div>A block-level container</div>
<span>An inline container</span>

Explanation

Headings <h1> through <h6> establish a document's outline, with <h1> being the most important and typically used once per page. The <p> tag defines a paragraph of text. <strong> conveys strong importance and is rendered bold by default, while <em> conveys emphasis and is rendered italic — both carry semantic meaning beyond mere styling. <div> is a generic block-level container used to group content for layout or styling purposes, whereas <span> is its inline equivalent, used to wrap small pieces of text or elements without breaking the flow of a line.

🏏

Cricket analogy: <strong> is like a commentator raising his voice for a crucial six, adding real emphasis, not just louder volume; the meaning matters, not just the style.

Use heading levels in order (h1, then h2, then h3, and so on) rather than skipping levels, since screen reader users often navigate a page by its heading outline.

Example

html

<article>
  <h1>10 Tips for Learning HTML</h1>
  <p>HTML is the <strong>foundation</strong> of every website. Once you understand it, learning CSS becomes <em>much easier</em>.</p>
  <div class="tip-box">
    <span>Tip #1:</span> Practice by building small pages every day.
  </div>
</article>

Output

The browser displays a large bold heading, followed by a paragraph where 'foundation' appears bold and 'much easier' appears italic. Below that, a div groups a bolded inline span labeled 'Tip #1:' together with surrounding text on the same line.

🏏

Cricket analogy: The bold 'foundation' word standing out mid-paragraph is like a commentator emphasizing 'century' the instant a batsman reaches the milestone, without changing the rest of the commentary's tone.

Avoid using <b> and <i> purely for visual bolding or italics when you mean semantic importance or emphasis — prefer <strong> and <em>, which communicate meaning to assistive technologies.

Key Takeaways

Headings h1–h6 create a logical, hierarchical outline for the page.
<p> marks up paragraphs of readable text.
<strong> and <em> add semantic importance and emphasis, not just visual styling.
<div> groups block-level content; <span> groups inline content.
Choosing the right tag for its meaning improves accessibility and SEO.