mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-13 22:00:19 -04:00
feat(curriculum): add interactive examples to semantic HTML review page (#65208)
This commit is contained in:
Diem-Trang Pham
@@ -5,7 +5,7 @@ challengeType: 31
|
||||
dashedName: review-semantic-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
# --interactive--
|
||||
|
||||
## Importance of Semantic HTML
|
||||
|
||||
@@ -17,6 +17,8 @@ dashedName: review-semantic-html
|
||||
|
||||
- **Header element**: used to define the header of a document or section.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>CatPhotoApp</h1>
|
||||
@@ -24,8 +26,12 @@ dashedName: review-semantic-html
|
||||
</header>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Main element**: used to contain the main content of the web page.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<main>
|
||||
<section>
|
||||
@@ -35,8 +41,12 @@ dashedName: review-semantic-html
|
||||
</main>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Section element**: used to divide up content into smaller sections.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<section>
|
||||
<h2>About Me</h2>
|
||||
@@ -44,8 +54,12 @@ dashedName: review-semantic-html
|
||||
</section>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Navigation Section (`nav`) element**: represents a section with navigation links.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<nav>
|
||||
<ul>
|
||||
@@ -55,8 +69,12 @@ dashedName: review-semantic-html
|
||||
</nav>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Figure element**: used to contain illustrations and diagrams.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img
|
||||
@@ -67,44 +85,64 @@ dashedName: review-semantic-html
|
||||
</figure>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Emphasis (`em`) element**: marks text that has stress emphasis.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
Never give up on <em>your</em> dreams.
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
|
||||
|
||||
:::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.
|
||||
|
||||
- **Strong Importance (`strong`) element**: marks text that has strong importance.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
<strong>Warning:</strong> This product may cause allergic reactions.
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Bring Attention To (`b`) element**: used to bring attention to text that is not important for the meaning of the content. It's commonly used to highlight keywords in summaries or product names in reviews.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
We tested several products, including the <b>SuperSound 3000</b> for audio quality, the <b>QuickCharge Pro</b> for fast charging, and the <b>Ecoclean Vacuum</b> for cleaning. The first two performed well, but the <b>Ecoclean Vacuum</b> did not meet expectations.
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Description List (`dl`) element**: used to represent a list of term-description groupings.
|
||||
- **Description Term (`dt`) element**: used to represent the term being defined.
|
||||
- **Description Details (`dd`) element**: used to represent the description of the term.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>HTML</dt>
|
||||
@@ -114,16 +152,24 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
|
||||
</dl>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source. This element has a `cite` attribute. The value of the `cite` attribute is the URL of the source.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
|
||||
"Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"
|
||||
</blockquote>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Citation (`cite`) element**: used to attribute the source of the referenced work visually. Marks up the title of the reference.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<div>
|
||||
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
|
||||
@@ -135,8 +181,12 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
|
||||
</div>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Inline Quotation (`q`) element**: used to represent a short inline quotation.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
As Quincy Larson said,
|
||||
@@ -146,43 +196,63 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym. To help users understand what the abbreviation or acronym is, you can show its full form, a human readable description, with the `title` attribute.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
<abbr title="HyperText Markup Language">HTML</abbr> is the foundation of the web.
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Contact Address (`address`) element**: used to represent the contact information.
|
||||
- **(Date) Time (`time`) element**: used to represent a date and/or time. The `datetime` attribute is used to translate dates and times into a machine-readable format.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
The reservations are for the <time datetime="20:00">20:00 </time>
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **ISO 8601 Date (`datetime`) attribute**: used to represent dates and times in a machine-readable format. The standard format is `YYYY-MM-DDThh:mm:ss`, with the capital `T` being a separator between the date and time.
|
||||
- **Superscript (`sup`) element**: used to represent superscript text. Common use cases for the `sup` element would include exponents, superior lettering and ordinal numbers.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
2<sup>2</sup> (2 squared) is 4.
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Subscript (`sub`) element**: used to represent subscript text. Common use cases for the subscript element include chemical formulas, footnotes, and variable subscripts.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
CO<sub>2</sub>
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Inline Code (`code`) element**: used to represent a fragment of computer code.
|
||||
- **Preformatted Text (`pre`) element**: represents preformatted text
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<pre>
|
||||
<code>
|
||||
@@ -193,8 +263,12 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
|
||||
</pre>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Unarticulated Annotation (`u`) element**: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
You can use the unarticulated annotation element to highlight
|
||||
@@ -202,18 +276,26 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Ruby Annotation (`ruby`) element**: used for annotating text with pronunciation or meaning explanations. An example usage is for East Asian typography.
|
||||
- **Ruby fallback parenthesis (`rp`) element**: used as a fallback for browsers lacking support for displaying ruby annotations.
|
||||
- **Ruby text (`rt`) element**: used to indicate text for the ruby annotation. Usually used for pronunciation, or translation details in East Asian typography.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<ruby>
|
||||
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
|
||||
</ruby>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p>
|
||||
<s>Tomorrow's hike will be meeting at noon.</s>
|
||||
@@ -223,8 +305,12 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
|
||||
</p>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Internal links**: used to link to another section of the page by using `href="#id"` on an `a` element and giving the destination element the same `id`. This is commonly used for skip links, table of contents, or long pages with multiple sections.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<a href="#about-section">Go to About Section</a>
|
||||
|
||||
@@ -234,6 +320,8 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
|
||||
</section>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# --assignment--
|
||||
|
||||
Review the Semantic HTML topics and concepts.
|
||||
|
||||
Reference in New Issue
Block a user