Disabling Obsolete HTML Tags

There are a number of HTML tags that were introduced long ago where the tags have then subsequently deprecated as there are better ways available to achieve the same effects. In most of these cases the better way that has been introduced is to use CSS. For example in the early days the way of centring content was to use the <center> tag. This was then superseded with <div class="centre"> which in turn was superseded by the CSS margin:0 auto; for block elements and text-align:center; for inline elements.

Despite the older ways of doing these things which should no longer be used when writing new web pages the browsers still support the old ways of doing them. This is to allow for the many old pages on the web that were written before the newer ways of doing things were supported. Unfortunately the fact that these tags continue to be supported means that there are some people who unfortunately write pages that use those tags even now rather than doing it properly.

By using the Firefox web browser with the Stylish plugin we can easily add our own stylesheet commands that will be applied to whatever web pages we want to apply them to. As an experiment I decided to write some styles into stylish to tell the browser to ignore the long deprecated tags so as to see the pages the way they will really look once browsers finally drop support for those long unnecessary tags. (Note that there are lots of deprecated attributes as well but I decided to limit myself to just diusabling old tags for the moment). The code to disable deprecated tags is:

center {margin:0 !important; text-align:left !important;}
basefont, font {font-family: inherit !important; font-style: inherit !important; font-size: 100% !important; color: inherit !important; }
s, strike, u {text-decoration: none !important;}
isindex, applet {display: none !important;} dir, menu {display: block !important;}

Any web pages where you instruct Stylish to apply that CSS will have the effect of negating the meanings that those tags had back when they were used and you will see the web page the way that the stylesheet says it should look. I was surprised to see how many pages ended up with their content left aligned instead of centred and with text in a different size, colour, and font than when the tags are not overridden which just goes to show how many web sites there are that continue to use the really antiquuated <'center> and <font> tags that they should have stopped using about 10 years ago.

There are also a number of proprietary tags that some browsers introduced which are specific to that browser. A couple of examples are the <'bgsound> tag specific to Internet Explorer (which is therefore ignored in Firefox anyway) and the <embed> tag that Netscape introduced to allow files to be attached before the standard <object> tag was supported by all browsers. While cancelling out the deprecated tags I decided to also cancel out the proprietary embed tag. That had an unexpected side effect. As well as it causing the browser to ignore embed tags actually within the web page it also had the effect of causing all multimedia files that were simply linked to from another page to not display either. It appears that Firefox itself generates embed tags internally to handle the display of multimedia files. This makes turning off the embed tags within a web page without also disabling Firefox's multimedia capability for independent files somewhat more complex. The best solution to this that I could come up with is to disable all embed tags apart from those that immediately follow the body tag. That allows Firefox th generate a body and embed tag around linked multimedia content while disabling all embed references within a web page except for those coded as <body><embed> and since most people mistakenly using embed do not have it as the first tag within the body this code should come very close to achieving the desired result:

embed  {display: none !important;}
body>embed:first-child {display: block !important;}

That not all browsers understand what body>embed:first-child means doesn't matter in this instance since the one browser we are using it in does understand what it means.

The final thing that I thought I'd look at is the <table> tag. Now this tag isn't deprecated because it is a perfectly valid tag when used for its intended purpose of displaying tabular data. The problem is with all the sites that misuse the tag to do the page layout instead of doing it correctly via the CSS. We can't therefore simply disable the tag the way we have with the deprecated and proprietary ones because that would kill the legitimate use of the tag as well as all the incorrect uses. I decided therefore to apply a grey dashed outline to all the tables on a web page instead. That allows you to see exactly where all the tables are without interfering much with the appearance of tables being used correctly (where it will just place grey dashes on top of the existing border around the table). That isn't going to impact on a proper table much since with correct use of the table tag a browser around the table is quite acceptable. Where the table has been incorrectly used the effect will be more noticeable since tables used incorrectly always hide their borders since the borders would make the incorrect usage obvious. By using the outline rather than the border we don't impact on the page layout at all and allow any borders that are defined for a table to display.

table {outline:1px dashed #ccc !important;}

Note that all of the properties that we are using in our styles we are adding to Stylish have the !important attribute defined. This is because the priority of applying styles is:

  1. user styles marked !important
  2. author styles marked !important
  3. author styles not marked important
  4. user styles not marked important


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow