Sunday, September 26, 2021

How Does the Removal of Current HTML Elements Help

There has been a great deal of buzz on how HTML5 will change how web developers work and think. In this article we are going to take a close look at those elements which are are going away, why they are being phased out and alternative HTML5 options for those elements.

Depreciated HTML5 Style Elements

The set of elements listed here are primarily being phased out because they have transitioned to the Cascading Style Sheet (CSS). The functionality provided by each element listed here can now be achieved by either defining a style in your CSS file or as an inline style definition as part of another element like <span> or <div>. With each element I will show you the way it worked in HTML4 and an example of how to do it in HTML5 within a <div> or <span> element.

basefont – This element never got much play when it was introduced and was deprecated long ago, so odds are you have never used it and won’t miss it anyway. Its job was to define the font size for the document. That would be accomplished by adding the element within the document and from the element forward the default font size would become what was set in the size attribute of the element unless you specifically defined another basefont element or dropped in a specific style as part of a <span> or other similar element. The examples:

The HTML4 way:
<basefont size=”4”>My text in large size.<br />
(notice there was no ending tag)

The HTML5 option:
Just set the font size with CSS like this:
<span style=”font-size: large;”> My text in large size.<br /></span>
or <span style=”font-size: 14pt;”> My text in large size.<br /></span>

big – The big element was a simple inline element that was designed to highlight text by bumping it up one size larger than the default or currently set font size. The idea was to create something more visually significant than the standard bolding or italicizing of text. Personally, I never really liked this approach because it would always throw off your line spacing, but that’s just my personal preference. Here are the examples for this element:

The HTML 4 way:
My really <big>big</big>  text.
(worked just like bold <b> or italics <i>)

The HTML 5 option:
Just set the font size inline with CSS like this:
My really <span style=”font-size: large;”>big</span> text.
(provides better control than big ever did)

center – I admit it, this element is one I liked to use. It was quick and easy, maybe a little too easy, and simply centered whatever you put within its tags. But, in the overall plan to move all style and presentation handling to CSS, I support the decision to remove it.

The HTML4 way:
<center>My centered  text.</center>

The HTML5 option:
Just place the text and other elements within a div tag and set text-align to center:
<div style=”text-align: center;”> My centered text.</div>

font – Again, this is an element that has moved over to CSS where it makes more sense. By using CSS you can define your font styles once and apply them to all pages instead of using the <font> element over and over again. You shouldn’t be sad to see this one go unless you are responsible for updating an old website that made extensive use of <font>. If that is the case, I truly feel for you.

The HTML4 way:
<font size=”2” face=”Courier” color=”white” bgcolor=”black”>My defined  text.</font>

The HTML5 option:
Define the font styling in CSS and reference that within a <span> tag:

CSS definition: 
.MyCssClassName { font: Courier; font-size: medium; background-color: Black; color: White;}
<span class=”MyCssClassName”>My defined  text.</span>

Tip: If your <font> elements have already made use of CSS style definitions,( e.g. <font class=” MyCssClassName”>My defined text.</font>) then you can do a quick find and replace to change your <font> tags into <span> tags and quickly be HTML 5 compliant.

strike – This element is a real old-timer and has been around since HTML 2.0. Its purpose is to change text to strikethrough text. It is equivalent to the <s> element which is also deprecated but has not gone the way of <strike>, yet.

The HTML4 way:
My <strike>strikethrough</strike>  text.

The HTML5 option:
The text-decoration style definition now handles strikethrough and is called line-through:
My <span style=” text-decoration: line-through;”>strikethrough</span>  text.

tt – The purpose of this element was to apply a teletype (i.e. monospace) font to the selected text. This is another golden oldie from HTML 2.0 that most developers have never had occasion to use.

The HTML4 way:
My <tt>monospaced</tt>  text.

The HTML5 option
You can achieve the same results and have better control over presentation by simply selecting your own monospaced font like Courier:
My <span style=” font: Courier;”> monospaced </span>  text.

Frame Elements

It was foretold many years ago that support for frames would be going away one day. Well, that day has come. What started out as a great idea, at least in theory, ended up becoming a cumbersome and convoluted mess in practice. The frame elements almost always ended up being more effort than they were worth and many web developers had trouble getting pages to work properly and consistently, especially across different browsers. Because of these factors and, as the W3C puts it,  “using them damages usability and accessibility”, the frame elements listed below will be going away in HTML5.

frame – This element was used to define attributes and content of a <frame> within a <frameset>.

frameset – This element defined the overall “shell” of frames for the page. <frame> elements were then defined within the <frameset> element.

noframes – This element was designed to provide an alternative display for browsers that did not support frames. Content was placed within the <noframes> element which would only be displayed when a browser did not support frames.

There are no examples here for the frame elements because there is simply no real equivalent in modern day web development. Frame elements were quite unique, however there are much more efficient and manageable ways to achieve what frame elements were intended to do through CSS and other techniques.

Miscellaneous Elements

There are several miscellaneous elements that are going away which do not really fit in a category, so I have just listed them here.

acronym – This element was an inline element used to define selected text as an acronym. It was a rarely used element but it does have a “replacement” in the abbreviation element (<abbr>).

The HTML4 way:
My <acronym title=”Stupid Weird Acronym”>SWA</acronym> acronym.

The HTML5 option:
The element essentially identical to <acronym> and is intended to provide additional information for browsers, search engines, etc., although I don’t see many developers taking the time and effort to mark it up:
My <abbr title=”Stupid Weird Acronym”>SWA</abbr> acronym.

applet – Here we have an element that was used quite a lot, especially by web design software like FrontPage. Its purpose was to run embedded Java applets within a page. It was deprecated in HTML4 because the <object> element was much more robust alternative to <applet>.

The HTML4 way:
<applet codebase=”Java/” code=”MyApplet.class” width=”400” height=”200”>
<param name=”SomeName” value=”123”>
<param name=”SomeOtherName” value=”456”>

The HTML5 option:
Unlike <applet>, the <object> element can also handle Flash, videos, ActiveX, PDF, images and audio:
<object codetype=”application/java” classid=”java:MyApplet.class” width=”400” height=”200”>
<param name=”SomeName” value=”123”>
<param name=”SomeOtherName” value=”456”>

isindex – This is one of the more peculiar and obsolete elements still in play. It too is a holdover from HTML 2.0. Its sole purpose is to provide a single text input field for your page. The idea was that it would provide a quick and easy way to create a search page for your website. This was a fine idea when it was introduced but web development has evolved well beyond any practical use for this element today.

Since it such an odd element I am not going to bother showing you how it works in HTML4. Just keep building your search functionality with buttons and input text boxes in forms and purge <isindex> from your mind. These are not the droids you are looking for.

dir – The last of our holdovers from HTML 2.0 is <dir>. This element is just another way to make an unordered list <ul>. It is therefore being removed because it is simply redundant not standard compliant (i.e. no closing tag </li>) as you can see from the examples:

The HTML 4 way:
<li>Item 1
<li>Item 2
<li>Item 3

The HTML 5 option:
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>


As you can see, there are very few elements that will be missed in HTML5. The vast majority of these elements have long outlived their usefulness. The decision to remove elements such as <font> and <big> will force developers to move the handling of presentation to CSS where it belongs. It will also remove inherently problematic elements (i.e. frame elements) and consolidate other elements into newer more robust ones. In all, every element removed in HTML5 will help us become better and more efficient in our development. Happy coding!

Popular Articles