HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの非推奨タグ一覧|HTML5で廃止されたタグと代替手段を解説


HTMLの非推奨タグとは?

HTML5の登場に伴い、HTML4で使用されていた多くのタグが「非推奨(deprecated)」または「廃止(obsolete)」とされました。これらのタグは現在のブラウザでも動作する場合がありますが、将来的な互換性の問題を避けるため、新しいプロジェクトでの使用は避けるべきです。

また、タグだけでなく、一部の属性も非推奨リストに追加されています。以下の表に、主な非推奨タグとその説明、そして代わりに利用できる要素やCSSプロパティをまとめました。

非推奨タグと代替手段の一覧

タグ説明代替手段
<applet>Javaアプレットをページに埋め込む<object>
<basefont>文書全体の基本フォントを指定するCSSのfont-family
<center>テキストを中央揃えにするCSSのtext-align
<dir>ディレクトリ形式のリストを作成する<ul>
<embed>ドキュメント内にアプリケーションを埋め込む<object> / <video> / <audio>
<font>テキストのフォント・サイズ・色を指定するCSSのfont-family、font-size、color
<isindex>1行の検索用入力フィールドを作成する<input>
<listing>項目を等幅フォントで一覧表示する<pre> / <code>
<menu>メニューリストを作成する<ul> / <nav>
<plaintext>以降の内容をプレーンテキストとして表示する<pre>
<s>打ち消し線付きのテキストを表すCSSのtext-decoration: line-through
<strike>打ち消し線付きのテキストを表すCSSのtext-decoration: line-through
<u>下線付きのテキストを表すCSSのtext-decoration: underline
<xmp>整形済みテキストをそのまま表示する<pre> / <code>

非推奨タグを使い続けるリスク

非推奨タグは、見た目(スタイル)をHTML側で直接制御していた時代の産物です。現代のWeb制作では「構造はHTML、デザインはCSS」という役割分担が基本となっています。非推奨タグを使い続けると、次のような問題が発生する可能性があります。

  • ブラウザによって表示結果が異なる
  • 将来のブラウザアップデートで正しく表示されなくなる恐れがある
  • HTMLバリデーターでエラーとして検出される
  • アクセシビリティやSEOの面で不利になる

補足:HTML5で意味を変えて復活したタグもある

なお、<s>、<u>、<menu>、<embed>などは、HTML5で仕様が見直され、再び有効な要素として定義されています。ただし、従来とは異なる新しい意味を持つため、使用する際は最新のHTML仕様を必ず確認しましょう。

新しいWebページを作成する際は、非推奨タグに頼らず、セマンティックなHTML5要素とCSSを組み合わせることで、保守性が高く将来性のあるコードを目指しましょう。

  1. HTMLのbodyタグとは?基本の使い方と非推奨属性をわかりやすく解説

    HTMLの<body>タグは、Webページの本体(ボディ)部分を定義する要素です。ブラウザ上に実際に表示されるテキスト、画像、動画など、ページを構成するすべてのコンテンツは、このタグの中に記述します。 bodyタグの主な属性 かつてbodyタグには、ページ全体の見た目を制御するためのさまざまな属性が用意されていました。しかし、以下に挙げる属性はすべてHTML5で非推奨(Deprecated)となっています。現在では、これらの装飾的な指定はCSSで行うのが標準的な方法です。 属性値説明 alinkrgb(x,x,x)#xxxxxxカラーネーム非推奨 - ドキュメント内のアクテ

  2. HTML DOM スタイル transform プロパティとは?2D・3D変換の基本と使い方

    HTML DOM の style.transform プロパティは、HTML ドキュメント内の要素に対して 2D(二次元)または 3D(三次元)の変換を取得・適用するためのプロパティです。JavaScript から要素の移動・回転・拡大縮小・傾斜などを動的に制御できるため、アニメーションやインタラクティブな UI を実装する際に非常に便利です。構文transform プロパティの基本構文は以下の通りです。transform の値を取得する場合object.style.transformtransform の値を設定する場合object.style.transform = value設定できる値