logo

Character Tags – Logical and Physical

In HTML, character tags are used to format or style text. They are divided into Logical Tags and Physical Tags.

Logical Tags

  • Indicate the meaning (semantics) of the text.
  • Focus on what the text represents, not just how it looks.
  • Example: <em> means emphasized text → usually displayed in italics, but browser/reader knows it is important.

👉 Logical tags are useful for search engines and screen readers (accessibility).

Physical Tags

  • Indicate the appearance (look) of the text, without giving any meaning.
  • Example: <b> makes text bold, but it doesn’t tell why it’s bold.

👉 Physical tags only deal with presentation.

Important Logical Tags

TagMeaningExample
<em>Emphasized text (usually italic)<em>Important</em> → Important
<strong>Strong importance (usually bold)<strong>Warning</strong> → Warning
<cite>Citation (title of a book, film, etc.)<cite>Ramayana</cite>
<abbr>Abbreviation<abbr title="World Health Organization">WHO</abbr>
<code>Computer code<code>print("Hello")</code>
<kbd>Keyboard inputPress <kbd>Ctrl</kbd> + <kbd>C</kbd>

👉 Use logical tags when you want meaning + style.

Link, ALink, and VLink Tags

These are attributes of the <body> tag in older HTML versions (HTML 4.01). They define the colors of links on a web page.

  • Link (link) → Color of a hyperlink before it is clicked.
  • ALink (alink) → Color of the link when it is being clicked (active).
  • VLink (vlink) → Color of a hyperlink after it has been visited.

Example:

<body link="blue" alink="red" vlink="purple">
  <a href="https://www.cbse.gov.in">Visit CBSE</a>
</body>
  • Blue = default link color
  • Red = when you click it
  • Purple = after visiting

👉 Note: These attributes are deprecated in HTML5. Now we use CSS instead.

Setting Margins

Margins define the empty space around the content of the web page.

In older HTML (deprecated now), margins were set using <body> attributes:

<body leftmargin="50" topmargin="30" rightmargin="50" bottommargin="30">
  <p>This page has custom margins.</p>
</body>
  • leftmargin → Distance from left edge
  • topmargin → Distance from top edge
  • rightmargin → Distance from right edge
  • bottommargin → Distance from bottom edge

👉 In modern HTML5, margins are set using CSS:

<body style="margin: 50px;">
  <p>This page has 50px margin on all sides.</p>
</body>

✅ Quick Recap for Exams:

  • Logical Tags → Meaningful formatting (<em>, <strong>, <cite>, <code>).
  • Physical Tags → Only visual formatting (<b>, <i>, <u>).
  • Link, ALink, VLink → Define hyperlink colors (deprecated, replaced by CSS).
  • Margins → Set space around content (old <body> attributes, now CSS).

Logical vs Physical Tags in HTML

TypeTagPurpose / MeaningExample CodeOutput
Logical Tag<em>Emphasized text (semantically important, usually italic)<em>Important</em>Important
Logical Tag<strong>Strong importance (semantically important, usually bold)<strong>Warning</strong>Warning
Logical Tag<cite>Citation (book, movie, etc.)<cite>Ramayana</cite>Ramayana
Logical Tag<abbr>Abbreviation (with tooltip/meaning)<abbr title="World Health Organization">WHO</abbr>WHO (hover shows meaning)
Logical Tag<code>Computer code (monospace font)<code>print("Hi")</code>print("Hi")
Logical Tag<kbd>Keyboard inputPress <kbd>Ctrl</kbd> + <kbd>C</kbd>Press Ctrl + C
Physical Tag<b>Bold text (only visual, no meaning)<b>Bold</b>Bold
Physical Tag<i>Italic text (only visual, no meaning)<i>Italic</i>Italic
Physical Tag<u>Underlined text<u>Underline</u>Underline
Physical Tag<s>Strikethrough (deprecated, CSS preferred)<s>Old</s>Old
Physical Tag<tt>Teletype / typewriter font (deprecated)<tt>Fixed width</tt>Fixed width

✅ Key Exam Tip:

  • Logical tags → Add meaning + formatting (good for accessibility & search engines).
  • Physical tags → Only change appearance, no meaning (many are deprecated, CSS preferred).

Back to Topics

Take the test