Ep. 007 – Line Break, Strong and Italic Text, DIV and SPAN tags, Style Attribute – Learn HTML and HTML

In the previous post, we have learned how to add tables with columns and rows to an HTML page. In this post, we will learn how to add line breaks, strong and italicized texts, div and span tags, and style attributes.

Line Break:

A line break is added to move the elements to the next line. The text after the line break is moved to a new line. We use the <br> tag to insert a line break. See the following example:

Code:

<p>Hello World! <br> This text will be displayed on new line.</p>

Output:

Hello World!
This text will be displayed on new line.

Strong and Italic Text:

We use the <strong> tag to make the text bold. To italicize the text, we use the <i> tag. See the following code example:

Code:

<p><strong>Hello World!</strong> Starting from here, <i>the text will be italicised</i>.</p>

Output:

Hello World! Starting from here, the text will be italicised.

Div and Span Tags:

Both the div and span tags are used as container tags. We group other HTML tags inside the container tags.

The div tag/element is block-level element which means that it will cover the 100% available width and the next elements/tags will start from a new line.

Whereas, the span tag/element is an inline tag which means that it will only cover the width as needed by the inner contents and the next text/elements will start from where the span element is ended.

See the following code example:

Code:

<div>
This div tag covers the 100% width and the next element starts from a new line. Whereas, the span element only covers the width as needed by the contents of the span element.
</div>
<br>
<span>Text 1</span>
<span>Text 2</span>

Output:

This div tag covers the 100% width and the next element starts from a new line. Whereas, the span element only covers the width as needed by the contents of the span element.

Text 1 Text 2

Style Attribute:

The style attribute can be added in any HTML element/tag to add different styles to the HTML element/tag e.g. text color, background color font size etc. See the following example:

Code:

<div style="color: blue;">
This text is written in div tag. If we apply a style to this div tag, it will be applied to all text inside this div tag. For exmaple, we have added a style to change the text color to blue.
</div>
<br>
<div>
Now what if we want to apply text color to specific text inside this div tag/element? In that case we can wrap <span style="color: red;">that text</span> inside a span tag/element and apply the text color to it.
</div>

Output:

This text is written in div tag. If we apply a style to this div tag, it will be applied to all text inside this div tag. For exmaple, we have added a style to change the text color to blue.

Now what if we want to apply text color to specific text inside this div tag/element? In that case we can wrap that text inside a span tag/element and apply the text color to it.

Video Tutorial (Urdu):

Line Break, Strong and Italic text, DIV and SPAN tags, and Style Attribute

Got Stuck? Any Questions?

In case of any questions, please feel free to ask in the comments section below. Thanks