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 em element lesson (#62684)

Browse Source
This commit is contained in:
Giftea ☕
2025-10-10 20:25:11 +01:00
committed by GitHub
parent f0ca02978f
commit 3e22711499
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/6729959bf9c8e835f46b3f78.md
+11 -3
View File
@@ -5,21 +5,27 @@ challengeType: 19
dashedName: when-should-you-use-the-emphasis-element-over-the-idiomatic-text-element
---
# --description--
# --interactive--
These elements are very closely related to the concepts of presentational and semantic HTML. The idiomatic text element, `i`, was originally used for presentational purposes to display the text in italics. But now, it is frequently used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
Here is example from the official HTML spec, using the `i` element to show an idiomatic phrase in French:
Here is example from the official HTML spec, using the `i` element to show an idiomatic phrase in French.
:::interactive_editor
```html
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
```
:::
The `lang` attribute inside the open `<i>` tag is used to specify the language of the content. In this case, the language would be French. The `i` element does not indicate if the text is important or not, it only shows that it's somehow different from the surrounding text.
If you do need to emphasize the importance of the text, you can use a similar semantic element called the emphasis element, `em`. This is usually recommended if you need to provide more context. You should use this element for parts of the text that require a special emphasis compared to surrounding text. It's usually limited to only a few words, because it can alter the meaning of the sentence.
This is an example of the emphasis element within a paragraph:
This is an example of the emphasis element within a paragraph.
:::interactive_editor
```html
<p>
@@ -27,6 +33,8 @@ This is an example of the emphasis element within a paragraph:
</p>
```
:::
You can see the sentence `Never give up on your dreams`. Notice that the word `your` will be emphasized, because it's inside this element. In the browser you would see the word `your` is italicized to tell readers that this is an important word in the sentence.
Even if it looks the same when the text was inside the idiomatic text element, the semantic emphasis element conveys its meaning and importance behind the scenes.