Deprecated Tags and Attributes

What is a deprecated tag or attribute?

• E10a - (3:22)
  • The definition of deprecate is: to express disapproval of.
  • In the context of html, deprecation means that the W3C (Worldwide Web Consortium ) recommends that you avoid using the tag or attribute because there are better ways to do what had been done in the past, and new browser versions may stop working with deprecated items.
  • At the root of most deprecation are these principles:
    • Content and appearance ought to be separate.
    • HTML tags ought to define types of information, not their appearance.
      • Note that HTML4 has very limited variety of tags for identifying types of information. HTML5 has many tags that are far better suited for identifying types of information, such as article, aside, footer, nav, section, details, figure, and so on.
    • For your reference, here are lists of HTML tags (elements) and attributes including:
      • HTML4 deprecated tags and deprecated attributes.
      • HTML5 has additional deprecated tags and attributes, but note that this link also lists some things deprecated in HTML4.
      • XHTML tags
  • This course does not suggest you use deprecated tags, it just informs you that browsers support most of them and that they are still being used, generally in what are referred to as legacy pages, which usually simply means old code.
    • Using them is usually not an appropriate strategy - CSS is the best strategy.
  • However:
    • Most deprecated tags and attributes are still fully supported by browsers.
    • They will probably be supported for years to come because there are so many legacy web pages out there that use them.
    • You will come across them in your work, and you may need to be able to work with them if your client, or your brother-in-law, doesn't want to redo their entire site properly.
    • Deprecated tags and attributes are also still quite useful at times for special situations.
    • They are usually easier to use than their css counterparts.
  • Therefore, it is wise for you to become acquainted with them.
  • It is best not to use them, but, if you use them, use them very sparingly and only temporarily.
  • Note:
    • The web is in a constant state of change.
    • HTML4 is being gradually replaced by HTML5 which will also replace what is called XHTML.
    • HTML5 is still in development as of this writing and is expected to be so for another eight or nine years, but browsers are beginning to support parts of it.
      • HTML5 offers some exciting (maybe you're not but I am) new tags that provide far better options for identifying types of information.
    • CSS has some properties that are not supported or barely supported.

Deprecated tags and attributes that you will still find on the web

For the following, please refer to the example code on this page.

• E10b - (2:38)
  • The font tag and the attributes that it uses:
    • <font color="red" face="arial, helvetica, sans-serif" size="4">text</font>
• E10c - (2:41)
  • <big> </big> tag
    • The <big> element is deprecated in HTML5, but not earlier versions.
  • <small> </small> tag (not deprecated)
    • Interestingly, the <small> tag will probably not be deprecated in HTML5, although there is some debate about it.
    • The small tag is intended to mean, not diminutive appearance, although browsers will display it that way, but rather "small" in the semantic sense, as in the small print.
• E10d - (4:39)
• Most of the attributes in this section were not deprecated in HTML4 but will be in HTML5:
  • Deprecated table attributes
• <table>
  • border
  • cellpadding - the space between the content of a cell and the cell walls
  • cellspacing - the space between cells
    • Note that if you want to have space between table cells, this attribute is required for Internet Explorer because it does not support the css border-spacing property before version 8.
• <th>, <td>
  • align - aligns cell content horizontally
    • values:
      align = left (default), center, right
      
  • valign aligns the contents of the cells vertically
    • values (not deprecated in HTML4):
      valign = top, middle (default), bottom
• E10e - (5:25)
  • background color and background image attributes
    • bgcolor (for background color)
    • background (for background images) attributes
    • Both can be used in these tags: body, table, th, td, div
• E10f - (2:21)
• align=center, left, right, works with the following tags among others:
  • p
  • h1-h6
  • table, td, th, tr
• <hr> tag attributes
• <center>anything</center>
• E10g - (3:49)
  • img tag's deprecated attributes:
    • vspace - provides empty space above and below the image
    • hspace - the same, but to the left and right of image The image of the cherries has 50 pixels of hspace.
    • align=
      • left and right values cause the surrounding test to flow to the sides of the image.
        • This effect is mimicked by css floats.
        • Other alignments are available that align the image relative to surrounding text.
        • Note that align=center does not work with the image tag.
    • border (use border=0 if the image is a link to prevent there being a blue outline.

Framesets:

• E10h- (5:16)
• Framesets are deprecated in HTML5 and not included in the XHTML specifications, however, they are included in HTML4.
• Not used much any more.
  • Problems with search engine indexing, book-marking, printing
• Similar to includes and iframes.
  • Inserts different files into the same page.
  • Separate files are assembled by your browser's layout engine based on the frameset file.
• Scrollbars often do not go to the top of the page or the full width of the page.
• Demo file contains:
  • One frameset with two frames.
  • One of the two frames includes a nested frameset with two frames in it.
  • There are four files needed for this example:
    • The frameset file that defines the heights of the rows and the width of the columns.
    • Three frames files that populate the three frames called for by the frameset file.

Assignment:

E10i - (6:29)

The purpose of this assignment is to further acquaint you with some of the html tags and attributes covered above. They still work in most browsers but most are no longer recommended for use. You will find them on the web at small older sites where you may need to use them to make a quick fix.

1. Create a folder named yourlastname_E10
2. Create an html file named yourlastname_E10.html and put it into the folder you just made.
3. Put a table into the file with two rows and two columns using <td> tags.
4. Put your name in a cell followed by a break tag. Then add five sentences of Lorem ipsum text.
5. Do this with all four cells.
6. Use <center> tags to center the entire table (nest the table tags between opening and closing <center> tags).
7. Insert into the table tag these attributes:
   • cellspacing=0 (note that some browsers put spacing and padding in if this value is not specified)
   • cellpadding=5
   • border=1
   • width=90%
8. Set the alignment of the top right td tag to right alignment
9. Right click on this link to download and save an image to be used as a background.
• Save it in the same folder as your html file with its original name, bgGrad.jpg  
10. Make that image the background of the table using the table tag and the following attribute and value in the table tag:
• background=bgGrad.jpg
  
11. Put a background color into the cell that is right aligned using this attribute and value:
    • bgcolor=lightyellow
    • It ought to take precedence over the table's bg image because it is more specific, closer in the code to where it is being applied.
      
12. Then save this image in the same folder as your html file:
    
    
13. Add a bottom row to your table with a single cell with the colspan=2 attribute and value.
14. Add to the cell an image tag with these attributes:
    • src=trevi.jpg
    • vspace=20
    • hspace=15
    • border=1
    • align=right
    • width=450
    • height=336
15. Underneath image tag, put in five paragraphs of Lorem ipsum text, each paragraph ought to have it's own opening and closing paragraph tags.
16. Your table ought to appear something like this.
    • The image ought to go to the right side of the table cell.
    • The border attribute will give the image a nice, clean, thin, black border, as seen on the photo of Trevi Fountain above.
    • The text will flow to the left of the image and under it.
    • Check your work.
17. Please zip the entire folder and send it to me.

Now that you have sullied yourself in the shady underworld of deprecation, go wash your hands! ;-)

© 2014 Dan Hitchcock Vaughan and licensors