🎨 Day 2: Headings, Paragraphs & Text Formatting

on

✍️ Day 2 — HTML Text Formatting and Styling Basics

Welcome back to Day 2 🎉! Yesterday, we built our very first HTML page. Today, we’re going to make that page look more alive by learning how to format text — headings, paragraphs, emphasis, and special inline elements that bring clarity to content. As a developer, clear structure and readable text are your best friends.

💬 1️⃣ Headings and Paragraphs

Headings define sections of your page, while paragraphs group sentences together. Browsers apply default spacing and font sizes to these elements to create natural visual hierarchy. 

<h1>Welcome to My Site</h1>
<h2>Learning Web Development</h2>
<p>This paragraph explains why HTML is important for web design.</p>
<p>You’ll soon be building pages that look amazing on any device.</p>

🧩 2️⃣ Line Breaks and Horizontal Rules

<p>First line of text.<br>
Second line after break.</p>

<hr>
<p>This text comes after a horizontal rule.</p>

The <br> tag adds a simple line break. <hr> draws a horizontal line to visually separate sections.

✨ 3️⃣ Formatting for Emphasis

Text formatting helps communicate tone and importance. Let’s see the most useful inline tags: 

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>H₂O</sub>
<sup>10²</sup>

<strong> and <em> carry semantic meaning — screen readers announce them differently, while <b> and <i> are purely visual.

📄 4️⃣ Quotations and Citations

<blockquote>
"Learning HTML is the first step toward creating something amazing."
</blockquote>

<q>Inline quotes use the <q> tag.</q>

<cite>– Rahul Naidu Nettem</cite>

<blockquote> displays a quoted section with indentation, while <q> is for short inline quotes. Use <cite> to credit the author.

🧱 5️⃣ Preformatted and Code Text

To show code snippets or preserve spacing, HTML provides the <pre> and <code> tags. 

<pre>
for (i = 0; i < 5; i++) {
  console.log(i);
}
</pre>

<code><p>Example Paragraph</p></code>

🪄 6️⃣ Combining Tags Together

You can mix these tags to create meaningful sentences that highlight important concepts. 

<p>Learning <strong>HTML</strong> is the <em>foundation</em> of web development.</p>
<p>Once you understand <mark>markup structure</mark>, CSS and JS become easier to grasp.</p>

📚 7️⃣ Best Practices When Formatting Text

  • Keep your markup clean and consistent.
  • Don’t use tags for visual style alone — use them to convey meaning.
  • Break long paragraphs into smaller ones for readability.
  • Use headings to organize sections logically.

🧠 8️⃣ Practice Task

  1. Create a file named day2.html.
  2. Write a short blog-style article about your hobby.
  3. Use at least three different formatting tags to highlight important points.
  4. Include a blockquote with your own quote about learning.

🧮 Mini Quiz

  • Q1: Which tag creates italic text with meaningful emphasis?
  • Q2: How do you insert a line break inside a paragraph?
  • Q3: What’s the difference between <strong> and <b> ?

🎯 Summary

Great job making it to Day 2! You can now control text appearance and emphasis using HTML alone. These skills build the foundation for clean, readable content that visitors enjoy reading. Next time, we’ll learn how to link pages and create smooth navigation that ties your site together.

Comments

Post a Comment