Image Tag in HTML | Bold, Italic, Underline Tags

When building a webpage, it’s essential to know how to add images and format text properly. In this guide, we will explore four fundamental HTML tags: <img>, <b>, <i>, and <u>. These tags help enhance the visual appeal and readability of your web pages.

1. The <img> Tag (Adding Images in HTML)

The <img> tag is used to insert images into a webpage. It does not have a closing tag and requires the src attribute to specify the image URL.

Syntax:

<img src="image.jpg" alt="Description of the image">

Attributes of <img>:

  • src (Source): Specifies the path of the image.
  • alt (Alternative text): Describes the image (useful for accessibility and when the image fails to load).
  • width and height: Define the image size in pixels.

Example:

<img src="https://www.example.com/sample.jpg" alt="A sample image" width="300" height="200">

This will display an image with a width of 300 pixels and a height of 200 pixels.

2. The <b> Tag (Bold Text)

The <b> tag makes text bold. It is mainly used for emphasizing words visually, but it does not carry semantic meaning (unlike <strong> which indicates importance).

Syntax:

<b>This text is bold</b>

Example:

<p>This is a <b>bold</b> word in a paragraph.</p>

Output: This is a bold word in a paragraph.

3. The <i> Tag (Italic Text)

The <i> tag makes text italic. It is often used for stylistic purposes, such as denoting thoughts, book titles, or foreign words.

Syntax:

<i>This text is italic</i>

Example:

<p>She said, <i>"Hello!"</i></p>

Output: She said, “Hello!”


4. The <u> Tag (Underlined Text)

The <u> tag underlines text. It is often used for stylistic effects but is less commonly used today because underlined text is usually associated with links.

Syntax:

<u>This text is underlined</u>

Example:

<p>This is an <u>underlined</u> word in a sentence.</p>

Output: This is an underlined word in a sentence.

Combining the Tags

You can also combine these tags to format text in different ways.

Example:

<p><b><i><u>This text is bold, italic, and underlined</u></i></b></p>

Output: This text is bold, italic, and underlined

Practice Task

Create an HTML file that displays an image along with a sentence containing bold, italic, and underlined words.

Task:

  1. Insert an image with an alt description.
  2. Add a sentence with a combination of <b>, <i>, and <u> tags.

Example Output:

“This is a bold, italic, and underlined text next to an image.”


Solution Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Formatting Practice</title>
</head>
<body>
    <img src="Your Image Link" alt="Sample Image" width="300" height="200">
    <p>This is a <b>bold</b>, <i>italic</i>, and <u>underlined</u> text next to an image.</p>
</body>
</html>

Conclusion

  • The <img> tag allows you to add images to your webpage.
  • The <b> tag makes text bold.
  • The <i> tag makes text italic.
  • The <u> tag underlines text.

These HTML elements help improve content presentation. Keep practicing and experimenting with these tags in your HTML projects!

Follow me on Instagram for daily web development tips! INSTAGRAM

View my Previous Post – Top 15 Patterns

Leave a Comment