Text Formatting in HTML

taxt-formatting-in-HTML

What is HTML Text Formatting?

Formatting means text formatting (bold, italic, underline etc) like MS word works. If you want to format text like bold italic, you have to use codes for that. And, that is called the text formatting in HTML.

I’ll describe about all tags you needed to format text in HTML. Let’s learn.

Text Bold:

We use  <b>….</b> or <strong> ….. </strong>  to bold texts. But there are some difference between <b> and <strong> tags. <b>  is a physical tag used to bold a text. But <strong> is a logical tag. It says the browser that the text between strong tags is “strong” important.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<article>
<header>
<h1>Heading Tag</h1>
<p>
Lorem Ipsum is simply <b>this text is between b tag</b> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, <strong> This text is between strong tag </strong> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
</header>

</article>
</body>
</html>

Title

Heading Tag

Lorem Ipsum is simply this text is between b tag Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, This text is between strong tag it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Text Italic:

We also use two different tags to italic text in HTML. One is <i> ….. </i> tag and other is <em> ….. </em> tag. The show same results but have some deference. i tag is used to italic text physically. But, we use em tag to italic text logically. The em tag says browser the text between em tags has a semantic importance.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<article>
<header>
<h1>Heading Tag</h1>
<p>
Lorem Ipsum is simply <i>this text is between i tag</i> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, <em> This text is between emphasize tag </em> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
</header>

</article>
</body>
</html>

Title

Heading Tag

Lorem Ipsum is simply this text is between i tag Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, This text is between emphasize tag it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Delete Line:

Using <del> ……. </del> or <strike> ……… </strike> tag to show our deleted text.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<article>
<header>
<h1>Between Heading Tag</h1>
<p>
Lorem Ipsum is simply <strike>this text is between strike tag</strike> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, <del> This text is between delete tag </del> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
</header>

</article>
</body>
</html>

Title

Between Heading Tag

Lorem Ipsum is simply this text is between strike tag Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, This text is between delete tag it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Underline Text:

We use <u> …… </u> or <ins> ……… </ins> tag to make our text underlined. U means underline and ins means inserted.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<article>
<header>
<h1>Between Heading Tag</h1>
<p>
Lorem Ipsum is simply <u>this text is between u tag</u> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, <ins> This text is between ins tag </ins> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
</header>

</article>
</body>
</html>

 

Between Heading Tag

Lorem Ipsum is simply this text is between u tag Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, This text is between ins tag it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

Mark Text:

To mark the text, you have to use <mark> …… </mark> tag. You can use CSS code to mark your text.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<article>
<header>
<h1>Between Heading Tag</h1>
<p>
Lorem Ipsum is simply <mark>this text is between mark tag.</mark> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
</header>

</article>
</body>
</html>

Title

Between Heading Tag

Lorem Ipsum is simply this text is between mark tag. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Superscript Text:

You have to use <sup> …… </sup> tag to superscript text. we generally use superscript in math.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<article>
<header>
<h1>Between Heading Tag</h1>
<p>
Lorem Ipsum is simply <sup>this text is between sup tag.</sup> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including.

</p>
</header>

</article>
</body>
</html>

Title

Between Heading Tag

Lorem Ipsum is simply this text is between sup tag. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including.

Subscript Text:

You have to use <sub> …… </sub> tag to subscript text. we generally use superscript in syntactic text.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<article>
<header>
<h1>Between Heading Tag</h1>
<p>
Lorem Ipsum is simply <sub>this text is between sub tag.</sub> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including.

</p>
</header>

</article>
</body>
</html>

Title

Between Heading Tag

Lorem Ipsum is simply this text is between sub tag. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including.

Facebook
Twitter
LinkedIn
Tumblr
Reddit