Over the first seventeen years of the web’s existence, HTML has undergone beaucoup changes. What was once the predominant language of the web now shares the spotlight with a variety of scripting languages, stylesheets, and other types of markup, ranging from Javascript to Cascading Style Sheets. The flexibility of modern scripting languages, separation of content and style have combined to become more like applications than the static web pages we all remember from the early days of the web.

Back in 1995, when HTML first took off with the general public, there were a number of offenders that made the Internet look aesthetically awful. Designers employed atrocious HTML elements, such as the <blink> and <marquee> tags, which only made a show of serious web coders. It’s doubtful that anyone at that time considered blinking and scrolling text fluid web design. 

In the last few years, CSS has taken off with the rise of Web 2.0 and has certainly transformed web design into a much simpler endeavor—gone are the days of having to repeat the same mundane code or navigating a sea of jumbled up HTML in search of that one inconsistency. Things have gotten better since the Nineties and early-2000s, but some web designers are still foolishly living in the past. We’ve decided to update the criteria of HTML elements that are simply outdated and have been replaced by a batch of shinier, better CSS elements. If 1997 was the last time you’ve had a crash course in web design, than read on to learn a few new things about this versatile web world.

Design Fumbles

<frame>

Back in the day, the main appeal of frames was that you could insert repeated chunks of HTML, such as a navigation bar, in multiple pages without having to reload a side menu bar for each page view.  Regardless of their good intentions, frames were never user friendly and really did a number by confusing search engines—if a search query matched a site as a whole, the search engine would return the frame set, though sometimes it would link to the wrong frame, confusing the user. Having a search engine recognize the correct page link was especially crucial if you wanted to increase your chances of receiving even average traffic numbers. Add that to the fact that this element embodies the epitome of tacky web design and there was never a right way to beautify this particular design faux-paux.

There is only one reason for using frames and that’s so search engines like Google can differentiate their site from others. Frames will never fit the conceptual design of the web. 

The Modern Alternative: Opt for a simplified CSS template with a minimal navigation bar.  Place the navigation at the top of the page for easy access and make sure that it reoccurs on every page. If you keep the layout consistent throughout your website sections, users should have no problem even loading the pages, since CSS is a much lighter way to lay out a website.

<table>

Tables are the most misused HTML element of all time. They are constantly used for laying out web sites, though their original intention was to provide structured data. Take our benchmarks tables, for example.

Back in the day, not all browsers supported CSS. So, tables became the standard for formatting webpage layouts and designers put parts of their content into specific arrangements within the columns. Even Adobe ImageReady’s image slicing plug-in exported the final product into tables and web design software perpetuated this erroneous trend. 

The table element was never really meant to layout an entire site. Using it clutters up your web code and unnecessarily bogs down the page’s file size, which could affect the bandwidth of your server and your visitors.

Tables are also incredibly labor intensive. For each cell, you’d have to write out the element and make sure to close the tag.  In between closing the <tr> tag and making sure you didn’t leave a <td> tag open, the final product could turn out pretty disastrous. It’s also difficult to get each cell to do exactly what it’s specified it to do, and that’s primarily because, as reiterated, tables were never meant for designing web pages.

The Modern Alternative: Now that CSS has been refined and is compatible with all browsers, it’s become the standard for all web design. CSS not only radically reduces the weight of your website, it allows it to load at a faster rate and makes it available on a variety of platforms, including mobile web. CSS also make redesigns easier, since all you have to do is change the properties of your stylesheet instead of editing each page at a time.

A great way to get started and familiarize yourself with CSS is to find a site with free templates and practice laying out your own design. For those who learn better by doing, this is an incredibly effective way to learn how to manipulate stylesheets.

<imagemaps>

The image map is a list of coordinates on a specific image that are clickable and link to another page. Adobe ImageReady, Dreamweaver, and GIMP all contain plug-ins to map out image map coordinates and export them to HTML. 

Many sites use this element for their navigation bar, but it is one that should be avoided unless the situation requires otherwise. Generally, image maps are not very accessible and can be confusing to the average web user, especially if there’s no obvious indication. And, should there be a server timeout and your user is left with no image, rendering navigation around your site impossible.

The Modern Alternative: If the information you’re presenting is best exemplified visually than in text, use the image map. For example, in an educational setting, you could use a map of the United States, with each state linking to a page full of important factoids and information about that state.

Otherwise, a nicely designed navigation bar at the top of a page is easily noticeable and not at all confusing. You can use a CSS template to navigation bar. Make sure to use simple terms like “make your own buttons", or get creative using Photoshop to fully customize your own "home” and “about”.

Text Offenders

<font>

The font element specifies the font face, size, and color of your text. However, the <font> tag is limited in style options—only font face, size, and color can be formatted— and you’d have to write additional code to add any sort of text decoration, such as bolded text.

<font face="comic sans" size="3" color="red">Maximum PC</font>

Font elements also need to be applied at the instance of every new element. For example, if you’re using the paragraph element and are closing that tag, your font element is, by default, closed with it. So, you have to reestablish that element at the start of your next <p> tag, and repeat this process throughout your layout code. There is certainly too much code clutter when using this element.

Additionally, the <font> tag is a major hindrance because it means that the coder made a basic assumption about the web user’s browser and configuration.

The Modern Alternative: With the integration of easy-to-use style sheets in today’s web design, the font element is almost considered ancient history. Using CSS, you can apply properties to various forms of the font element with just one single batch of code.  You can establish your heading and link elements at the start of the document without having to repeat any sort of code each time you want to use that specific element.

In addition, not only does the CSS lighten the load of code in the page source, but should the site requires a color theme redesign, all it takes is tweaking the appropriate hex values in the stylesheet.

<b> and <i>

The Web Hypertext Technology Working Group (WHATWG) specifies that both the <b> and <i> tags are to be used as a last resort when no other element is more appropriate.

<b>Maximum</b><i>PC</i>

The truth is: it’s all semantics. The <b> tag does not specifically imply a strong emphasis on a particular word, nor does the <i> tag indicate that there is light emphasis. You could argue that you want the elements to convey either meaning.

The bold and italic font elements do not have to be considered illegal. Rather, it’s that they’re hardly used in the proper context. The <b> and <i> tags should never be used solely for the purpose of stylizing text and especially not for headers. After all, that’s what CSS is for.

The Modern Alternative: Use the <strong> and <em> tag to bold and italicize, respectively.

And what about underlining? W3schools.org, the leading opinion on fads in web coding, deprecate the <u> tag and strongly advise against it, especially since a user could confuse underlining text for an active hyperlink.

<small> and <big>

The point of small and big is to indicate text as either very important or not important at all.  However, web designers and bloggers alike have made the mistake of using this particular element to actually set the font size of their body text.

The problem is that some browsers actually ignore these elements all together.  In particular, <small> was supposed to simulate small caps, but the result is that the text is actually just a size smaller than the default.

<big>Maximum</big><small>PC</small>

The Modern Alternative: Specifying your body text and headers at the beginning of your code is the most organized way to manage fluidity in your body text.

If you’re writing something that requires citation, there is actually a citation tag, which is <cite>. Use this for attributions where applicable.

<bdo>

This tag allows you to set the text decoration of your text. When applied, the <bdo> will make your text display backward, with letters flipped horizontally.

<bdo>Maximum PC</bdo>

The Modern Alternative: If your goal is to specify the alignment of text, use paragraph elements, such as the <div> tag. You can add whether you want your text to align to the left, right, center, or justified.