HTML Formatting Elements
Learn how to format text and add meaning using semantic HTML elements.
HTML formatting elements are used to change the appearance of text and, more importantly, to give it semantic meaning. Semantic tags help browsers, screen readers, and search engines understand your content better.
HTML Formatting Elements
Common HTML tags used to format and semantically describe text.
<p>
<b>Bold text</b> vs <strong>Strong importance</strong>
</p>
<p>
<i>Italic text</i> vs <em>Emphasized meaning</em>
</p>
<p>
<u>Underlined text</u> and <s>strikethrough text</s>
</p>
<p>
<ins>Inserted text</ins> and <del>Deleted text</del>
</p>
<p>
Use <code>console.log()</code> in JavaScript
</p>
<p>
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy
</p>
<p>
Output: <samp>Hello World</samp>
</p>
<p>
Formula: <var>x</var> = <var>a</var> + <var>b</var>
</p><b> vs <strong>(Bold & Importance)
Both make text bold, but <strong> adds semantic importance.
- is visual only
- conveys importance to screen readers
<i> vs <em>(Italic & Emphasis)
Italic text vs emphasized meaning.
- is purely visual
- changes meaning and improves accessibility
<u>, <s>, <ins>, <del>(Text Changes)
These tags represent changes or special text states.
- underlines text
marks no longer relevant text- inserted content
deleted content
<code>, <kbd>, <samp>, <var>(Technical Text)
Used for programming, keyboard input, output, and variables.
for inline code- for keyboard keys
- for program output
- for variables
Knowledge Check
1. Which tag represents strong importance?
2. Which tag should be used for emphasized meaning?
3. Which tag is best for keyboard input?
4. Which tag represents deleted content?
5. Which tag is used to represent a variable?