HTML Text Formatting-How HTML

HTML Text Formatting

HTML (Hypertext Markup Language) is the standard language for creating web pages. In HTML, text formatting plays a crucial role in conveying the message effectively to the users. There are various tags in HTML that can be used to format text in different ways. In this article, we will explore some of the commonly used text formatting techniques in HTML.

1. Bold Text

To make text bold in HTML, you can use the  or  tags. Both tags achieve the same visual effect, but  is semantically stronger than .

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>
</body>
</html>

Output:

HTML Text Formatting

2. Italic Text

To make text italic in HTML, you can use the  or  tags. Similarly,  is semantically stronger than .

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
</body>
</html>

Output:

HTML Text Formatting

3. Underline Text

In HTML, you can underline text using the  tag. However, it is considered a bad practice as underlining is generally associated with hyperlinks.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is <u>underlined</u> text.</p>
</body>
</html>

Output:

HTML Text Formatting

4. Subscript and Superscript Text

To create subscript and superscript text in HTML, you can use the  and  tags, respectively.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is subscript <sub>text</sub>.</p>
<p>This is superscript <sup>text</sup>.</p>
</body>
</html>

Output:

HTML Text Formatting

5. Strikethrough Text

To strike through text in HTML, you can use the <s> tag. This tag is often used to indicate content that is no longer valid or relevant.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is <s>strikethrough</s> text.</p>
</body>
</html>

Output:

HTML Text Formatting

6. Text Highlighting

HTML does not have a specific tag for text highlighting. To achieve text highlighting, you can use CSS styles or the  tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is <mark>highlighted</mark> text.</p>
</body>
</html>

Output:

HTML Text Formatting

7. Text Alignment

You can align text in HTML using the text-align property in CSS. The commonly used values for text alignment are left, center, right, and justify.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-align: center;">Center aligned text.</p>
<p style="text-align: right;">Right aligned text.</p>
</body>
</html>

Output:

HTML Text Formatting

8. Line Breaks

To create line breaks in HTML, you can use the   tag. This tag is useful for breaking lines within a paragraph.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is the first line.<br>This is the second line.</p>
</body>
</html>

Output:

HTML Text Formatting

9. Horizontal Rule

To add a horizontal rule (line) in HTML, you can use the <hr> tag. This tag is used to separate content visually.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is some content.</p>
<hr>
<p>This is more content.</p>
</body>
</html>

Output:

HTML Text Formatting

10. Blockquotes

Blockquotes are used to highlight quotes within a document. In HTML, blockquotes can be created using the <blockquote> tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<blockquote>
  <p>This is a blockquote.</p>
</blockquote>
</body>
</html>

Output:

HTML Text Formatting

11. Lists

There are two types of lists in HTML: ordered lists (<ol>) and unordered lists (<ul>). You can also create nested lists using the <li> tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
</ul>

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
</body>
</html>

Output:

HTML Text Formatting

12. Font Size

You can set the font size of text in HTML using the font-size property in CSS. The size can be specified in pixels, em, rem, etc.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 20px;">This text has a font size of 20 pixels.</p>
</body>
</html>

Output:

HTML Text Formatting

13. Font Color

To change the font color in HTML, you can use the color property in CSS.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: red;">This text is red.</p>
<p style="color: blue;">This text is blue.</p>
</body>
</html>

Output:

HTML Text Formatting

14. Font Family

You can specify the font family of text in HTML using the font-family property in CSS. Common font families include Arial, Times New Roman, and Verdana.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Arial;">This text is in Arial font.</p>
</body>
</html>

Output:

HTML Text Formatting

15. Text Transformation

You can transform text in HTML using the text-transform property in CSS. Common transformations include uppercase, lowercase, and capitalize.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-transform: uppercase;">uppercase text.</p>
<p style="text-transform: lowercase;">LOWERCASE TEXT.</p>
<p style="text-transform: capitalize;">capitalized text.</p>
</body>
</html>

Output:

HTML Text Formatting

16. Text Indentation

You can indent text in HTML using the text-indent property in CSS. The value can be specified in pixels or other units.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-indent: 30px;">This text has an indent of 30 pixels.</p>
</body>
</html>

Output:

HTML Text Formatting

17. Text Decoration

Text decoration in HTML includes properties like text-decoration, text-decoration-line, text-decoration-style, and text-decoration-color. These properties can be used to underline, overline, or strike through text.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-decoration: underline;">Underlined text.</p>
<p style="text-decoration: line-through;">Strikethrough text.</p>
</body>
</html>

Output:

HTML Text Formatting

18. Text Shadow

You can add a shadow effect to text in HTML using the text-shadow property in CSS. The property takes values for horizontal displacement, vertical displacement, blur radius, and color.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-shadow: 2px 2px 5px #888;">Text with shadow effect.</p>
</body>
</html>

Output:

HTML Text Formatting

19. Letter Spacing

To increase or decrease the spacing between letters in HTML, you can use the letter-spacing property in CSS.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="letter-spacing: 2px;">Text with increased letter spacing.</p>
</body>
</html>

Output:

HTML Text Formatting

20. Word Spacing

Similarly, you can adjust the spacing between words in HTML using the word-spacing property in CSS.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="word-spacing: 10px;">Text with increased word spacing.</p>
</body>
</html>

Output:

HTML Text Formatting

These are just a few examples of text formatting techniques that can be achieved using HTML and CSS. By mastering these techniques, you can create visually appealing and well-organized content on your web pages.

HTML Text Formatting