Every text-level element in one place
strong and b look the same, as do em and i. The difference is meaning, which you can't see but tools can.
Text-level elements mark what a word means: <strong> for importance, <em> for stress, <mark> for highlights, <del>/<ins> for edits, <sub>/<sup> for small raised or lowered text, and a few more; the look comes free, but the meaning is the point.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Mark up: Caution: the floor is wet. The word café comes from French. Use the right element for the warning and for the French word.
Mark up a sale price: the old price ₹1,200 is crossed out because it's no longer valid, and the new price ₹900 is shown after it. Add a fine-print line underneath saying offers end Sunday.
Write the formula for the area of a circle, A = πr², using a superscript.
Explain it without notes
Explain the difference between <strong> and <b>, and between <em> and <i>.
When do you use <del>/<ins> and when <s>?
What do <hr> and <wbr> do?
Why not choose these elements for how they look?
Preview
Console
Nothing logged yet.Expected console output
strong fontWeight 700
b fontWeight 700
em fontStyle italic
i fontStyle italic
mark backgroundColor rgb(255, 255, 0)
del textDecorationLine line-through
ins textDecorationLine underline