Skip to content

Commit 4479303

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #5091 from codeharborhub/dev-6
complited html text content tutorial
2 parents 6b1787e + 4831ec8 commit 4479303

8 files changed

Lines changed: 2999 additions & 68 deletions

File tree

‎tutorials/html/03-text-content/abbreviations.mdx‎

Lines changed: 355 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,362 @@
11
---
2-
id: abbreviations
3-
title: "Defining Abbreviations and Acronyms with abbr"
2+
id: html-abbreviations
3+
title: "HTML Abbreviations"
44
sidebar_label: "Abbreviations"
55
sidebar_position: 10
66
slug: /html/text-content/abbreviations
7-
description: "Use the abbr element with title attributes to provide tooltips and clear expansion definitions for acronyms and abbreviations."
7+
description: "Learn how to use the HTML abbr tag to explain abbreviations, acronyms, and initialisms. Understand the title attribute, first-use best practices, accessibility on touch and keyboard, styling with CSS, and global language tips on CodeHarborHub."
88
keywords:
99
- HTML abbr tag
10-
- abbreviations in HTML
11-
- acronym expansion HTML
12-
- title attribute tooltip
10+
- HTML abbreviations
11+
- HTML acronym
12+
- HTML abbr title attribute
13+
- HTML initialism
14+
- style abbr with CSS
15+
- HTML abbr accessibility
16+
- HTML dfn tag
17+
- learn HTML abbr
1318
- CodeHarborHub HTML
14-
tags: [html, accessibility, semantics, typography]
15-
---
19+
tags: [html, web-development, beginner, abbreviations, abbr, text, frontend]
20+
---
21+
22+
Have you ever read a message full of short forms and felt lost? "The WHO released a new SDK for the API." If you work in tech every day, that may be clear. If you are new, it looks like alphabet soup.
23+
24+
Short forms save space, but they can leave readers behind. HTML gives you a gentle fix: the `<abbr>` tag. It lets you attach the full meaning to a short form, so everyone, from beginners to experts, can follow your page.
25+
26+
<AdsComponent />
27+
<br />
28+
29+
## What You Will Learn
30+
31+
- How to mark an abbreviation with `<abbr>`
32+
- How to give its full meaning with the `title` attribute
33+
- The difference between an abbreviation, an acronym, and an initialism
34+
- Why you should **not** rely on the tooltip alone
35+
- How to style abbreviations and handle different languages
36+
- Common mistakes, and how to avoid them
37+
38+
## The Basics
39+
40+
Wrap the short form in `<abbr>` and put the full meaning in the `title` attribute.
41+
42+
<Tabs>
43+
<TabItem value="code" label="HTML Code" default>
44+
45+
```html title="index.html"
46+
<p>
47+
I am learning <abbr title="HyperText Markup Language">HTML</abbr>
48+
and <abbr title="Cascading Style Sheets">CSS</abbr>.
49+
</p>
50+
```
51+
52+
</TabItem>
53+
<TabItem value="output" label="Browser Output">
54+
55+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
56+
<>
57+
<p>
58+
I am learning <abbr title="HyperText Markup Language">HTML</abbr>
59+
and <abbr title="Cascading Style Sheets">CSS</abbr>.
60+
</p>
61+
</>
62+
</BrowserWindow>
63+
64+
</TabItem>
65+
</Tabs>
66+
67+
Most browsers show a dotted underline under the abbreviation. When you hover your mouse over it, a small tooltip appears with the full text from the `title` attribute. Try it in the example above.
68+
69+
## Abbreviation, Acronym, or Initialism?
70+
71+
People often use these words as if they mean the same thing. They are close, but not identical.
72+
73+
| Type | How you say it | Example |
74+
| :-- | :-- | :-- |
75+
| **Abbreviation** | Shortened word, often said in full | Dr. (Doctor), kg (kilogram), etc. |
76+
| **Acronym** | Read as a **word** | NASA, UNESCO, RAM |
77+
| **Initialism** | Read **letter by letter** | HTML, CSS, API, FBI |
78+
79+
Here is the good news: in HTML, you use `<abbr>` for **all three**. The older `<acronym>` tag is obsolete and removed from the standard. If you see it in old tutorials, replace it with `<abbr>`.
80+
81+
## The Golden Rule: Say It in Full the First Time
82+
83+
The tooltip is helpful, but it has limits. Phone and tablet users cannot hover. Keyboard users often cannot reach it. Some screen readers ignore the `title` attribute. So a tooltip alone is not enough.
84+
85+
The most reliable approach is to **write the full form in your text the first time**, then use the short form afterward.
86+
87+
<Tabs>
88+
<TabItem value="code" label="HTML Code" default>
89+
90+
```html title="first-use.html"
91+
<p>
92+
The World Wide Web Consortium (<abbr title="World Wide Web Consortium">W3C</abbr>)
93+
creates web standards. Many developers follow the <abbr title="World Wide Web Consortium">W3C</abbr>
94+
guidelines when they build accessible sites.
95+
</p>
96+
```
97+
98+
</TabItem>
99+
<TabItem value="output" label="Browser Output">
100+
101+
<BrowserWindow url="http://127.0.0.1:5500/first-use.html">
102+
<>
103+
<p>
104+
The World Wide Web Consortium (<abbr title="World Wide Web Consortium">W3C</abbr>)
105+
creates web standards. Many developers follow the <abbr title="World Wide Web Consortium">W3C</abbr>
106+
guidelines when they build accessible sites.
107+
</p>
108+
</>
109+
</BrowserWindow>
110+
111+
</TabItem>
112+
</Tabs>
113+
114+
:::tip A friendly habit
115+
Think of it like introducing a new friend. The first time, you say the full name. After that, the nickname is enough.
116+
:::
117+
118+
## When to Use `<abbr>`
119+
120+
Use it when a short form could confuse your reader.
121+
122+
- **Technical terms:** API, SDK, URL, SQL
123+
- **Organizations:** UNESCO, NASA, WHO
124+
- **Units and titles:** kg, km, Dr., Prof.
125+
- **Slang and jargon** that newcomers may not know
126+
127+
You do not need it for very common short forms such as "TV" or "OK" when your audience clearly knows them. Use judgment, and ask: "Would a beginner understand this?"
128+
129+
## Plurals and Longer Phrases
130+
131+
When the abbreviation is plural, make the `title` plural too.
132+
133+
```html
134+
<p>
135+
Good <abbr title="Application Programming Interfaces">APIs</abbr> are easy to read
136+
and well documented.
137+
</p>
138+
```
139+
140+
The `title` can also explain a short form in a helpful way, not only by spelling it out. For example:
141+
142+
```html
143+
<p>
144+
Dial <abbr title="Emergency number, varies by country">112</abbr> in an emergency.
145+
</p>
146+
```
147+
148+
## Making Abbreviations Easier to Find
149+
150+
Browsers add a dotted underline by default. This small hint tells readers, "there is more information here." Some designers remove it, but that makes the abbreviation harder to discover.
151+
152+
<Tabs>
153+
<TabItem value="code" label="HTML + CSS" default>
154+
155+
```html title="styled-abbr.html"
156+
<style>
157+
abbr[title] {
158+
text-decoration: underline dotted #2563eb;
159+
text-underline-offset: 3px;
160+
cursor: help;
161+
}
162+
</style>
163+
164+
<p>Learn <abbr title="Application Programming Interface">API</abbr> basics today.</p>
165+
```
166+
167+
</TabItem>
168+
<TabItem value="output" label="Browser Output">
169+
170+
<BrowserWindow url="http://127.0.0.1:5500/styled-abbr.html">
171+
<>
172+
<p>Learn <abbr title="Application Programming Interface" style={{textDecoration: 'underline dotted #2563eb', textUnderlineOffset: '3px', cursor: 'help'}}>API</abbr> basics today.</p>
173+
</>
174+
</BrowserWindow>
175+
176+
</TabItem>
177+
</Tabs>
178+
179+
The selector `abbr[title]` targets only abbreviations that actually have a `title`. The `cursor: help` property shows a question-mark pointer when hovering, which signals that more information is available.
180+
181+
## Accessibility: Working for Everyone
182+
183+
A good page works for many kinds of readers.
184+
185+
| Reader | Challenge | What helps |
186+
| :-- | :-- | :-- |
187+
| Touch device user | Cannot hover | Write the full form in the text on first use |
188+
| Keyboard user | Tooltip may not appear | Provide the meaning in the text, or a glossary |
189+
| Screen reader user | `title` may not be announced | Use the full form in the sentence at least once |
190+
| Low-vision user | Small dotted underline is hard to see | Keep strong color contrast and readable size |
191+
192+
For pages with many abbreviations, consider adding a **glossary** section at the end that lists them all in one place. It helps every reader.
193+
194+
```html title="glossary.html"
195+
<h2>Glossary</h2>
196+
<dl>
197+
<dt>API</dt>
198+
<dd>Application Programming Interface</dd>
199+
<dt>URL</dt>
200+
<dd>Uniform Resource Locator</dd>
201+
</dl>
202+
```
203+
204+
## Abbreviations Around the World
205+
206+
The same organization can have different short forms in different languages. This matters for global readers.
207+
208+
<Tabs>
209+
<TabItem value="code" label="HTML Code" default>
210+
211+
```html title="global-abbr.html"
212+
<p lang="en">
213+
The <abbr title="United Nations">UN</abbr> meets in New York.
214+
</p>
215+
<p lang="fr">
216+
L'<abbr title="Organisation des Nations unies">ONU</abbr> se réunit à New York.
217+
</p>
218+
<p lang="es">
219+
La <abbr title="Organización de las Naciones Unidas">ONU</abbr> se reúne en Nueva York.
220+
</p>
221+
```
222+
223+
</TabItem>
224+
<TabItem value="output" label="Browser Output">
225+
226+
<BrowserWindow url="http://127.0.0.1:5500/global-abbr.html">
227+
<>
228+
<p lang="en">
229+
The <abbr title="United Nations">UN</abbr> meets in New York.
230+
</p>
231+
<p lang="fr">
232+
L'<abbr title="Organisation des Nations unies">ONU</abbr> se réunit à New York.
233+
</p>
234+
<p lang="es">
235+
La <abbr title="Organización de las Naciones Unidas">ONU</abbr> se reúne en Nueva York.
236+
</p>
237+
</>
238+
</BrowserWindow>
239+
240+
</TabItem>
241+
</Tabs>
242+
243+
A few tips for a worldwide audience:
244+
245+
- **Write the `title` in the language of the page.** A French reader should see the full form in French.
246+
- **Do not translate the abbreviation itself** unless the language has its own established short form, as with UN and ONU above.
247+
- **Set the `lang` attribute** on the page and on text in another language, so tools can pronounce things correctly.
248+
- **Check cultural meaning.** A short form can mean different things in different countries, which is why a full form on first use is so helpful.
249+
250+
## Choosing the Right Tool
251+
252+
| You want to... | Use |
253+
| :-- | :-- |
254+
| Explain a short form | `<abbr title="...">` |
255+
| Define a new term when first introduced | `<dfn>` |
256+
| Mark a foreign word or technical term in a different voice | `<i>` |
257+
| List many terms with meanings | A glossary with `<dl>` |
258+
| Mark the title of a book or film | `<cite>` |
259+
260+
The `<dfn>` tag marks the **defining instance** of a term, which is the place where you introduce and explain it. You can use it together with `<abbr>`.
261+
262+
```html
263+
<p>
264+
The <dfn><abbr title="Search Engine Optimization">SEO</abbr></dfn> process helps
265+
people find your website.
266+
</p>
267+
```
268+
269+
## Common Mistakes
270+
271+
### Mistake 1: Using `<abbr>` without a `title`
272+
273+
An `<abbr>` with no `title` gives readers no information. If you do not have a meaning to add, you do not need the tag.
274+
275+
### Mistake 2: Repeating the tooltip text next to every abbreviation
276+
277+
```html
278+
<!-- Too much -->
279+
<p><abbr title="HyperText Markup Language">HTML</abbr> (HyperText Markup Language)
280+
and <abbr title="HyperText Markup Language">HTML</abbr> (HyperText Markup Language)</p>
281+
```
282+
283+
Explain it in full once, then use the short form.
284+
285+
### Mistake 3: Wrapping every single occurrence
286+
287+
You can wrap each one, but on long pages it can clutter the code and the page. Wrapping the first use in each section is usually enough.
288+
289+
### Mistake 4: Relying on the tooltip alone
290+
291+
Remember that touch and keyboard users may never see it. Always give the meaning in the text at least once.
292+
293+
### Mistake 5: Using the old `<acronym>` tag
294+
295+
It was removed from HTML. Use `<abbr>` for abbreviations, acronyms, and initialisms.
296+
297+
### Mistake 6: Removing the dotted underline
298+
299+
Without a visible hint, readers do not know there is extra information. Keep a subtle style such as a dotted underline.
300+
301+
## Try It Yourself
302+
303+
Here is a short project.
304+
305+
1. Create a file called `tech-glossary.html`.
306+
2. Write a short paragraph about a web topic that uses at least **three** short forms, for example HTML, CSS, and API.
307+
3. On the first use of each, write the full form in the text, then wrap the short form in `<abbr>` with a `title`.
308+
4. Use one **plural** short form and write its `title` in the plural.
309+
5. Add a small glossary at the bottom with `<dl>`, `<dt>`, and `<dd>`.
310+
6. Add a CSS rule for `abbr[title]` with a dotted underline in your favorite color.
311+
312+
<AdsComponent />
313+
<br />
314+
315+
## Quick Recap
316+
317+
Click a question to check your answer.
318+
319+
<details>
320+
<summary>1. Which tag explains a short form in HTML?</summary>
321+
322+
The `<abbr>` tag, with the full meaning in the `title` attribute.
323+
324+
</details>
325+
326+
<details>
327+
<summary>2. What is the difference between an acronym and an initialism?</summary>
328+
329+
An acronym is read as a word, like NASA. An initialism is read letter by letter, like HTML. In HTML, both use `<abbr>`.
330+
331+
</details>
332+
333+
<details>
334+
<summary>3. Why is the tooltip alone not enough?</summary>
335+
336+
Touch users cannot hover, keyboard users may not reach it, and some screen readers ignore `title`. Write the full form in the text on first use.
337+
338+
</details>
339+
340+
<details>
341+
<summary>4. What happened to the `<acronym>` tag?</summary>
342+
343+
It is obsolete and was removed from HTML. Use `<abbr>` instead.
344+
345+
</details>
346+
347+
<details>
348+
<summary>5. In which language should the `title` be written?</summary>
349+
350+
In the language of the page or the surrounding text, so readers of that language understand it.
351+
352+
</details>
353+
354+
## Key Takeaways
355+
356+
- Use `<abbr title="...">` for abbreviations, acronyms, and initialisms.
357+
- Write the **full form in the text** the first time, because tooltips are not available to everyone.
358+
- Keep the dotted underline, or another clear hint, so readers know more information exists.
359+
- Write the `title` in the language of the page, and set the `lang` attribute.
360+
- Use a glossary for pages with many short forms, and use `<dfn>` to mark where you define a term.
361+
362+
Now you can make short forms friendly for every reader. Next, learn how to show code in your text in [Code Text](./code-text).

0 commit comments

Comments
 (0)