From cd98889f3441561ad4d5f0fed7eefe1ce3066b69 Mon Sep 17 00:00:00 2001 From: Kevin Barrantes Cerdas Date: Tue, 18 Feb 2025 04:50:31 -0600 Subject: [PATCH] fix(curriculum): Update semantic html review page (#58821) --- .../671a83934b61f64cefe87a61.md | 143 +++++++++++++++++- 1 file changed, 139 insertions(+), 4 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md b/curriculum/challenges/english/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md index 334c01bf4a8..e30e1324bcc 100644 --- a/curriculum/challenges/english/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md +++ b/curriculum/challenges/english/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md @@ -22,26 +22,161 @@ Review the concepts below to prepare for the upcoming quiz. - **Navigation Section (`nav`) element**: represents a section with navigation links. - **Figure element**: used to contain illustrations and diagrams. - **Emphasis (`em`) element**: marks text that has stress emphasis. + +```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. + +```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. -- **Bring Attention To (`b`) element**: used to bring attention to text that is not important for the meaning of the content. + +```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. + +```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. + +```html +
+
HTML
+
HyperText Markup Language
+
CSS
+
Cascading Style Sheets
+
+``` + - **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. + +```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. + +```html +
+
+ "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?" +
+

+ -Quincy Larson, How to learn to Code and Get a Developer Job [Full Book]. +

+
+``` + - **Inline Quotation (`q`) element**: used to represent a short inline quotation. -- **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym. + +```html +

+ As Quincy Larson said, + + Momentum is everything. + +

+``` + +- **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. + +```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. + +```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. -- **Subscript (`sub`) element**: used to represent subscript text. +- **Superscript (`sup`) element**: used to represent superscript text. Common use cases for the `sup` element would include exponents, superior lettering and ordinal numbers. + +```html +

+ 22 (2 squared) is 4. +

+``` + +- **Subscript (`sub`) element**: used to represent subscript text. Common uses cases for the subscript element include chemical formulas, foot notes, and variable subscripts. + +```html +

+ CO2 +

+``` + - **Inline Code (`code`) element**: used to represent a fragment of computer code. - **Preformatted Text (`pre`) element**: represents preformatted text + +```html +
+  
+    body {
+      color: red;
+    }
+  
+
+``` + - **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. + +```html +

+ You can use the unarticulated annotation element to highlight + inccccort spling issses. +

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

+ Tomorrow's hike will be meeting at noon. +

+

+ Due to unforeseen weather conditions, the hike has been cancelled. +

+``` + # --assignment-- Review the Semantic HTML topics and concepts.