diff --git a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/6729963b1ab11638753cf082.md b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/6729963b1ab11638753cf082.md index c89b76291bc..0978fb5f8a3 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/6729963b1ab11638753cf082.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/6729963b1ab11638753cf082.md @@ -5,12 +5,14 @@ challengeType: 19 dashedName: what-are-the-u-s-and-ruby-elements-used-for --- -# --description-- +# --interactive-- The unarticulated annotation element, or `u` element for short, is used to represent inline text that has non-textual annotation applied. Here is an example of using the `u` element to highlight various spelling errors: +:::interactive_editor + ```html

You can use the unarticulated annotation element to highlight @@ -18,6 +20,8 @@ Here is an example of using the `u` element to highlight various spelling errors

``` +::: + In the example, the words `incorrect`, `spelling`, and `issues` are misspelled. The default styling for the `u` element is a black underline underneath the text. In HTML4, the `u` element was used for styling purposes. But in HTML5, the `u` element should only be used to indicate that text has non-textual annotation applied. @@ -26,22 +30,30 @@ If you want to style a piece of text with an underline, you should use CSS inste The strikethrough element, or `s` element for short, should be used to represent when text is no longer accurate or relevant. Here is an example of using the `s` element to show the cancellation of an activity: +:::interactive_editor + ```html

Tomorrow's hike will be meeting at noon.

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

``` +::: + In this example, the first sentence is crossed out because the hike was canceled due to weather reasons. The `s` element should never be used to just to show changes to a document. More appropriate elements in that case would be the deleted text element and the inserted text element. The `ruby` element represents small text shown above or below the main text. It is typically used to show the pronunciation of East Asian characters. Here is the `ruby` element example from the MDN web docs page: +:::interactive_editor + ```html 明日 (Ashita) ``` +::: + The `rp` element, or ruby fallback parenthesis element, is used as a fallback for browsers lacking support for displaying ruby annotations. The `rt` element, or ruby text element, is used to indicate text for the ruby annotation. This text is usually used for pronunciation, or translation details in East Asian typography.