1990年代のWebデザイン黎明期からWebデザインを勉強している人であれば、今はもう使わなくなった、あのHTMLタグを見て、懐かしい思いがするかもしれません。
実際、チャールズ・ダーウィンがビーグル号に乗ってガラパゴス諸島で「自然淘汰」について考察したように、Webの世界も移り変わりが激しく、もはや使われなくなってしまったHTMLタグがたくさんあります。

それらのタグの中には、まったくと言っていいほど定着しなかったものもあれば、当時は全盛期として頻繁に使われていたタグにもかかわらず、技術の移り変わりの波に負けて消えてしまったタグもあります。
しかし、こうした消えてしまったタグを振り返ることで、過去のアイデアを現代のWeb技術に生かすことができるかもしれません。

そこで今回は、もう使われなくなったけれど知っておきたいHTMLタグをまとめてご紹介していきます。
「ああ、こんなタグあったなあ」と思わず頷いてしまうひとは、結構なキャリアの持ち主・・・かもしれません。

もう使われなくなったけれど知っておきたいHTMLタグ7選

1. FLAME / FLAMESETタグ

frame.png
▲ かつて使われたインラインフレーム (出典:超初心者のホームページ入門)

HTML5でとうとう廃止されたタグの一つに、FLAMEタグがあります。

1990年代後半のWEBデザインは、FLAMEタグによってメニューやヘッダー、フッダーなどを切り分けていました。
こうしたレイアウトの中でも典型的なものを、「聖杯レイアウト(Holy Grail Layout)と呼ぶことがあります。

holy.png
▲ 聖杯レイアウト

FLAMEタグFLAMESETタグの中で使用し、ウィンドウをいくつかのフレームに分割する際に使用します。
分割した各フレームにどのファイルを割り当てるかをFLAMEタグで使用します。
なお、ユーザーがフレーム非対応のブラウザを使っている場合にはNOFLAMESタグで囲まれたものを表示するという仕組みです。

現在では聖杯レイアウトを組み込む際にも、FlexboxやCSS Gridを使ってレスポンシブ対応にしたり、複数のHTMLを表示する際にはiframeタグを使うことになっており、メニューなどの共通部分はWordPressで処理されるようにサーバー側でインクルードされることが推奨されています。

2. MARQUEEタグ

MARQUEEタグはInternet Explorerが独自に追加したタグで、文字を左右・上下にスクロールさせるものです。
Internet Explorer 4.0以降では、MARQUEEタグで囲んだ画像もスクロールできるようになりました。
デフォルトでは右から左方向にスクロールする動作を繰り返しますが、属性を設定することで挙動を変えることも可能です。

marquee.gif
▲ MARQUEEタグで自由に動かした文字

当時、HTMLは静的で動きのないものだったので、MARQUEEタグのように動きをつけることができるタグは大変貴重な存在でした。
ニュースピッカーのように、更新情報を伝えるのにMARQUEEタグがよく使われました。

しかし、もともとInternet ExplorerのライバルだったNetscapeがMARQUEEタグをサポートしていなかったので、徐々にJavaScriptを用いて動きを表現する方法に取って代わられ、HTML5では最終的に廃止されるようになりました。
一方、CSS3ではそれを受けてCSS Marquee Moduleというプロパティ群が策定され、現在ではCSSによってMARQUEEの挙動を制御することができます。

ちなみに、Googleでは、「marquee html」で検索すると検索数がスクロール表示するというのを楽しむことができます。

3. BLINKタグ

MARQUEEタグと同じく頻繁にテキストに用いられていたタグの1つが、BLINKタグです。
BLINKタグを使用すると、チカ・チカと文字が点滅するようなアニメーションを加えることができます。

blink.gif
Google検索で「blink html」と検索すると、検索結果のblinkの文字が点滅する

もちろん、残念ながら、このタグも同様にHTML5で廃止されてしまいました。
そもそも文字の点滅はいくつものアクセシビリティ標準において認められていないため、現在ではブラウザがBLINKを無視するように設定されています。
(「文字の点滅」は感受性発作(光源性てんかん)を持つユーザーが発作を引き起こす可能性があり、弱視等を持つユーザーにとっても画面を拡大する危険性があるため危険だという理由です)

