HTML - 非推奨タグ

こんにちは、Web開発者の卵さんたち！今日はHTMLの興味深い側面に潜り込んでみましょう：非推奨タグと属性です。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。まずは、コーヒー（またはお気に入りの飲み物）を飲みながら、非推奨となったHTML要素の世界を探ってみましょう。

HTML - Deprecated Tags

非推奨タグとは？

本題に入る前に、「非推奨」という言葉がHTMLの文脈で何を意味するか理解しましょう。これは、Webが言う、「ありがとう、君のサービスは appreciate されたが、リタイア的时候がきた」ということです。非推奨タグとは、かつて一般的に使用されていたが、新しいHTMLバージョンでは推奨されない、またはサポートされなくなった要素です。

なぜこんなことが起こるのか、と疑問に思うかもしれません。Webは進化するに連れて、より良い、より効率的な方法でコンテンツを構造化し、スタイルを付けるようになります。これは、折りたたみ式携帯電話からスマートフォンへの移行のようなものです。確かに、古いものはまだ動作しますが、新しいものはもっと多くのことができます！

HTML非推奨タグ

では、最も一般的な非推奨タグを見てみましょう。その使用例と、今ではどのように代替しているかを示します。

`<center>` タグ

昔々、テキストを中央に配置したいときには <center> タグを使用していました。こんな感じでした：

<center>このテキストは中央に配置されています</center>

しかし、今ではCSSを使用して同じ結果を得ます：

<p style="text-align: center;">このテキストは中央に配置されています</p>

あるいは、別のCSSファイルで：

.center-text {
text-align: center;
}

<p class="center-text">このテキストは中央に配置されています</p>

`<font>` タグ

フォントスタイルをHTMLで直接変更する時代を覚えていますか？<font> タグは私たちの強い味方でした：

<font face="Arial" color="blue" size="3">これは青いArialのテキストです</font>

今では、すべてのスタイルニーズにCSSを使用します：

<p style="font-family: Arial; color: blue; font-size: 16px;">これは青いArialのテキストです</p>

`<big>` と `<small>` タグ

これらはテキストサイズを変更するために使用されていました：

<big>このテキストは大きいです</big>
<small>このテキストは小さいです</small>

現代のHTMLとCSSでは：

<span style="font-size: 1.2em;">このテキストは大きいです</span>
<span style="font-size: 0.8em;">このテキストは小さいです</span>

HTML非推奨属性

非推奨されるのはタグだけでなく、属性もです！いくつかの例を見てみましょう。

`align` 属性

以前は画像をこんな風に配置していました：

<img src="cat.jpg" align="right" alt="可愛い猫">

今ではCSSを使用します：

<img src="cat.jpg" style="float: right;" alt="可愛い猫">

`bgcolor` 属性

背景色をこんな風に設定する時代を覚えていますか？

<body bgcolor="lightblue">
こんにちは、私のウェブサイトへようこそ！
</body>

今ではすべてCSSです：

<body style="background-color: lightblue;">
こんにちは、私のウェブサイトへようこそ！
</body>

非推奨タグと属性を避けるべき理由

ブラウザサポート：新しいブラウザはこれらの古いタグや属性をサポートしていない可能性があります。
セパレーションオブコンcerns：構造（HTML）とスタイル（CSS）を分けるほうが良いです。
アクセシビリティ：多くの非推奨要素はスクリーンリーダーに優しくありません。
メンテナンス性：現在の標準を使用することで、コードが更新しやすく、メンテナンスがしやすくなります。

思い出の旅：HTML非推奨ウェブページ

では、ノスタルジックな旅に出て、非推奨タグと属性を使用したウェブページを作成してみましょう。その後、それを現代風に改造します。

古い方法

<html>
<head>
<title>私のクールな90年代のウェブサイト</title>
</head>
<body bgcolor="cyan">
<center>
<font face="Comic Sans MS" size="6" color="purple">
こんにちは、私の素晴らしいウェブサイトへようこそ！
</font>
</center>
<hr width="50%" color="red">
<p><b>私のお気に入りのもの：</b></p>
<ul>
<li><font color="green">ゲームをする</font></li>
<li><font color="blue">ピザを食べる</font></li>
<li><font color="red">映画を見る</font></li>
</ul>
<p align="right"><i>ご訪問いただきありがとうございます！</i></p>
</body>
</html>

現代的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のクールな現代のウェブサイト</title>
<style>
body {
background-color: cyan;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
color: purple;
}
hr {
width: 50%;
background-color: red;
height: 2px;
border: none;
}
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
.right-align { text-align: right; }
</style>
</head>
<body>
<h1>こんにちは、私の素晴らしいウェブサイトへようこそ！</h1>
<hr>
<p><strong>私のお気に入りのもの：</strong></p>
<ul>
<li class="green">ゲームをする</li>
<li class="blue">ピザを食べる</li>
<li class="red">映画を見る</li>
</ul>
<p class="right-align"><em>ご訪問いただきありがとうございます！</em></p>
</body>
</html>

結論

そして、ここまで来ましたね、皆さん！私たちは、HTMLの荒野時代から、今の洗練されたWebまでの旅をしました。これらの古いタグや属性を振り返るのは楽しいですが、現在の標準を追い続けることが重要です。

最後に、ここに便利な表を用意して、私たちが話し合った非推奨タグと属性をまとめました：

非推奨タグ/属性	現代の代替
`<center>`	`text-align: center;` (CSS)
`<font>`	CSSプロパティ (`font-family`, `color`, `font-size`)
`<big>`, `<small>`	`font-size` (CSS)
`align` 属性	CSS位置 (`text-align`, `float`)
`bgcolor` 属性	`background-color` (CSS)

HTMLを学ぶことは新しい言語を学ぶのと同じです。時間がかかり、練習と忍耐が必要です。実験を恐れず、間違えを恐れず – それが私たちの学びです！codingを続け、創造を続け、そして、一番重要的是に、楽しむことです！

Credits: Image by storyset

前のチュートリアル:

HTML - 文字コード