Text Formatting

Formatting text is essential for making your web pages readable and visually appealing. HTML provides a variety of tags to control how text appears on the screen, from simple things like bolding and italicizing to structuring your content with headings. This guide will introduce you to the most fundamental text formatting techniques.

What is Text Formatting in HTML?

Text formatting in HTML involves using specific tags to change the appearance and structure of your text. These tags allow you to emphasize important words, create headings and subheadings, and organize your content logically. By using these tags correctly, you can improve the readability and accessibility of your website.

Basic Formatting Tags

Here’s a breakdown of some fundamental HTML text formatting tags:

<h1> to <h6>: Headings. <h1> is the largest, <h6> is the smallest. Use these to structure your content, with <h1> for the main title, <h2> for sections, etc.
<p>: Paragraphs. This is used to separate blocks of text.
<b> or <strong>: Bold text. <b> is just for bolding, <strong> adds semantic meaning (emphasizing the text’s importance). It’s generally recommended to use <strong> for accessibility.
<i> or <em>: Italic text. <i> is just for italics, <em> adds semantic meaning (emphasizing the text). Use <em> for better accessibility.
<br>: Line break. Inserts a single line break.
<mark>: Highlights text.

Practical Example

Let’s see these tags in action. Here’s a simple HTML example:


<!DOCTYPE html>
<html>
<head>
  <title>Text Formatting Example</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.  We can use <strong>bold text</strong> to emphasize a word.</p>
  <p>And here's some <em>italic text</em> for emphasis.</p>
  <h2>Another Section</h2>
  <p>This section uses a <mark>highlighted</mark> word.  <br> This is a line break.</p>
</body>
</html>

Explanation:

The <h1> tag creates a large heading.
The <p> tag creates a paragraph.
<strong> makes text bold.
<em> makes text italic.
<h2> creates a smaller heading.
<mark> highlights text.
<br> creates a line break.

Practical Usage: Styling with CSS

While the basic HTML tags provide formatting, modern web development uses CSS (Cascading Style Sheets) to control the styling of text (and everything else!). Here’s an example:


<!DOCTYPE html>
<html>
<head>
  <title>CSS Styling Example</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>My Styled Heading</h1>
  <p>This paragraph is now styled with CSS. The text is blue and centered, and the font size has been increased.  Readability is key!</p>
</body>
</html>

Explanation:

The <style> tag within the <head> section defines CSS rules.
h1 { ... } styles all <h1> elements.
color: blue; sets the text color to blue.
text-align: center; centers the text horizontally.
p { ... } styles all <p> elements.
font-size: 16px; sets the font size.
line-height: 1.5; increases the space between lines.

Key Takeaways

Use HTML tags like <h1> to <h6>, <p>, <b> (or <strong>), and <i> (or <em>) to structure and format your text.
Headings (<h1> to <h6>) are crucial for organizing content and improving SEO.
Use <strong> and <em> for semantic emphasis, which is better for accessibility than just using <b> and <i>.
CSS is used to control the visual appearance of your text (color, size, font, etc.). Always separate content (HTML) from presentation (CSS).
Prioritize readability by using appropriate font sizes, line spacing, and paragraph breaks.