ただし、同様の挙動がどうしても必要な場合は、CSSのキーフレームを使って再現することは可能です。

@keyframes condemed_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

4. BGSOUNDタグ

sound-it.png
▲ かつてはInternet Explorerで音声を再生できた (画像はイメージ)

効果音やBGMを再生するInternet Explorerの独自仕様で、BGSOUNDタグというものが用意されていました。
このタグHEADタグ内に記述し、MIDIファイル(.mid)・WAVEファイル(.wav)・AIFFファイル(.aif)・AUファイル(.au)の再生が可能でした。
さらにInternet Explorer 4.0以降では、新たにbalance属性が追加され、左右のバランスを調整することも可能になりました。

しかしながら、やはりInternet Explorer独自の仕様だったため、Netscape Navigatorなどの他のブラウザでは無視されることから、多くはEMBEDタグを使用して音楽再生を行いました。
HTML5では、BGSOUNDタグは廃止され、その代わりにAUDIOタグに置き換えられました。

AUDIOタグではOGGファイルやMP3ファイルの再生にも対応しており、src属性でアドレスを指定するだけで簡単にWebページ上で音声を再生できるので、BGSOUNDタグに比べて格段に便利になりました。
ただし、急に音声が再生されるとユーザーはびっくりするので、使用には注意が必要です。

5. CENTERタグ

意外と現在も使っているひとが多いかもしれませんが、CENTERタグHTML5で廃止されました。

center.png
▲ 現在ではCSS側で中央寄せする (出典:Stack Overflow)

このタグは中央揃えする場合に便利なタグですが、基本的にはHTMLは情報のマークアップを行い、見かけに関する部分はCSSに分担するのがベストという考え方から、CSSのtext-alignプロパティやFlexboxなどを使って中央揃えにするのが好ましいのです。

また、

という記述もよく見られますが、こちらも同様にスタイルシートによるセンタリングに置き換えましょう。

6. FONTタグ

同様の理由で、FONTタグも現在では使わないタグの一つです。

ブログサイトなどを運営したことがある人なら、テキストエディタで色をつける際にFONTタグで自動的に色が囲まれた経験があるかと思いますが、その方法は現在ではやってはいけません。
見かけに関する部分はCSSの仕事なので、文字の大きさや色はCSS側で指定します。

scale.png
▲ かつてはHTML側で文字の大きさを指定していた (出典:Web Alice)

実際、FONTタグの恩恵にあずかっていた人も多いと思います。
しかし、フォントに関する指定は、やはりCSSによる指定のほうがはるかに自由度も高く、変更も容易になるので、これからはCSSを使うようにしましょう。

7. STRIKEタグ

打ち消し線を引く際に活用していたSTRIKEタグ
こちらも、HTML5にて廃止されてしまいました。

strike.png
▲ まだ多くのエディターでStrikeのなごりが残っている (画像はイメージ)

打ち消し線は、過去の情報を取り消して更新したことを伝える際に非常に便利な方法ではあります。
多くのブラウザでサポートされていたSTRIKEタグですが、今後は削除した情報であることを表すためにはDELタグを使うようにしましょう。
それ以外の装飾に関してはtext-decoration: line-throughを指定することになっています。

まとめ

1990年代には当たり前のように使われたタグの中でも、HTMLCSSの棲み分けがはっきりとしてきたあたりから次第に使われなくなってしまったタグを紹介いたしました。
レイアウトや文字の装飾など、見た目をつかさどる部分に関してはCSSが、音声や動画技術などブラウザエンジンの発展によって改良されたものに関してはHTML5のタグがその役割を担っています。

しかし一方では、現在当たり前に使われているタグの中でも、数年後には使っていないようなタグも多く存在するかもしれません。
そうならないように、常に幅広い分野で情報をキャッチアップすることが、現代のWeb担当者に必要とされていることかもしれません。