HTML Tutorial: #3 Text Formatting and Styling

 Welcome back to our HTML tutorial series! In this blog, we’ll explore how to format and style text using HTML. By the end, you’ll know how to make text bold, italic, underlined, and even styled with colors and alignment.

---

Why Text Formatting Matters

Text formatting helps to:

1. Highlight important content.
2. Improve readability.
3. Make your web pages visually appealing.

Let’s dive into the tags and attributes that help you achieve this!

---

Basic Text Formatting Tags

1. Bold Text

The <b> tag makes text bold:

<p>This is <b>bold</b> text.</p>

Output: This is bold text.

Alternatively, use the <strong> tag, which also adds semantic meaning (important for accessibility):

<p>This is <strong>important</strong> text.</p>

2. Italic Text

The <i> tag makes text italic:

<p>This is <i>italic</i> text.</p>

Output: This is italic text.

You can also use <em> for emphasis (adds semantic meaning):

<p>This is <em>emphasized</em> text.</p>

3. Underlined Text

The <u> tag underlines text:

<p>This is <u>underlined</u> text.</p>

Output: This is underlined text.

4. Strikethrough Text

The <s> tag strikes through text:

<p>This is <s>struck-through</s> text.</p>

Output: This is struck-through text.

---

Combining Tags for Advanced Formatting

You can combine tags to achieve more complex formatting:

<p>This is <b><i>bold and italic</i></b> text.</p>

Output: This is bold and italic text.

---

Text Alignment and Styling

1. Text Alignment

The align attribute aligns text within an element (though CSS is preferred for modern design):

<p align="center">This text is centered.</p>

Output: This text is centered.

2. Changing Text Color

The style attribute allows inline CSS for color changes:

<p style="color: red;">This text is red.</p>

Output: This text is red.

3. Changing Font Size

You can also use style to adjust font size:

<p style="font-size: 20px;">This text is larger.</p>

Output: This text is larger.

---

Practical Examples

Example 1: Highlighting Important Content

<p>Warning: <b><u>Do not proceed</u></b> without reading the instructions.</p>

Output: Warning: Do not proceed without reading the instructions.

Example 2: Styling a Heading

<h1 style="color: blue; text-align: center;">Welcome to My Website</h1>

Output: A blue, centered heading.

---

Challenge: Try It Yourself

1. Create a paragraph with bold, italic, and underlined text.
2. Add a heading that is red and aligned to the right.
3. Write a sentence with a specific font size and color.

---

Recap

In this blog, we covered:

• Basic text formatting tags: <b>, <i>, <u>, <s>.
• Styling text with style attributes.
• Combining tags for advanced formatting.

In the next blog, we’ll explore how to work with images and multimedia to make your webpages more interactive and engaging.

Stay tuned and happy coding!

previous tutorial blog.

next tutorial blog.