what are Semantics, Anyway?

Semantics in regards to HTML means using only markup and attributes that convey the structure and meaning of a document. This is important because it is the method in which HTML is now intended to be used, and using deprecated tags will cause issues. It also offers consistency of styling, e.g. If you want to change the style of all links you can simple change it with a few lines of CSS and it will be applied globally.

An Example

For instance, if you have a header for an article, instead of using

<font size=”5″ face=”Arial”>Heading</font>

you would simply use

<h2>Heading</h2>

and style the <h2> element in CSS.

As for Attributes, say you wanted to change the background color of your page, instead of using

<body bgcolor=”#000″>

you would use simply leave <body> as it is and style it in CSS:

body { background: #000; }

These HTML tags and attributes change how your page looks are called Presentational Tags. They were made before CSS hit the big time. These days we separate our content from our styling. Presentational tags are a big no-no when it comes to writing semantic HTML. Right now you might be asking “But Daniel, if <b> and <strong> do the same thing, why do I need to use one over the other?” The simple answer is that they do not do the same thing. Most browsers render them the same way by default, yes, but assigning <strong> allows you to style strong text in ways other than just having making it bold, like a special font, text color, etc… It also assigns a meaning to the tag (It’s “strong” text, meant to stand out), whereas <b> simply describes what the text should look like (b stands for bold.)

The Hit List

Here is a list of all the presentational tags and attributes. Please note that most of these elements and attributes are deprecated in HTML 4.0.1 STRICT- Yet another reason not to use them!

The Tags

  • <b>
  • <u>
  • <i>
  • <big>
  • <small>
  • <tt>
  • <hr>
  • <sub>
  • <sup>
  • <font>
  • <center>
  • <menu>
  • <layer>
  • <blink>
  • <marquee>

The Attributes

Note that I am only listing presentational attributes that in my opinion have no value, simply because some of the more presentational attributes are still needed for a few types of HTML elements (A very small amount, and if you really needed to you could style them with CSS.)

  • alink=””
  • link=””
  • vlink=””
  • background=””
  • bgcolor=””
  • target=””
  • align=””
  • width=””
  • height=””

This is not the only aspect of semantic HTML, a famous problem for web designers is misusing the <table> tag to structure layouts. Tables were never meant to make layouts, but to store tabular data! Another example is using <div> for navigation when a more semantic (meaningful) tag would be <ul>

You may also like...