Text Formatting Tags

Make text bold, italic, underlined and highlighted using HTML formatting tags that change how words appear on screen.

Think about Microsoft Word or Google Docs. You select some text and click a button to make it bold. HTML works the same way, but instead of clicking buttons, you wrap text with special tags that tell the browser how to display it. Alex wants to add some formatted text to their portfolio — making important words stand out and adding emphasis where needed. Before we jump into code, let's understand how these tags work.

How Text Formatting Tags Work

A text formatting tag is like a highlighter or pen that changes how text looks. You wrap the text you want to change between an opening tag and a closing tag. The browser sees these tags and applies the formatting. The opening tag starts the formatting. The content goes in the middle. The closing tag ends the formatting. Everything between the tags gets the special styling.

Bold Text Tags

HTML gives you two ways to make text bold. They look the same but mean different things to screen readers and search engines.

The Strong Tag

The <strong> tag makes text bold AND tells screen readers that this text is important. Use it for content that really matters — like warnings, key points, or critical information.

The Bold Tag

The <b> tag makes text bold for visual style only. It doesn't tell screen readers that the text is important. Use it when you want bold text for design reasons — like styling a company name or making text stand out visually.

Italic Text Tags

Just like bold text, HTML gives you two ways to make text italic. One adds meaning, the other adds style.

The Emphasis Tag

The <em> tag makes text italic AND adds emphasis. Screen readers will change their tone when reading emphasized text. Use it when you want to stress or highlight something important.

The Italic Tag

The <i> tag makes text italic for style purposes. Use it for things like book titles, foreign words, or technical terms that are traditionally displayed in italics.

Underline and Strike-Through

HTML includes tags for underlining text and crossing it out. These tags are less common but useful in specific situations.

Underlined Text

The <u> tag underlines text. Be careful with this one — users expect underlined text to be clickable links. Only use it when you really need underlined text that isn't a link.

Strike-Through Text

The <s> tag puts a line through text, showing that it's been removed or is no longer accurate. Think of it like crossing something off a to-do list.

Highlight and Small Text

HTML includes a few more formatting tags for specific situations — highlighting important text and displaying fine print.

Highlighted Text

The <mark> tag highlights text with a yellow background, like using a highlighter pen on paper. Perfect for search results, important notes, or drawing attention to key information.

Small Text

The <small> tag makes text smaller than normal. Use it for disclaimers, copyright notices, fine print, or side comments that are less important than the main content.

Combining Format Tags

You can combine multiple formatting tags to create text that's both bold AND italic, or highlighted AND emphasized. Just nest the tags inside each other properly. When combining tags, make sure to close them in the reverse order you opened them. Think of it like nested boxes — the inner box (second tag) must close before the outer box (first tag). These formatting tags give you everything you need to make text stand out on your web pages. Alex can now emphasize important skills, highlight new projects, and add disclaimers in small text. Remember to choose tags based on meaning, not just appearance — your website will be more accessible and search-engine friendly.

Quiz