CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-16 21:27:57 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix(curriculum): update acronym example (#61700)

Browse Source 
Co-authored-by: Ilenia M <nethleen@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Supravisor 2025-09-23 06:37:04 +12:00 committed by GitHub
parent ccaa500fa9
commit 572a58f8cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
curriculum/challenges/english/blocks/lecture-working-with-text-and-time-semantic-elements/672995d673bd3237200b9e7c.md
View File

@ -1,19 +1,29 @@
---
id: 672995d673bd3237200b9e7c
title: How Do You Display Abbreviations and Acronyms in HTML?
title: How Do You Display Abbreviations in HTML?
challengeType: 19
dashedName: how-do-you-display-abbreviations-and-acronyms-in-html
---
# --description--
An abbreviation is a shortened form of a word. For example, "Dr" followed by a period, is an abbreviation for the word "doctor".
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".
An acronym is a word formed from the initial letters of a phrase, with each letter representing the first letter of a word in that phrase. HTML is an example of an acronym. It stands for HyperText Markup Language.
There are two common forms of abbreviations: acronyms and initialisms.
By taking the first letters of each word H, T, M, and L, you get the acronym HTML. They are both very helpful for writing more concise text, especially when they are well-known and easy to understand in a given context.
An acronym is a word formed from the initial letters of a phrase, with each letter representing the first letter of a word in that phrase.
If you need to display abbreviations and acronyms in HTML, the abbreviation element is exactly what you're looking for. You should always explain their full meaning when you use them for the first time. Then you can use the abbreviation element to highlight them and provide more details.
GUI is an example of an acronym. It stands for Graphical User Interface. By taking the first letters of each word G, U, and I, you get the acronym GUI.
An initialism is formed from the initial letters of a phrase, with each letter representing the first letter of a word in that phrase.
For example, HTML is an initialism; it stands for HyperText Markup Language and is pronounced by spelling out each letter H, T, M, L.
Both acronyms and initialisms are types of abbreviations. The distinction is acronyms are pronounced as words and initialisms are pronounced as individual letters.
They are very helpful for writing more concise text, especially when they are well-known and easy to understand in a given context.
If you need to display abbreviations such as acronyms or initialisms in HTML, the abbreviation element is exactly what you're looking for. You should always explain their full meaning when you use them for the first time. Then you can use the abbreviation element to highlight them and provide more details.
Here's an example where you can see a paragraph with the sentence `HTML is the foundation of the web`:
@ -21,21 +31,21 @@ Here's an example where you can see a paragraph with the sentence `HTML is the f
<p><abbr>HTML</abbr> is the foundation of the web.</p>
```
The acronym 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 acronym as normal text.
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 acronym means, you can show its full form with the `title` attribute.
If you want to help users understand what this initialism means, you can show its full form with the `title` attribute.
The `title` attribute is optional, but if you decide to include it, it must be a human readable description of the abbreviation, or acronym.
The `title` attribute is optional, but if you decide to include it, it must be a human readable description of the abbreviation, acronym, or initialism.
Let's take the same example as before, but add the `title` attribute. It will be `HyperText Markup Language`, the expanded form of the acronym:
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:
```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 acronym with the mouse, the full form is displayed as a tooltip.
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, or acronym on your web page, it's recommended for those that might be unclear and those that might need additional context.
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.
You should use your best judgment to find the right balance between information and presentation to avoid cluttering the text while being clear and concise.