こんにちは！Web制作の世界へようこそ。日々コードと向き合っていると、「あれ？これってどう使い分けるのが正解なんだろう？」と立ち止まってしまうこと、ありますよね。
今日は、HTMLのタグの中でも、ちょっと影が薄いけれど実は奥が深い``タグについてお話しします。
「下線を引くためのタグでしょ？」と思っているとしたら、実は半分正解で、半分は「もっと面白い使い道」があるんです。一緒に紐解いていきましょう！
—
昔の「下線」と、今の「注釈」
Web制作を始めたばかりの頃、誰しも一度は「文字に下線を引きたいな」と思って``タグを使ったことがあるはずです。でも、実はHTMLの世界では、「見た目を整えること」と「意味を伝えること」は別物として考えるのが鉄則なんです。
昔の``タグ
昔々、``タグは「Underline（アンダーライン）」の略として、ただ文字に下線を引くためだけに使われていました。でも、それだと「リンク（``タグ）」と見分けがつかなくなって、ユーザーさんが混乱してしまいますよね。
今の``タグの役割
現在のHTML（HTML5以降）では、``タグは「非明示的な注釈」を意味するものとして定義されています。
例えるなら、「手書きの書類で、ちょっとだけ補足を入れたい場所」です。
例えば、わざと誤字を残した文章があったとして、その下に波線を引いて「あ、ここはあえてこう書いてますよ」と伝えるような、そんな「ちょっとしたニュアンス」を添えるタグなんです。
—
どんな時に使うの？（身近な例え話）
想像してみてください。あなたは今、オンラインでお買い物の注文明細を見ています。
そこにはこんな文章があります。
「ご注文品：おいしいリンゴ（）」
もしこのリンゴの名前に``タグが付いていたら、システムやブラウザはこう解釈します。
「これはただの下線じゃない。この商品名には、何か特別な『注釈』や『状態』が隠されているんだな」
具体的には、こんな使い方が推奨されています。
- スペルミスがあることを示す： ワープロソフトで、間違った単語の下に赤い波線が出ますよね。あれをWebで表現するイメージです。
- 固有名詞であることの明示： 中国語などのテキストで、それが人名であることを示す際などにも使われます。
単なる「強調」なら``タグや``タグを使いますし、「リンク」なら``タグを使う。それらとは違う、「ちょっとした注釈」を添えたい時に``タグは最高の選択肢になるんです。
—
コードで見てみましょう
実際にどう書くのか、シンプルなサンプルを用意しました。コピーしてエディタに貼り付けてみてくださいね。
昨日の夕飯は「カレェ」を食べました。
カレェ
は、あえてこのスペルで書くことにこだわりがあるんです！
—
大切なポイント：デザインと意味を分ける
ここで一つ、ベテランからのアドバイスです。
「下線を引きたい」という理由だけで``タグを使うのは、なるべく控えておきましょう。もしデザインとして下線が必要なら、CSSの`border-bottom`や`text-decoration`を使うのが正解です。
「HTMLは『意味』、CSSは『見た目』」
このルールを守るだけで、あなたの書くコードはグッとプロフェッショナルなものになります。``タグは、「意味を伝えるための特別な道具」として大切に使ってあげてくださいね。
—
最後に：つまずいても大丈夫！
最初は「タグの使い分けなんて難しそう…」と思うかもしれません。でも、最初は間違えても全く問題ありません。
「この言葉に注釈を入れたいな」と思った時、ふと``タグのことを思い出してくれたら嬉しいです。少しずつ、自分の中にタグの引き出しを増やしていきましょうね。
またいつでも、Web制作の迷子になったら遊びに来てください。一緒に一つずつ解決していきましょう！
コメント