こんにちは！フロントエンドの世界へようこそ。

HTMLを学び始めると、まずは `

` で見出しを作ったり、`

` で文章を書いたりすることに夢中になりますよね。「お、自分の書いた文字がブラウザに表示された！」というあの瞬間の感動は、何度味わってもいいものです。

でも、少し慣れてくると「`class` って何？」「`id` とか `title` って本当に必要なの？」と、タグの横にくっついている「謎の単語たち」が気になってくるはずです。

これらは「グローバル属性」と呼ばれる、いわばHTML要素に後付けできる「名札」や「ラベル」のようなものです。今日は、この便利なツールたちを、日常生活の道具に例えながら紐解いていきましょう。

—

HTMLの要素（`

` や `

` など）は、いわば「箱」です。中身を入れるための箱ですが、それだけだと「どれがどの箱か」を後から区別したり、ルールを決めたりするのが大変ですよね。

グローバル属性は、どの要素にも共通して付けられる「共通のプロフィール」です。いくつか代表的なものを、身近な例で見てみましょう。

`id` は、そのページ内で「絶対に重複してはいけない」唯一無二の識別番号です。
例えば、学校の出席番号や、マイナンバーカードのようなものですね。「この番号の人！」と言えば、特定の誰か一人を確実に指し示すことができます。

`class` は、「同じグループの仲間」であることを示すラベルです。
クローゼットの中にある「冬服」や「仕事着」といった分類に近いですね。複数の要素に同じ名前をつけて、「これらは同じデザインにしてね！」と後からCSSで一括指示を出すときによく使います。

`lang` は「この要素の中身は何語か」を指定するものです。
ブラウザや読み上げソフトに対して「ここは日本語ですよ（ja）」と教えてあげることで、正しい発音で読んでくれたり、翻訳機能が正しく働いたりします。

—

では、これらをどう使うのか、簡単なコードを見てみましょう。コピーしてエディタに貼り付けてみてくださいね。

今日はとてもいい天気でした。

公園でコーヒーを飲みました。

This is a beautiful day.

—

ここで、「全部の要素に全部書かなきゃいけないの？」と不安になった方もいるかもしれません。

安心してください。そんなことはありません！

グローバル属性は、必要なときに、必要な分だけつければいい「オプション」です。

料理でいえば、塩やコショウのようなものです。素材（HTML）そのままでも美味しいですが、味付け（属性）をすることで、もっと便利に、もっと使いやすくなる。そう考えてみると、少し気が楽になりませんか？

`title` 属性は、マウスを要素の上に置くと小さな吹き出しが出る便利なものですが、スマホにはマウスがありません。そのため、重要な情報は `title` に頼りすぎず、しっかり本文に書くのが「優しいWebサイト」を作るコツです。

—

HTMLを書くことは、誰かに手紙を書くことと似ています。「ここが一番大切な見出しですよ」「ここはグループでまとめましたよ」と、読者やブラウザに優しく伝えること。

グローバル属性をうまく使うと、あなたの書いたHTMLは単なる「文字の羅列」から、「意味を持った構造物」へと進化します。

最初は難しく感じるかもしれませんが、まずは「`class` でグループ分けしてみようかな？」くらいの軽い気持ちから始めてみてください。それができれば、あなたはもう、立派なフロントエンドの入り口に立っていますよ！

分からないことがあっても大丈夫。一つずつ、楽しみながら積み上げていきましょうね。