【入門編】smallタグによる注釈・免責事項 – HTML実践ガイド

なぜその文字は「小さい」のか？ ``タグの本当の意味と正しい使い方

これらを作るとき、皆さんはどんなタグを使っていますか？もしかして、「文字を小さくしたいから」という理由だけでCSSでフォントサイズをいじったり、なんとなく適当なタグで囲ったりしていませんか？

実は、HTMLには「注釈や免責事項専用」のタグがあるんです。それが今回お話しする `` タグです。

「え、名前の通り文字を小さくするためのタグじゃないの？」

そう思われた方、実は半分正解で、半分は少しだけ誤解があるかもしれません。一緒に紐解いていきましょう！

—

プログラミングやHTMLの学習を始めたばかりの頃は、「見た目を整えること」に一生懸命になりがちです。でも、Webの世界で一番大切なのは、コンピュータに「ここには何が書いてあるのか？」を正しく伝えること（セマンティクス）なんです。

`` タグの本来の役割は、「文字を小さくすること」ではありません。「これはメインの文章ではなく、注釈や補足情報ですよ」と教えてあげることにあります。

これらは、Webサイトの「メインの主張」ではなく、情報の正確性を保つための「脇役」ですよね。この脇役であることを伝えるために、`` タグは存在しています。

—

ここで大切なのは、「HTMLは意味を伝える役割、CSSは見た目を整える役割」という切り分けです。

昔のHTML（かなり前ですが）は、「``と書けば自動的に文字が小さくなる」というルールでした。でも、今のWeb制作では「見た目はCSSで管理する」のが基本ルールです。

たとえるなら、HTMLは「料理のレシピ（材料の指定）」で、CSSは「盛り付け（お皿選びや彩り）」のようなもの。レシピに「小さく書く」と書いてあっても、最終的にどんなお皿（フォントサイズ）に乗せるかは、盛り付け担当のCSSが決めるべきなんです。

価格：1,000円
※税込価格。送料は別途かかります。

このように書けば、たとえ将来的に「やっぱり注釈ももう少し大きく表示したいな」と思ったときでも、CSSを一行書き換えるだけでサイト全体の注釈の雰囲気を変えることができます。これが「賢いWeb制作」の第一歩です！

—

ここで一つだけ注意点です。「細かく書きたいから」といって、記事の本文まで `` で囲んでしまうのはNGです。

もし、強調したいわけでもないのに、なんとなく文字を小さくしたいだけなら、それは `` ではなくCSSのクラスを使って指定してあげてください。

CSSのクラスを使うとき： 単に「デザインとして少し文字を小さく見せたい」だけの場合。

このように使い分けるだけで、あなたの書くHTMLはグッとプロの仕上がりに近づきます。「意味」と「見た目」を分けること、最初は難しく感じるかもしれませんが、少しずつ意識してみてくださいね。

—

いかがでしたか？

「セマンティクス（意味付け）」なんて言葉を聞くと難しく感じるかもしれませんが、要は「ブラウザや検索エンジン、そして画面読み上げソフトを使うユーザーさんに、ここがどんな情報なのかを正しく伝える」という、ちょっとした親切心のようなものです。

`` タグは、そんな「親切心」を形にするためのタグです。ぜひ、次回のコーディングから「これは補足の情報かな？」と思ったら、迷わず `` を使ってみてください。

もしまた分からないことがあったら、いつでもここに戻ってきてくださいね。Web制作の道は長いですが、一つずつ積み重ねていきましょう。応援しています！