【5分で分かる】Web制作の「セマンティック」って何？

こんにちは、Web制作学習中のすぐこです。

HTMLなどのWeb制作について学習していると、「セマンティックなんちゃら〜」「セマンティックWebがどうのこうの〜」という言葉を聞いたことがあるかと思います。

なんだか難しそうな単語ですっ飛ばしたくなっちゃいませんか！？

私も最初は「ロマンティックと何か違うんや」レベルの理解度(？)でした。

でも実は、とってもシンプルで大切な考え方だったんです。

今回は、このセマンティックという概念について、できるだけ分かりやすく、具体例を交えながら解説していきます！

この記事はこんな人におすすめ

つまりセマンティックって何？

「セマンティック（semantic）」を一言で説明すると、「意味」を表す言葉です。

例

たとえば料理で例えると、「材料を適切な場所に置く」という感じ。

お砂糖は調味料コーナーに、お野菜は野菜室に…というように、意味のある配置をすることです。

このように、「言葉」から連想される「意味」をコンピューターにも理解させるための技術が「セマンティックWeb」です。

「言葉の意味」を理解できるようになることで、コンピューターはより高度な情報処理が可能になります。

例えば、従来の検索エンジンでは、「りんご　レシピ」と検索した場合、「りんご」と「レシピ」という単語がページに含まれているかどうか？で検索結果を表示していました。

しかし、「セマンティック」の技術が使われると「りんご」と「レシピ」の関連性に加えて、「りんごの種類」、「レシピの難易度」、「季節」など、様々な情報を考慮して、よりユーザーのニーズに合った検索結果を表示できるようになります。ふつうにゴイス。

Webサイトに「セマンティック」を取り入れることで、検索エンジンがページの内容を正しく理解しやすくなり、検索結果の上位に表示されやすくなります。

SEO的にとても重要な技術なんですね！

「セマンティック」は、Webサイト制作においても重要な役割を担っています。

Webサイトを制作する際、HTMLというマークアップ言語を使用します。

HTMLでは、

などを表現するために、様々なタグを使用しますよね。

従来のHTMLでは、これらのタグは主に「見た目」を表現するために使用されていました。

しかし、「セマンティックWeb」の考え方が広まるにつれて、「意味」を明確にするためのタグが重要視されるようになりました。

例えば「見出し」を表すタグには、<h1>〜<h6>まで6段階のタグがあります。

かつては単に見出しの文字サイズを調整するために、これらのタグが使用されることがありました。

「セマンティックWeb」の観点ではそれぞれのタグに適切な意味を持たせています。

このように、文書構造を明確に表現することができるようになったんです。

私は最近学習を始めたので、「セマンティックWeb」の概念を知らないままタグの意味を理解していたということになります^^;にわか〜

今回は「セマンティック」について、意味やWebサイトにおける重要性を解説しました。

「要素に適切な意味づけをする」という、とてもシンプルな概念だったんですね！

検索エンジンにも人間にも理解しやすくするために、Webサイトを作るときには「セマンティック」を意識してみてください*^^*