From 77ea55e0c0d128c6a4bcd727132ec558f1a2e3cd Mon Sep 17 00:00:00 2001 From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com> Date: Thu, 22 Jan 2026 07:37:39 -0600 Subject: [PATCH] feat(curriculum): add interactive examples to semantic HTML review page (#65208) --- .../671a83934b61f64cefe87a61.md | 90 ++++++++++++++++++- 1 file changed, 89 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md b/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md index e0fe97378a0..f87638e093c 100644 --- a/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md +++ b/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md @@ -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

CatPhotoApp

@@ -24,8 +26,12 @@ dashedName: review-semantic-html
``` +::: + - **Main element**: used to contain the main content of the web page. +:::interactive_editor + ```html
@@ -35,8 +41,12 @@ dashedName: review-semantic-html
``` +::: + - **Section element**: used to divide up content into smaller sections. +:::interactive_editor + ```html

About Me

@@ -44,8 +54,12 @@ dashedName: review-semantic-html
``` +::: + - **Navigation Section (`nav`) element**: represents a section with navigation links. +:::interactive_editor + ```html ``` +::: + - **Figure element**: used to contain illustrations and diagrams. +:::interactive_editor + ```html
``` +::: + - **Emphasis (`em`) element**: marks text that has stress emphasis. +:::interactive_editor + ```html

Never give up on your dreams.

``` +::: + - **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts. +:::interactive_editor + ```html

There is a certain je ne sais quoi in the air.

``` +::: + 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

Warning: This product may cause allergic reactions.

``` +::: + - **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

We tested several products, including the SuperSound 3000 for audio quality, the QuickCharge Pro for fast charging, and the Ecoclean Vacuum for cleaning. The first two performed well, but the Ecoclean Vacuum did not meet expectations.

``` +::: + - **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
HTML
@@ -114,16 +152,24 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
``` +::: + - **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
"Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"
``` +::: + - **Citation (`cite`) element**: used to attribute the source of the referenced work visually. Marks up the title of the reference. +:::interactive_editor + ```html
@@ -135,8 +181,12 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
``` +::: + - **Inline Quotation (`q`) element**: used to represent a short inline quotation. +:::interactive_editor + ```html

As Quincy Larson said, @@ -146,43 +196,63 @@ The `lang` attribute inside the open `i` tag is used to specify the language of

``` +::: + - **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

HTML is the foundation of the web.

``` +::: + - **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

The reservations are for the

``` +::: + - **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

22 (2 squared) is 4.

``` +::: + - **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

CO2

``` +::: + - **Inline Code (`code`) element**: used to represent a fragment of computer code. - **Preformatted Text (`pre`) element**: represents preformatted text +:::interactive_editor + ```html 
     
@@ -193,8 +263,12 @@ The `lang` attribute inside the open `i` tag is used to specify the language of
``` +::: + - **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

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

``` +::: + - **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 明日 (Ashita) ``` +::: + - **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant. +:::interactive_editor + ```html

Tomorrow's hike will be meeting at noon. @@ -223,8 +305,12 @@ The `lang` attribute inside the open `i` tag is used to specify the language of

``` +::: + - **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 Go to About Section @@ -234,6 +320,8 @@ The `lang` attribute inside the open `i` tag is used to specify the language of ``` +::: + # --assignment-- Review the Semantic HTML topics and concepts.