gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to abbreviations lesson (#62693)

Browse Source
This commit is contained in:
Giftea ☕
2025-10-10 20:28:47 +01:00
committed by GitHub
parent ebf8c688f7
commit feffa6ef35
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-working-with-text-and-time-semantic-elements/672995d673bd3237200b9e7c.md
+9 -1
View File
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: how-do-you-display-abbreviations-and-acronyms-in-html
---
# --description--
# --interactive--
An abbreviation is a shortened form of a word or phrase. For example, "Dr" followed by a period, is an abbreviation for the word "doctor".
@@ -27,10 +27,14 @@ If you need to display abbreviations such as acronyms or initialisms in HTML, th
Here's an example where you can see a paragraph with the sentence `HTML is the foundation of the web`:
:::interactive_editor
```html
<p><abbr>HTML</abbr> is the foundation of the web.</p>
```
:::
The initialism HTML is within an abbreviation element. In the browser, you'll see that nothing has really changed. It still looks like normal text. The abbreviation element is providing helpful context behind the scenes, but users will still see the initialism as normal text.
If you want to help users understand what this initialism means, you can show its full form with the `title` attribute.
@@ -39,10 +43,14 @@ The `title` attribute is optional, but if you decide to include it, it must be a
Let's take the same example as before, but add the `title` attribute. It will be `HyperText Markup Language`, the expanded form of the initialism:
:::interactive_editor
```html
<p><abbr title="HyperText Markup Language">HTML</abbr> is the foundation of the web.</p>
```
:::
Usually, the style of the abbreviation element will change when you add this attribute. The specific style will depend on the browser. Some browsers may display a dotted underline, while others may convert the contents to small caps, or even assign certain default styles, such as a dotted underline. When the user hovers over the abbreviation with the mouse, the full form is displayed as a tooltip.
While you don't necessarily need to use the abbreviation element for every abbreviation on your web page, it's recommended for those that might be unclear and those that might need additional context.