The web world is constantly evolving, and the language that web pages use to structure themselves, HTML, is no exception. HTML5 emerged as the standard that promoted more semantic and accessible practices, leaving behind a host of obsolete tags that, although widely used in the past, are no longer recommended today. If you are interested in adapting your code to the current and future demands of web development, it is crucial that you reconsider the use of outdated tags and embrace the modern alternatives that HTML5 offers. I will guide you through this process, presenting you with the tools and knowledge necessary for a successful and up-to-date transition.
Alternatives to Obsolete Labels
Many tags that were once ubiquitous in web page coding have become obsolete with the advent of HTML5. Below, we explore some of these tags and the alternatives you should replace them with to bring your website up to date with current standards.
Of <center> to CSS Flexbox and Grid
Do you remember how we centered content with the tag <center>? Well, it's time to leave her behind. The modern way to center elements is through CSS, specifically using Flexbox or Grid. For example:
Instead of using:
<center>This text is centered</center>Uses:
<div style="display: flex; justify-content: center;">This text is centered</div>Or, to fully center an element on both axes, you could use:
<div style="display: flex; align-items: center; justify-content: center;">This element is centered</div>Of the font-family
The label It was used to change the type, size and color of the text font. In HTML5, this is handled entirely through CSS with the font-family, as well as font-size y color. So instead of:
This is red textWe should have:
<p style="font-family: Arial; font-size: small; color: red;">This is red text</p>Of <b> y <strong> y
Yes ok <b> y are still technically valid in HTML5, their use is discouraged in favor of <strong> y , respectively; This is because they provide additional semantic meaning, indicating that the text is of importance (<strong>) or emphasized (). So instead of:
<b>Important text</b> e <i>Emphasized text</i>It would be better:
<strong>Important text</strong> y <em>Emphasized text</em>From the Frames <frame> y <frameset> to CSS Grid and JavaScript
The tags <frameset> y <frame> They allowed the browser window to be divided into several sections that could display different HTML documents. These tags are no longer supported in HTML5. Instead, you can use CSS Grid to create complex layouts and combine it with JavaScript if you need to load dynamic content. A simple example of a two column layout in CSS Grid would be:
.container { display: grid; grid-template-columns: 1fr 2fr; }And the corresponding HTML:
<div class="container">
<div>First column</div>
<div>Second column</div>
</div>Of the <marquee> to CSS Animations
The label <marquee> It was used to create text that scrolled across the screen, and although it could be fun, it was not practical or accessible at all. Thanks to CSS3, we can now create advanced animations and completely control their behavior. For example:
@keyframes offset { from { transform: translateX(100%); } to { transform: translateX(-100%); } } .marquee { display: inline-block; white-space: nowrap; overflow: hidden; animation: scroll 10s linear infinite; }Of the Indiscriminate Use of <div> to HTML5 Semantics
Before HTML5, the <div> was the king of page layout and structure, but this has changed with the introduction of semantic elements. Now we have , , , , and more. For example, instead of:
<div id="header">...</div>
<div id="navigation">...</div>I encourage you to use:
... Conclusion and Additional Resources
Transitioning from outdated tags to modern HTML5 alternatives is not just a matter of staying up to date with technology. It is also a way to improve accessibility, compatibility between different devices and browsers, and optimize the SEO of our web pages. If you need more help or have questions about updating your code, feel free to visit NelkoDev and if you need to contact me directly, you can do so through this link. The web is constantly changing, and it is our duty as developers to keep our code up to date and follow best practices.
Remember that updating your code is not simply replacing one tag with another; is to consider the purpose of each element in your document, how it will impact usability and accessibility, and how it will relate to the rest of modern web technology. Happy coding and continue learning and improving!
English 
Spanish