diff --git a/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md b/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md index 349859a23db..d506a4bc237 100644 --- a/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md +++ b/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md @@ -16,165 +16,212 @@ dashedName: review-semantic-html ## Semantic HTML Elements - **Header element**: used to define the header of a document or section. + + ```html +
+

CatPhotoApp

+

Welcome to our cat gallery.

+
+ ``` + - **Main element**: used to contain the main content of the web page. + + ```html +
+
+

Cat Photos

+

Browse adorable cat pictures.

+
+
+ ``` + - **Section element**: used to divide up content into smaller sections. + + ```html +
+

About Me

+

Hi, I am Jane Doe and I am a web developer.

+
+ ``` + - **Navigation Section (`nav`) element**: represents a section with navigation links. + + ```html + + ``` + - **Figure element**: used to contain illustrations and diagrams. + + ```html +
+ Two tabby kittens sleeping together on a couch. +
Cats hate other cats.
+
+ ``` + - **Emphasis (`em`) element**: marks text that has stress emphasis. -```html -

- Never give up on your dreams. -

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

-``` + ```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. -```html -

- Warning: This product may cause allergic reactions. -

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

-``` + ```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
-
-``` + ```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 -
+ ```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]. -

-
-``` + ``` + +- **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. -```html -

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

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

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

-``` + ```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. -```html -

- 22 (2 squared) is 4. -

-``` + ```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. -```html -

- CO2 -

-``` + ```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;
-    }
-  
-
-``` + ```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. -

-``` + ```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) - -``` + ```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 canceled. -

-``` + ```html +

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

+

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

+ ``` # --assignment--