Text formatting tags | HTML Text Elements Tutorial

HTML Text Formatting Tags

Here's a breakdown of common HTML text formatting tags and their effects:

 - Bold Text: Displays text in bold. Generally used for highlighting keywords, not semantic importance.
```
This text is bold.
```
 - Important Text: Displays text in bold, but semantically indicates importance. Screen readers will often emphasize this differently than .
```
This text is important!
```
 - Italic Text: Displays text in italics. Similar to , often used for stylistic emphasis.
```
This text is italic.
```
 - Emphasized Text: Displays text in italics, but semantically indicates emphasis. Screen readers will emphasize this.
```
This text is emphasized.
```
 - Marked/Highlighted Text: Highlights text, typically with a yellow background.
```
This text is marked.
```
 - Small Text: Displays text smaller than the surrounding text.
```
This is smaller text.
```
<del> - Deleted Text: Displays text with a strikethrough, indicating it has been deleted.
```
<del>This text has been deleted.</del>
```
<ins> - Inserted Text: Displays text with an underline, indicating it has been inserted.
```
<ins>This text has been inserted.</ins>
```
 - Subscript Text: Displays text as a subscript (smaller and lowered). Useful for chemical formulas, etc.
```
H2O
```
 - Superscript Text: Displays text as a superscript (smaller and raised). Useful for footnotes, exponents, etc.
```
x2 + y2 = z2
```
  - Line Break: Inserts a single line break. It's an empty tag (no closing tag).
```
This is the first line. This is the second line.
```
<pre> - Preformatted Text: Displays text exactly as it is written in the HTML source, including spaces and line breaks. Often used for displaying code.
```
<pre>
This is preformatted text.
It preserves spaces and line breaks.
</pre>
```

Important Considerations:

Semantic HTML: Prefer  and  over  and  when you want to convey meaning (importance or emphasis) rather than just stylistic changes.
CSS for Styling: While these tags can be used for styling, it's generally best practice to use CSS to control the appearance of your text. This separates content from presentation, making your code more maintainable.
Accessibility: Consider how screen readers will interpret these tags. Semantic tags (, ) provide more information to assistive technologies.