HTML Text Formatting

When you're writing a document, you want to make sure the text is clear, easy to read, and visually appealing. In HTML, you can format text in various ways to make it stand out, emphasize certain points, or create a specific style. This tutorial will show you how to use HTML tags to format text in different ways.

Think of it as the way you can add different styles to the text in your HTML document, kind of like how you have various options in a word processor to make your text stand out or fit a certain style. You know how in a book or an article, certain words or sentences may be in bold, italics, or underlined to draw attention or emphasize something? That's what we're talking about here, but we'll see how it's done in HTML.

1. Bold Text

Let's start with making text bold. Imagine you're writing a letter and you want to make sure certain words really catch the reader's eye. In HTML, you'd use the  element for this. It not only makes the text bold but also indicates that it's of strong importance.

<strong>This text is bold and important!</strong>

2. Italic Text

Next, consider italic text. It's like gently tilting words to make them stand out or to indicate a thought or a whisper. In HTML, the  element is used for this. It italicizes the text and also emphasizes it, similar to how raising your eyebrows might emphasize a word in conversation.

<em>This text is italicized and emphasized!</em>

3. Underlined Text

To underline text in HTML, it's a bit different because there's no specific tag in modern HTML strictly for underlining for aesthetic purposes. However, underlines are commonly seen with links. Still, if you want to underline text for emphasis or another reason, you might use CSS. Since we're focusing on HTML right now, let's keep this in mind for future learning.

4. Superscript and Subscript

Imagine you're writing a scientific formula or mentioning a date in history, and you need to use numbers above (superscript) or below (subscript) the text line. HTML has  for superscript and  for subscript.

Superscript (think of the "th" in "5th"):

<p>This is the 5<sup>th</sup> time I visited this website.</p>

Subscript (useful for chemical formulas like H2O):

<p>Water is also known as H<sub>2</sub>O.</p>

5. Strikethrough Text

Sometimes, you want to show that something is no longer relevant but still needs to be visible, like marking items off a list. The <del> tag scratches a line through the text to indicate it's been deleted or is no longer accurate.

<del>This text is no longer relevant.</del>

6. Small Text

For text that's less important or needs to be de-emphasized, you might make it smaller. While HTML used to have  for making text smaller, keep in mind that the actual appearance will often be styled using CSS.

Summing Up

HTML text formatting is a straightforward way to add emphasis, importance, or specific styles to your web content. It helps guide the reader's eye and can convey the relevance or the mood of your text. Just like in a word processing program, where you can highlight text and choose bold or italics, HTML provides tags like , , and others to make your web content engaging and expressive.

Remember, the real power of formatting and styling shines through when HTML and CSS work together, but understanding these HTML basics is a fantastic start!

Pleaseto use the Copilot