HTML Text Format

Intro: What is HTML Text Format?

Today we’re going to learn about HTML Text Format! “What is HTML Text Format?”, “Why do I need it?” might be the questions that appears in your mind! It’s okay! Let’s take a look at some examples first!

Definition: HTML Text Format Table

Wow! That ‘s a lot different kind of text format for the paragraph text. How do we do that? Let’s use a table to learn about how each of them work!

1. HTML Bold and Strong Element

For bold text, we use <b> element with no semantic importance. This will make the text font-weight larger.

<p>

<b>I'm a bold text</b>

</p>

Now, go ahead to try it! Customize your own!

For strong text, we use <strong> element with extra semantic importance. This will make the text font-weight larger.

<p>

This word is <strong>strong</strong>

</p>

Now, go ahead to try it! Customize your own!

2. HTML Italic and Emphasize Element

For italic text, we use <i> element with no semantic importance. This will make the text tilt.

<p>

Sometimes I just want the song name to be italic: <i>South Beach</i>

</p>

Now, go ahead to try it! Customize your own!

For emphasize text, we use <em> element with extra semantic importance. This will make the text tilt.

<p>

Sometimes I <em>emphasize</em> things

</p>

Now, go ahead to try it! Customize your own!

3. What’s the difference between <b> and <strong>, and <i> and <em>?

For <b> and <i>, it only changes the text form. But, using <strong> and <em>, it actually means that the text is “important.”

4. HTML Superscript and Subscript Element

For superscript text, we use <sup> element. This will make the text move upward.

<p>

There might be some <sup>up</sup>

</p>

Now, go ahead to try it! Customize your own!

For subscript text, we use <sub> element. This will make the text move downward.

<p>

There might be some <sub>down</sub>

</p>

Now, go ahead to try it! Customize your own!

5. HTML Insert and Delete Element

For inserted text, we use <ins> element. This will make the text with an underline.

<p>

Let's <ins>insert</ins> some text

</p>

Now, go ahead to try it! Customize your own!

For deleted text, we use <del> element. This will make the text with a middle delete line.

<p>

This text is <del>deleted</del>

</p>

Now, go ahead to try it! Customize your own!

6. HTML Mark and Small Element

For marked text, we use <mark> element. This will make the text highlighted with default color yellow.

<p>

The text is <mark>marked</mark>

</p>

Now, go ahead to try it! Customize your own!

For smaller text, we use <small> element. This will make the text smaller.

<p>

Let's make this <small>smaller</small>

</p>

Now, go ahead to try it! Customize your own!

Summery

In sum, we use text format for customizing HTML paragraph. First, we learn about bold and strong element. Second, we learn about italic and emphasize. Then, we discuss about the difference between them. More, we talk about superscript and subscript element to make text up and down. Last but not the least, we show you how inserted and deleted text is styled. Finally, we highlighted text and make it smaller! Now, fork my code and try it. Feel free to take at look at my youtube video and subscribe for more HTML Coding Tips!