HTML Text Fett Schreiben: Beginner's Guide to Bold, Italic, Underline

While not explicitly in the title, strikethrough text is another common formatting style that often comes up with bold, italic, and underline. HTML provides two tags for this:

• <del> (Deleted Text): This tag indicates that a portion of the text has been deleted from a document. It carries semantic meaning, often used in legal documents or revision tracking.
• <s> (Strikethrough): This tag is for content that is no longer accurate or relevant, but should not be removed from the document. It's typically for indicating that something is no longer correct but was previously.

Example:

<p>The old price was <del>$29.99</del>, now only <strong>$19.99</strong>!</p>
<p>The original plan was to meet on <s>Tuesday</s>, but now it's Wednesday.</p>

Combining HTML Text Formatting Elements

You're not limited to just one style per word or phrase. You can easily combine these tags by nesting them. The order of nesting usually doesn't matter, but it's good practice to ensure all tags are properly closed.

Syntax:

<p>This is <strong><em>very important</em></strong> information.</p>
<p><u><b>Underlined and Bold</b></u> text.</p>

Output:

This is very important information.

Underlined and Bold text.

The Modern Approach: Formatting with CSS

While HTML provides the structural and semantic foundation for your text, the ultimate control over its visual presentation now resides primarily with CSS (Cascading Style Sheets). For most purely presentational formatting – that is, if you want text bold *only* for visual reasons and not because it's semantically important – CSS is the preferred tool.

Using CSS for styling offers several advantages:

• Separation of Concerns: Keeps your HTML clean and focused on content and structure, while CSS handles design.
• Consistency: Apply styles across an entire website or multiple pages from a single CSS file.
• Maintainability: Change the look of your entire site by editing a few lines of CSS, rather than altering individual HTML tags.
• Flexibility: CSS offers a much wider range of styling options than HTML tags alone (font-size, color, line-height, etc.).

Here’s how you would achieve bold, italic, and underline using CSS:

<style>
  .my-bold-text {
    font-weight: bold;
  }
  .my-italic-text {
    font-style: italic;
  }
  .my-underline-text {
    text-decoration: underline;
  }
</style>

<p>This is some <span class="my-bold-text">CSS bold text</span>.</p>
<p>This is some <span class="my-italic-text">CSS italic text</span>.</p>
<p>This is some <span class="my-underline-text">CSS underlined text</span>.</p>

By using CSS, you can apply these styles to any HTML element, giving you granular control. For a comprehensive guide on modern text formatting techniques using both HTML and CSS, check out: HTML Text Formatting: Mastering Bold, Italic, Underline with HTML & CSS.

Best Practices for HTML Text Formatting

To ensure your web pages are robust, accessible, and performant, consider these best practices:

1. Prioritize Semantics: Always ask yourself: "Does this text need to be visually bold, or is it also semantically important?" If important, use ``. If for emphasis, use ``. If purely presentational, consider CSS.
2. Use CSS for Visuals: For styling that doesn't convey extra meaning (like a specific visual theme for titles or paragraphs), rely on CSS. This keeps your HTML lean and semantic.
3. Accessibility Matters: Semantic HTML helps screen readers interpret your content correctly. Over-reliance on purely visual tags like `` or `` without semantic backing can sometimes hinder accessibility. For instance, a screen reader might not differentiate between `` and regular text, but it might emphasize text wrapped in ``.
4. Avoid Over-Underlining: Reserve underlines for actual hyperlinks to prevent confusion for users. If you need to draw attention, consider bolding, changing font color, or using background highlights via CSS.
5. Keep it Readable: While formatting is useful, excessive bolding, italicizing, or underlining can make text harder to read and appear unprofessional. Use these styles sparingly and purposefully.
6. Consistency is Key: Whatever formatting choices you make, ensure they are applied consistently across your website. This improves user experience and reinforces your site's visual identity.