Deprecated & Obsolete Tags

Understanding the 'ghosts' of HTML history and why we no longer use them.

`Presentational Tags`

In the early days of the web, HTML was used to handle both structure and design. These tags are now obsolete because CSS handles all styling.

<font> : Formerly used to define font face, size, and color; now replaced by CSS 'font-family' and 'color'.
<center> : Used to align text to the middle; now replaced by 'text-align: center' or Flexbox/Grid in CSS.
<big> : Used to increase text size; now replaced by the 'font-size' property.
<strike> : Used to draw a line through text; replaced by the semantic <s> tag or CSS 'text-decoration'.

Legacy vs. Modern Approach

Showing how old presentational tags are replaced by clean HTML and CSS styling.

<center>
  <font color="red" size="5">
    <marquee>Important Announcement!</marquee>
  </font>
</center>

<div style="text-align: center; color: red; font-size: 24px;">
  <p class="animate-scroll">Important Announcement!</p>
</div>

`Behavioral Failures`

Some tags were removed because they created a poor user experience or caused issues for people with photosensitivity or visual impairments.

<marquee> : Created scrolling text. It is non-standard and difficult for users to read or stop.
<blink> : Caused text to flash on and off. It was a major accessibility hazard (seizure risk) and is now completely unsupported.
<noframes> : Provided fallback content for browsers that didn't support frames; now irrelevant as frames are obsolete.

`Obsolete Layout Elements`

Before CSS layouts existed, developers split the browser window into multiple pieces using frames. This was terrible for SEO and bookmarking.

<frameset> : Used as a container for <frame> tags to define a window's layout.
<frame> : Defined a specific window (frame) within a frameset. Modern development uses <iframe> or standard CSS layouts instead.

Knowledge Check

1. What is the main reason tags like <center> and <font> became obsolete?

2. Which tag was famously used to create scrolling text but is now discouraged due to accessibility and annoyance issues?

3. What should you use instead of the <strike> or <big> tags?

4. The <frameset> and <frame> tags were replaced by which modern element?

5. Why is the <blink> tag considered one of the 'worst' tags in web history?

6. What does it mean when a tag is 'Deprecated'?