Full Stack Web Developer

HTML – Old vs. New

This page touches on a few ways HTML has changed over the last 10-20 years. (Which may be something like 100-200 years in Internet time.)

If you wrote HTML "back in the day", this primer will introduce you to new terms and techniques. Use this article as a starting point — this page was last updated in April 2016, and so could be out of date by the time you read this.

The basics of HTML have not changed — think of it as "olde-tyme" English: obviously antiquated, though generally understandable.

Tags are written in lower case

Today, all HTML tags are written in lower case, e.g. <p>, <div>, <img>.

This is strictly for style. Computers have no problem reading all-caps, lowercase, or a mixture.

Using all-caps will definitely show you're "old-school".

Separation of Content and Style

One major change is the technique of separating the content (i.e. text, images, tables) from the styling (i.e. colors, fonts).

By separating these two, this allows you to edit one without affecting the other. For example, a copywriter can write a blog post without having to make every bold tag... dark green, for example.

Likewise, a website designer can define all bold tags as dark green, without having to edit any of the content.

For a clearer example, visit CSS Zen Garden and notice how the content remains the same while the style is different.

Obsolete Tags

No more <font> tags

When styling a piece of text, use "inline CSS" and a <span> tag.

<p>LEFT <span style="color: red">MIDDLE</span> RIGHT</p>

LEFT MIDDLE RIGHT


To define a font size, use "inline CSS" to define the height. px let you define exact height, while em and % let you define a height relative to the current height.

(Spacing has been added to this example to improve readability.)

<p>
    LEFT
    <span style="font-size: 0.5em">SMALLER</span>
    MIDDLE
    <span style="font-size: 1.5em">BIGGER</span>
    RIGHT
</p>

LEFT SMALLER MIDDLE BIGGER RIGHT


When styling an entire paragraph, inline CSS can be applied to the <p> tag.

<p style="color: green">ROW IS GREEN</p>

ROW IS GREEN


When styling all the text on a page, use internal CSS or external CSS.

(No example provided.)

No more <center> tags

Instead, use inline CSS.

<p style="text-align: center">TEXT IS CENTERED</p>

TEXT IS CENTERED

No more <blink> tags

Browsers no longer support the <blink> tag.

Don't use <table> for layout

Using tables for layouts is a big faux pas today.

Instead, we use <div> tags and CSS.

There is plenty of literature on this subject.

(Using <table> tags for actual tables of data is still okay, since that is what <table> tags are meant for.)

Importance of <h1> tags

Search engines look for <h1> as clues for what the page contains. A relevant <h1> tag can improve your ranking on major search engines.

Unimportance of <meta> tags

Back in the day, it was popular to fill <meta description=""> with anything — including irrelevant terms, if it could increase traffic to your site.

Today, search engines give little-to-no weight for <meta description=""> tags.

SEO & PPC — Driving Traffic

Search Engine Optimization is about how to improve your website so search engines will list your page higher in the results. A similar phrase is organic ranking.

Pay-per-click is about how to make micro-transactions with Google to have an ad for your website appear on a person's search result.

PPC — Pay-per-click

Another subject to look into, if you're looking increase traffic to your site.


In Closing

Again, this should be a launching point for your own learning. If, for example, this article does not get updated in the next 10-20 years, you could still be reading something aptly called "back in the day".