From d2c76cf0db9257ee3a049ee7379ff6138129e0e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Fri, 10 Oct 2025 20:25:55 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to strong element lesson (#62686) --- .../672995ac85fd943657c2ede5.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995ac85fd943657c2ede5.md b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995ac85fd943657c2ede5.md index e0673081007..adc05f6462e 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995ac85fd943657c2ede5.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995ac85fd943657c2ede5.md @@ -5,10 +5,12 @@ challengeType: 19 dashedName: when-should-you-use-the-strong-element-over-the-bring-attention-to-element --- -# --description-- +# --interactive-- The "bring attention to" element, `b`, is commonly used to highlight keywords in summaries, or product names in reviews. Usually, browsers display this text in boldface. Here's an example using the `b` element to highlight product names in this review: +:::interactive_editor + ```html

We tested several products, including the SuperSound 3000 for audio @@ -18,18 +20,24 @@ The "bring attention to" element, `b`, is commonly used to highlight keywords in

``` +::: + The browser renders these parts of the text as bold text. This visual emphasis will draw readers attention to the product names. If you need to emphasize the importance of the text, you should use the `strong` element instead of the `b` element. `strong` is a semantic HTML element that emphasizes text that is crucial, or urgent. This is an example where the `strong` element is used to label a very important warning about the potential allergic reactions that customers may have to a product: +:::interactive_editor + ```html

Warning: This product may cause allergic reactions.

``` +::: + The `strong` element communicates that sense of urgency. Visually both are very similar, because they are both rendered as bold by default. But their meanings are quite different. While the "bring attention to" element only draws attention to the text, without indicating the higher level of importance, the `strong` element does more than that. It conveys a sense of importance, or urgency. This is their main difference.