Learning objectives
Identify obsolete constructs; replace presentation with CSS and obsolete structure with semantic HTML; test migration effects on URLs and behavior.
Prerequisites
Understand semantic layout, CSS classes, and basic document inspection.
A browser rendering something does not make it current
Browsers preserve many old behaviors so existing pages remain usable. An obsolete element can therefore still appear to work. That compatibility is different from a recommendation to use it in new content. Check the current standard and reference documentation rather than deciding validity from one successful screenshot.
Obsolete, deprecated, non-standard, and experimental describe different concerns. Obsolete features are retained for historical compatibility but should not be used for new authoring. Deprecated is often used in documentation as a warning to migrate. Non-standard features were never part of the relevant standard. Experimental features may be proposed or newly implemented and need careful support and fallback review. A feature can be standardized yet still have limited implementation support.
Replace the intent, not only the spelling
Font and center are legacy presentation elements. Replace their visual intent with CSS while selecting a semantic wrapper only if the content needs one. A paragraph centered by CSS is still a paragraph; wrapping every migrated fragment in section would invent structure that was never intended.
Frameset and frame belong to an obsolete page-composition model. A modern replacement usually uses one document with semantic regions, server-side composition, and CSS layout. Iframe remains a current element for embedding a separate document, but it is not an automatic drop-in replacement for a frameset application.
Marquee and blink-style effects are poor foundations for readable content. Replace them with stable text or a carefully designed animation that serves a real purpose and respects user preferences. Presentational attributes such as bgcolor and align should generally become CSS. Inspect each attribute’s specific status, because historical exceptions and contextual rules exist.
Migrate in a testable sequence
First inventory the pages and identify what the legacy markup does: meaning, visual layout, navigation, form behavior, or embedding. Capture representative states and URLs. Then change one responsibility at a time. Replacing a table used for layout with grid is different from preserving a real data table’s header relationships.
Keep public destinations working through redirects or stable paths when pages move. Verify forms, downloads, fragment targets, and script selectors after changing IDs or wrappers. Test with CSS disabled and a keyboard to confirm that the new structure improves the reading and interaction model.
Do not hide migration uncertainty behind a compatibility claim. Record the old feature, replacement, tested behavior, and remaining dependency. A careful migration preserves the useful content while removing avoidable reliance on legacy parsing and presentation.
Working example
<p class="announcement">The library closes at 18:00 today.</p>Another example
<!-- Legacy example: do not use for new content. -->
<center><font color="red">Opening hours changed</font></center>
<!-- Modern replacement. -->
<p class="hours-notice">Opening hours changed</p>Expected output
The live example displays a centered, clearly styled notice using a paragraph and CSS. The comparison source includes obsolete markup only to identify what is being replaced; the modern paragraph carries the message without legacy elements.
Common mistakes
Do not mechanically replace center with section or every font with strong. Styling does not automatically imply importance. Do not delete a layout table before understanding its reading order, and do not remove old URLs without a redirect plan.
Accessibility and browser notes
Migration should preserve meaningful headings, labels, focus order, and text alternatives. Replacing an obsolete element with a div may be valid syntax but still fail to improve semantics. Test the full task after the markup changes.
Practice
Migrate a centered red warning that contains an important cancellation notice. Choose markup that communicates importance and CSS for its appearance.
Review the solution and reasoning
<p class="cancellation"><strong>Today’s workshop is cancelled.</strong> Registered visitors will receive a new date.</p>Strong marks the important message; the paragraph groups the notice. Centering, color, and spacing belong in the cancellation CSS rule. The words communicate the state even when color is unavailable.