Over the last two days, I learned what HTML is and understood the basic structure of an HTML document.

Today, I moved one step forward and explored how to add actual content to a webpage using headings, paragraphs, and text formatting tags.

Although these tags are simple, they form the foundation of every website, from personal portfolios to large-scale applications.

Let's explore them.

---

Headings in HTML

HTML provides six levels of headings, from <h1> to <h6>.

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

<h1> is the most important heading, while <h6> is the least important.

A well-structured webpage should usually have one <h1> representing the main topic, followed by <h2>, <h3>, and so on to organize the content.

Why are headings important?

• They improve readability.

• They create a logical structure for the page.

• Search engines use headings to understand the content of a webpage.

• Screen readers rely on headings to help users navigate pages.

---

Paragraphs

To display normal text, HTML uses the <p> tag.

Example:

<p>HTML is the standard markup language for creating web pages.</p>

Every paragraph starts on a new line and automatically includes some spacing.

Paragraphs make long pieces of text easier to read.

---

Line Breaks

Sometimes you don't want to start a new paragraph—you simply want to move to the next line.

For that, HTML provides the <br> tag.

Example:

Hello<br>
Welcome to my website.

Output:

Hello
Welcome to my website.

Unlike most HTML elements, <br> does not require a closing tag.

---

Horizontal Rule

The <hr> tag creates a horizontal line.

Example:

<hr>

It is commonly used to separate different sections of content.

---

Text Formatting Tags

HTML provides several tags to emphasize or style text.

Bold Text

<strong>Important Information</strong>

or

<b>Bold Text</b>

Although both appear bold, <strong> also adds semantic meaning, indicating that the content is important.

---

Italic Text

<em>Emphasized Text</em>

or

<i>Italic Text</i>

Again, <em> is preferred because it conveys emphasis, not just appearance.

---

Underlined Text

<u>Underlined Text</u>

---

Highlighted Text

<mark>Highlighted Text</mark>

Useful for drawing attention to specific content.

---

Small Text

<small>This is smaller text.</small>

Often used for notes or disclaimers.

---

Deleted Text

<del>₹999</del>

Commonly seen on e-commerce websites to show discounted prices.

---

Inserted Text

<ins>New Feature Added</ins>

Indicates newly inserted content.

---

Subscript & Superscript

Subscript:

H<sub>2</sub>O

Output:

H₂O

Superscript:

2<sup>3</sup>

Output:

2³

These tags are useful for chemical formulas, mathematical expressions, and scientific content.

---

Why Semantic Tags Matter

While tags like <b> and <i> only change appearance, semantic tags such as <strong> and <em> also describe the meaning of the content.

This improves:

• Accessibility

• Search Engine Optimization (SEO)

• Code readability

As a developer, using semantic HTML is considered a best practice.

---

My Biggest Takeaway

Before today, I thought headings and formatting tags were only about making text look better.

Now I understand that HTML isn't just about appearance—it's also about giving meaning and structure to content.

Using the right tags helps browsers, search engines, and assistive technologies understand the purpose of each piece of information.

It's a small step, but it's helping me build better habits as I continue learning web development.