OnlineCBT
1. Semantic Importance vs. Presentational Tags
In early HTML specifications, tags were often used purely to alter text appearances—such as making text bold using <b> or italic using <i>. Modern web development enforces a strict separation: **HTML conveys semantic meaning, while CSS handles visual presentation.**
HTML5 introduced semantic formatting tags like <strong> and <em>. While they render as bold and italic visually by default, their primary purpose is to inform search engines and assistive screen readers about the structural weight or verbal emphasis of the text.
| HTML Tag | Type Category | Semantic Meaning & Screen Reader Impact |
|---|---|---|
<strong> |
Semantic Importance | Indicates high topic importance or urgency. Screen readers change tone/pitch to reflect gravity. |
<b> |
Presentational Bold | Draws visual attention without adding semantic importance (e.g. keywords in a summary, product names). |
<em> |
Semantic Emphasis | Marks stress emphasis. Alters sentence context or spoken verbal stress in screen readers. |
<i> |
Presentational Italic | Represents an alternate voice, technical terms, foreign phrases, or ship names without added stress. |
<!-- Strong vs Bold and Emphasis vs Italic --> <p><strong>Warning:</strong> Always back up your data before proceeding.</p> <p>The term <b>CSS</b> stands for Cascading Style Sheets.</p> <p>I <em>love</em> web development!</p> <p>The Latin phrase <i>carpe diem</i> translates to seize the day.</p>Hardcoded Output Result (Rendered View in White Box) //
Warning: Always back up your data before proceeding.
//The term CSS stands for Cascading Style Sheets.
//I love web development!
//The Latin phrase carpe diem translates to seize the day.
//2. Subscripts (<sub>) and Superscripts (<sup>)
When displaying mathematical equations, chemical formulas, dates, or footnotes, standard font baselines need to shift vertically.
<sub>(Subscript): Lowers text slightly below the standard baseline and renders it in a smaller font size. Used primarily in chemical formulas (like H2O) or variable indices (X1).<sup>(Superscript): Raises text slightly above the standard baseline and renders it in a smaller font size. Used for mathematical exponents (E = mc2), ordinal numbers (1st, 2nd), or footnote references.
<!-- Chemical Formulas & Mathematical Exponents --> <p>Water is represented chemically as H<sub>2</sub>O.</p> <p>Glucose chemical formula: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p> <p>Pythagorean Theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.</p> <p>He finished in 1<sup>st></sup> place on July 30<sup>th></sup>.</p>Hardcoded Output Result (Rendered View in White Box)
Water is represented chemically as H2O.
Glucose chemical formula: C6H12O6.
Pythagorean Theorem: a2 + b2 = c2.
He finished in 1st place on July 30th.
3. Highlighting and Document Revisions (<mark>, <del>, <ins>, <s>, <u>)
HTML provides dedicated inline tags to track document revisions, price updates, text highlights, or invalid content.
<mark>: Represents text highlighted for reference or search result matching (renders with a yellow background by default).<del>: Represents deleted or removed text during document editing (renders with a strikethrough line).<ins>: Represents newly inserted text added during revisions (renders with an underline). Used alongside<del>.<s>: Represents content that is no longer accurate or relevant (e.g. old product prices), but not strictly deleted from document history.<u>: Unarticulated annotation (underline). Used for spelling errors or proper nouns in Chinese text. Avoid using for regular text to prevent confusion with hyperlinked text.
<!-- Revisions & Highlights Example --> <p>Search Result: Found 10 matches for <mark>HTML5</mark>.</p> <p>Discount Sale: Price <del>$99.99</del> <ins>$49.99</ins>!</p> <p>Special Offer: <s>Free shipping available</s> (Expired).</p>Hardcoded Output Result (Rendered View in White Box)
Search Result: Found 10 matches for HTML5.
Discount Sale: Price $99.99 $49.99!
Special Offer: Free shipping available (Expired).
4. Technical Formatting (<code>, <kbd>, <samp>, <small>)
When documenting software, technical instructions, or legal disclaimers, specialized inline tags provide appropriate semantic styling.
<code>: Formats short fragments of computer code inline using a monospace font.<kbd>: Represents keyboard input or keystrokes entered by a user (e.g., Ctrl + C).<samp>: Represents sample output outputted by a computer program or system console.<small>: Represents side comments, fine print, copyright statements, or legal disclosures (renders 1 size smaller).
<!-- Technical Instructions & Disclaimers -->
<p>To save your file in VS Code, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Use the <code><div></code> element to group block content.</p>
<p>Server Output: <samp>200 OK Connection Established</samp>.</p>
<footer>
<p><small>© 2026 Developer Portal. Terms and conditions apply.</small></p>
</footer>
Hardcoded Output Result (Rendered View in White Box)
To save your file in VS Code, press Ctrl + S.
Use the Server Output: 200 OK Connection Established.
5. Homework Assignments & Practical Exercises
Create a formulas.html page. Write chemical formulas for Water (H2O), Carbon Dioxide (CO2), and Sulphuric Acid (H2SO4) using <sub>. Write mathematical expressions for E=mc2 and x3 + y3 using <sup>.
Construct a product sales block. Display an original price marked with <del> ($120.00) next to a sale price marked with <ins> ($79.99). Highlight the phrase "50% OFF" using <mark>, and place copyright disclaimers at the bottom using <small>.
Combine learnings from Lessons 01 through 11: Create a keyboard shortcuts cheat-sheet for VS Code using <kbd>, <code>, and <strong> tags. Validate your code through validator.w3.org and confirm that screen readers announce semantic importance correctly.
6. Frequently Asked Interview Questions
Answer: The <strong> element represents semantic importance, seriousness, or urgency, prompting screen readers to alter tone or inflection. The <b> element is purely presentational, drawing visual bold attention to text without implying additional importance or accessibility cues.
Answer: On the web, underlined text is universally recognized as an active hyperlink. Using <u> on non-clickable text confuses users who try to click it. Use <em> or <strong> for emphasis instead.
Answer: The <del> (deletion) and <ins> (insertion) tags inform screen readers and document difference tools that specific text was removed or added during an edit. Screen readers explicitly announce "deleted text" and "inserted text" to visually impaired users.
Answer: The <kbd> tag semantically identifies user keyboard inputs, voice commands, or key combinations (like Ctrl + S). Browser default stylesheets render it in monospace font, and custom CSS can style it to resemble physical keyboard keys.
