The important idea is:

HTML should describe what text means, not just how the text looks.

2.1 Headings#

HTML provides six heading levels:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

They represent a hierarchy:

h1
│
├── h2
│   ├── h3
│   └── h3
│
└── h2
    └── h3

Example:

<h1>HTML Course</h1>
 
<h2>HTML Fundamentals</h2>
 
<h3>HTML Elements</h3>
 
<h3>HTML Attributes</h3>
 
<h2>HTML Forms</h2>
 
<h3>Input Elements</h3>

2.2 <h1> — Main Heading#

<h1> represents the primary heading of a page or document.

Example:

<h1>My Portfolio</h1>

A page might have:

<h1>My Portfolio</h1>
 
<p>Welcome to my portfolio.</p>

Don't choose <h1> merely because you want large text.

This is incorrect thinking:

<h1> = Big text
<h2> = Slightly smaller
<h3> = Smaller

Instead:

<h1> = Highest-level heading
<h2> = Section heading
<h3> = Subsection heading

CSS controls the visual size.

2.3 Heading Hierarchy#

Consider a blog:

<h1>Complete HTML Guide</h1>
 
<h2>HTML Basics</h2>
 
<h3>Elements</h3>
 
<h3>Attributes</h3>
 
<h2>HTML Forms</h2>
 
<h3>Input Elements</h3>
 
<h3>Form Validation</h3>

The hierarchy becomes:

Complete HTML Guide
│
├── HTML Basics
│   ├── Elements
│   └── Attributes
│
└── HTML Forms
    ├── Input Elements
    └── Form Validation

This helps:

• users understand the document
• screen readers navigate content
• search engines understand page structure
• developers maintain the document

2.4 Paragraphs#

Use <p> for paragraphs.

<p>
    HTML is the standard markup language used to structure
    content on the web.
</p>

Multiple paragraphs:

<p>
    HTML defines the structure of a webpage.
</p>
 
<p>
    CSS controls its presentation.
</p>
 
<p>
    JavaScript adds behavior and interactivity.
</p>

Don't use <div> when the content is actually a paragraph.

Prefer:

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

rather than:

<div>This is a paragraph.</div>

2.5 Line Break <br>#

<br> creates a line break.

Example:

<p>
    Anubhav<br>
    India<br>
    Software Developer
</p>

Result:

Anubhav
India
Software Developer

Important#

Don't use <br> repeatedly to create spacing.

❌ Bad:

<h1>My Website</h1>
 
<br>
<br>
<br>
 
<p>Hello</p>

Use CSS for spacing.

2.6 Horizontal Rule <hr>#

<hr> represents a thematic break between sections of content.

Example:

<h2>About Me</h2>
 
<p>I am a software developer.</p>
 
<hr>
 
<h2>Projects</h2>
 
<p>Here are my projects.</p>

The browser typically displays a horizontal line.

But semantically, <hr> means more than "draw a line":

There is a thematic change or separation in the content.

2.7 Bold Text: <strong> vs <b>#

This is important.

<strong>#

Indicates that the content has strong importance, seriousness, or urgency.

<p>
    <strong>Warning:</strong> Do not share your password.
</p>

<b>#

Draws attention to text without adding the same semantic meaning of importance.

<p>
    Search results for <b>HTML tutorials</b>
</p>

Think:

<strong> → importance
<b>      → attention

Don't use <strong> simply because you want bold styling.

CSS is better for purely visual styling.

2.8 Italic-Looking Text: <em> vs <i>#

<em>#

Represents emphasis.

<p>
    You <em>must</em> complete this step.
</p>

The emphasis can matter semantically.

<i>#

Represents text set apart from the surrounding content for a reason such as:

• alternate voice
• technical term
• foreign phrase
• taxonomy
• idiomatic text

Example:

<p>
    The term <i>homo sapiens</i> is a scientific name.
</p>

Think:

<em> → emphasis
<i>  → alternate voice/technical distinction

2.9 Underlined Text <u>#

<u> represents text with a non-textual annotation or marking.

Example:

<p>
    This word is <u>annotated</u>.
</p>

Don't use <u> just because you want an underline.

For visual styling:

text-decoration: underline;

is generally more appropriate.

2.10 Highlighted Text <mark>#

Use <mark> to indicate text that is highlighted or relevant in the current context.

<p>
    You searched for:
    <mark>HTML</mark>
