Theory
The Monotonous Wall of Text
Imagine reading a newspaper where every single word looks identical. There are no bold headlines, no italicized book titles, and no highlighted quotes. Your eyes would grow tired within seconds! When building your personal portfolio, your bio and project descriptions face the exact same challenge. If you present a flat block of words, recruiters will skip it. How do we guide a reader's eyes to the most important parts of your achievements?
Theory
The Study Guide Highlighters
Think back to how you prepare for university exams. When reading a dense chapter, you do not just read passively. You use a yellow highlighter to mark critical terms, use a red pen to underline definitions, and look for large chapter headings to understand the structure. Text formatting tags are your digital highlighters and pens. They tell the browser which words deserve extra weight, emphasis, or structure.
Theory
Text Formatting Tags
In web design, text formatting tags are specialized elements that modify the visual appearance and semantic meaning of text content. These tags are broadly divided into physical tags, which change only the visual look like <b> for bold or <i> for italic, and logical tags, which add meaning for search engines and screen readers like <strong> for strong importance or <em> for emphasis. Headings <h1> through <h6> define text hierarchy, while <p> defines standard paragraph blocks.
At a glance
Comparison of core text formatting tags in HTML5.
| Tag | Type | Visual Result | Semantic Meaning |
|---|---|---|---|
| <b> | Physical | Bold text | Purely visual boldness |
| <strong> | Logical | Bold text | High importance or urgency |
| <i> | Physical | Italic text | Purely visual slant |
| <em> | Logical | Italic text | Stressed emphasis |
| <mark> | Logical | Yellow background | Highlighted reference |
| <u> | Physical | Underlined text | Visual underline |
Practical
Formatting a Portfolio About Section
<h1>About Me</h1>
<p>I am a <b>second year BCA student</b> passionate about <i>web engineering</i>.</p>
<p>My current project is a <strong>smart portfolio tracker</strong> built <em>from scratch</em>.</p>
<p><mark>Key Note:</mark> <u>Attendance is mandatory</u> for the practical lab exam.</p>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
A student wants to display the smallest possible standard heading level for a subsection in an HTML5 document. Which tag should they choose?
- <h1> because number 1 represents top priority
- <h6> because heading levels run from h1 down to h6
- <h0> because zero means minimal size
- <heading size="small"> using the custom size attribute
Show the answer
<h6> because heading levels run from h1 down to h6
HTML headings range strictly from <h1> for the most important, largest heading down to <h6> for the least important, smallest heading. There is no <h0> tag, and heading tags do not use a size attribute for standard structural scaling.
Think first
The Bold vs Strong Choice
Before tapping, mentally explain why a modern professional web developer prefers using <strong> over <b> for critical safety warnings on a webpage.
Show the answer
While both tags render text as bold visually, <b> is purely physical and provides zero meaning to screen readers or search engines. The <strong> tag is logical, telling accessibility tools that the text is genuinely important, ensuring visually impaired users hear the text with proper spoken urgency.
Watch out
The Heading Font Size Trap
A frequent mistake in practical lab exams is using heading tags like <h1> or <h2> purely because you want to make some random text look big and bold. This destroys your webpage's SEO structure. Headings are like textbook headings, they define structure, not design. If you just want big text inside a paragraph, use CSS font size rules later, never abuse heading tags for visual shortcuts.
Formula
Exam Guide: Physical vs Logical Tags
When a 5 mark question asks you to differentiate physical and logical tags, format your answer with these three pillars:
- Definition: Physical tags dictate direct visual styling, while logical tags add systemic meaning and context.
- Parity Pairs: Show how
<b>pairs with<strong>, and<i>pairs with<em>.
- Modern Standards: Note that HTML5 prioritizes logical tags for accessibility compliance.
Summary
Key takeaways
- Headings run strictly from h1 down to h6 to establish clear document hierarchy.
- Physical tags like
<b>and<i>alter text appearance without adding extra structural meaning. - Logical tags like
<strong>and<em>add semantic value for search engines and accessibility tools. - The
<mark>tag applies a native yellow highlight to reference text blocks easily. - Never use heading elements as a shortcut for changing normal font sizes.
- Memory Hook: Physical tags are skin deep, but logical tags have soul.