Basic and Advanced Text Formatting

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. Understanding how to format text in HTML is crucial for web developers, content creators, and anyone interested in designing engaging and accessible websites.

Basic Text Formatting in HTML

1. Basic Tags for Text Formatting

The foundation of HTML text formatting lies in using the correct tags. Some of the primary tags are:

• Paragraphs <p>: Defines a block of text as a paragraph, providing a visible separation from other blocks.
• Headings <h1> to <h6>: Used to define headings. <h1> is the highest level, often used for main titles, while <h6> is the lowest.
• Bold <strong> and Italic <em>: <strong> is used to make text bold, which indicates importance, while <em> italicizes text, showing emphasis.
• Line Break <br>: Inserts a single line break, useful for breaking lines of text without starting a new paragraph.
• Horizontal Rule <hr>: Places a thematic break in the story, often represented as a horizontal line.

Example:

<p>This is a <strong>bold</strong> word and this is an <em>italic</em> word.</p>

<h1>Main Title</h1>

<h2>Subheading</h2>

<p>First line.<br>Second line.</p>

<hr>

2. Font Styling

To change font types, sizes, and colors, HTML itself must be combined with CSS (Cascading Style Sheets).

• Font Family: font-family property in CSS lets you specify the typeface.
• Font Size: font-size property controls the size of the text.
• Font Color: color property changes the color of the text.

Example:

<style>

  p {

    font-family: Arial, sans-serif;

    font-size: 16px;

    color: blue;

  }

</style>

 

<p>This paragraph is styled with CSS.</p>

Advanced Text Formatting in HTML

1. Using CSS for Advanced Styling

Beyond the basics, CSS offers extensive properties to style and format text in more sophisticated ways:

• Text Shadow: Adds shadow to text, enhancing the visual depth.
• Text Alignment: Controls the alignment of text using text-align property with values like left, right, center, and justify.
• Line Height and Letter Spacing: line-height adjusts the space between lines of text, while letter-spacing adjusts the space between characters.

Example:

<style>

  .fancy-text {

    font-family: ‘Courier New’, monospace;

    color: darkred;

    text-shadow: 1px 1px 2px black;

    text-align: center;

    line-height: 1.5;

    letter-spacing: 2px;

  }

</style>

 

<p class=”fancy-text”>This is fancy styled text with CSS.</p>

2. Web Fonts

Web fonts allow web designers to use fonts that are not installed on a user’s computer by including them directly into web projects:

• Google Fonts: Easy to use, free, and one of the most popular sources of web fonts.
• @font-face: A rule in CSS that allows you to define a particular font to be downloaded when a user visits your website.

Example using Google Fonts:

<link href=”https://fonts.googleapis.com/css2 family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>

 

<style>

  body {

    font-family: ‘Roboto’, sans-serif;

  }

</style>

 

<p>This paragraph uses the Roboto font fetched from Google Fonts.</p>

3. Responsive Text

Ensuring text is readable and looks good on all devices is important. Responsive web design techniques allow text to adjust based on the screen size and resolution:

• Viewport Units: Using vw (viewport width) and vh (viewport height) can help make font sizes responsive.
• Media Queries: Let you apply CSS styles depending on the device characteristics, such as its width.

Example:

<style>

  p {

    font-size: 2vw;

  }

 

  @media (max-width: 600px) {

    p {

      font-size: 4vw;

    }

  }

</style>

 

<p>This text adjusts size based on the viewport width.</p>