</p>

This commonly appears with a highlighted background.

Useful for:

• search results
• matching terms
• important portions of a document

2.11 Small Text <small>#

<small> represents side comments and small print, such as:

<p>
    Price: ₹999
    <small>Including applicable taxes.</small>
</p>

Another example:

<footer>
    <small>© 2026 My Website</small>
</footer>

Don't use <small> simply as a generic "make this text smaller" mechanism.

2.12 Deleted Text <del>#

Use <del> when content has been deleted from a document.

<p>
    Price:
    <del>₹1999</del>
    ₹1499
</p>

The browser normally renders the deleted text with a strikethrough.

2.13 Inserted Text <ins>#

<ins> represents content that has been inserted.

<p>
    The course contains
    <del>20</del>
    <ins>25</ins>
    chapters.
</p>

This can be useful when representing document revisions.

2.14 Superscript <sup>#

Superscript places content above the normal text baseline.

Example:

<p>
    10<sup>2</sup> = 100
</p>

Result conceptually:

  2
10

Another common use:

<p>
    E = mc<sup>2</sup>
</p>

2.15 Subscript <sub>#

Subscript places content below the normal baseline.

Example:

<p>
    H<sub>2</sub>O
</p>

Another:

<p>
    CO<sub>2</sub>
</p>

Useful for:

• chemical formulas
• mathematical notation
• scientific notation

2.16 Quotations#

HTML provides several elements for quotations.

<blockquote>#

For a longer quotation.

<blockquote>
    The journey of a thousand miles begins with one step.
</blockquote>

You can provide a citation source:

<blockquote cite="https://example.com/source">
    Quoted content goes here.
</blockquote>

The cite attribute identifies the source URL; it doesn't automatically create a visible link.

2.17 Short Quotations <q>#

Use <q> for a short inline quotation.

<p>
    He said, <q>HTML is easy to learn.</q>
</p>

Browsers commonly display quotation marks automatically.

2.18 <cite>#

<cite> represents the title of a creative work or other cited work.

For example:

<p>
    I am reading <cite>Clean Code</cite>.
</p>

It can be used for titles of:

• books
• movies
• articles
• songs
• paintings
• other works

Don't confuse the <cite> element with the cite attribute.

2.19 Abbreviations <abbr>#

Use <abbr> for abbreviations or acronyms.

<p>
    <abbr title="HyperText Markup Language">HTML</abbr>
</p>

The title provides the expanded meaning.

Another example:

<p>
    <abbr title="Application Programming Interface">API</abbr>
</p>

This provides useful information to users and assistive technology.

2.20 Contact Information <address>#

<address> represents contact information for the relevant content or document.

Example:

<address>
    Anubhav Chaudhary<br>
    India<br>
    Email: example@example.com
</address>

It is commonly used inside a footer or article.

2.21 Dates and Times <time>#

Use <time> to represent dates and times.

Example:

<p>
    The course starts on
    <time datetime="2026-10-01">October 1, 2026</time>.
</p>

The human-readable value:

October 1, 2026

The machine-readable value:

2026-10-01

This is extremely useful because machines can understand the actual date.

2.22 Code#

HTML provides elements for computer-related content.

<code>#

For a short piece of code:

<p>
    Use <code>console.log()</code> to print a value.
</p>

<pre>#

Preserves whitespace and line breaks.

<pre>
Hello
    World
        HTML
</pre>

The spacing is preserved.

2.23 Code Block#

Combine <pre> and <code> for a code block.

<pre><code>
function hello() {
    console.log("Hello World");
}
</code></pre>

This is common in:

• documentation
• tutorials
• programming blogs
• developer websites

2.24 Keyboard Input <kbd>#

<kbd> represents user input, typically keyboard input.

<p>
    Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
</p>

Another example:

<p>
    Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.
</p>

2.25 Sample Output <samp>#

<samp> represents sample output from a computer program.

<p>
    The program returned:
    <samp>Hello World</samp>
</p>

2.26 Variables <var>#

<var> represents a mathematical or programming variable.

<p>
    Area = <var>width</var> × <var>height</var>
</p>

Another example:

<p>
    x = 10
</p>

could be written:

<p>
    <var>x</var> = 10
</p>

2.27 Text Direction#

HTML can represent different text directions.

For example:

<p dir="rtl">
    مرحبا بالعالم
</p>

rtl means:

right-to-left

For normal English:

<p dir="ltr">
    Hello World
</p>

2.28 Bidirectional Isolation#

When dynamically generated content may contain different languages or directions, elements such as <bdi> can help isolate text direction.

Example:

<p>
    User:
    <bdi>مستخدم123</bdi>
</p>

This is particularly useful when mixing:

• Arabic/Hebrew
• English
• user-generated content

We'll revisit internationalization later.

2.29 Word Break Opportunity <wbr>#

<wbr> indicates a place where a browser may optionally break a long word or URL if necessary.

Example:

<p>
    https://example.com/very<wbr>long<wbr>url
</p>

This can help prevent long strings from causing layout problems.

2.30 Text Semantics vs Styling#

This is one of the most important lessons in this chapter.

Don't think:

HTML = Styling

Instead:

HTML = Meaning + Structure
CSS  = Visual presentation

For example:

<strong>Important</strong>

means:

This content has strong importance.

Whereas:

font-weight: bold;

means:

Make this text visually bold.

These are different concepts.

2.31 A Real Example#

Consider a product page:

<h1>MacBook Pro</h1>
 
<p>
    The latest model features a powerful processor.
</p>
 
<p>
    <strong>Limited offer:</strong>
    Get it for <del>₹1,99,999</del> <strong>₹1,79,999</strong>.
</p>
 
<p>
    Offer valid until
    <time datetime="2026-10-15">October 15, 2026</time>.
</p>

Notice how the HTML communicates meaning:

h1    → product title
p     → paragraph
strong → important information
del   → old price
time  → date

That's semantic HTML.

2.32 Complete Example#

Here's a small article using many concepts from this chapter:

<article>
 
    <h1>Learning HTML</h1>
 
    <p>
        <strong>HTML</strong> is the standard markup language
        used to structure content on the web.
    </p>
 
    <hr>
 
    <h2>Important Concept</h2>
 
    <p>
        Remember:
        <mark>HTML provides structure and meaning.</mark>
    </p>
 
    <h2>Example</h2>
 
    <pre><code>
&lt;h1&gt;Hello World&lt;/h1&gt;
    </code></pre>
 
    <p>
        Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your file.
    </p>
 
    <p>
        Water is represented as H<sub>2</sub>O.
    </p>
 
    <p>
        Einstein's equation is E = mc<sup>2</sup>.
    </p>
 
    <blockquote>
        Learning by building is one of the best ways to understand
        web development.
    </blockquote>
 
    <p>
        The course was updated on
        <time datetime="2026-10-01">October 1, 2026</time>.
    </p>
 
</article>

🧠 Important Text Elements Cheat Sheet#

🧪 Practice Exercise#

Create an article called:

"My Journey Into Web Development"

It should contain:

1. Main heading#

My Journey Into Web Development

2. Three sections#

Why I Started
What I Am Learning
My Future Goals

3. Include#

• paragraphs
• <strong>
• <em>
• <mark>
• <del>
• <ins>
• <blockquote>
• <abbr>
• <time>
• <code>
• <kbd>
• <sup>
• <sub>

Try to decide where each element makes semantic sense, rather than adding them randomly.

🎯 Interview Questions#

You should now be able to explain:

1. What is the difference between <strong> and <b>?
2. What is the difference between <em> and <i>?
3. What is the purpose of <mark>?
4. What is the difference between <del> and <s>?
5. What is the purpose of <ins>?
6. What is <blockquote> used for?
7. What is the difference between <blockquote> and <q>?
8. What is <cite>?
9. What is <abbr>?
10. What is the purpose of <time>?
11. What is the difference between <code> and <pre>?
12. What are <kbd>, <samp>, and <var>?
13. When should <br> be used?
14. Why shouldn't HTML elements be used merely for visual styling?
15. Why is semantic meaning important?

🔑 The Most Important Lesson#

Don't memorize HTML as:

<h1> = big
<strong> = bold
<em> = italic

Instead learn:

<h1>      → heading
<strong>  → strong importance
<em>      → emphasis
<mark>    → highlighted relevance
<time>    → date/time
<code>    → code
<kbd>     → user input

Meaning first. Styling later.

Next chapter: Chapter 3 — Links#

We'll learn how websites connect to each other using <a>, including absolute URLs, relative URLs, internal navigation, external links, page anchors, email links, telephone links, downloads, target, rel, security, SEO, and real-world navigation structures.