HTML&CSS3 ~プログラミング研究室~: ゼロからはじめるシステム開発

HTML&CSS3　~プログラミング研究室~

　ナビゲータのEVEです。

　図書館から、4冊本を借りてきました。「HTML/CSSの絵本」、「Webデザインの基本　きちんと入門」、「HTML&CSSとWebデザイン」、そして「HTML5&CSS3デザイン」です。
　最初、簡単なところから読もうと、「HTML/CSSの絵本」から読み始めましたが、1つ気づいたことがありました。
HTML5 において、意味もなさそうなタグ、セマンティクス(コンテンツの意味)が出てきたのですが、 W3C などでは、HTMLのコンテンツの意味を明確にするために同タグの使用を推奨しているらしいということ・・・。
　まっ、タグとして追加されたのだから、意味がないということはないと思うのですが、なぜ、W3Cの意図を知らずに現在に至ったのでしょうか？そこで、10年以上前に購入した本を読み返してみました。

HTML5＆CSS3辞典第2版 [ アンク ]

価格: 2640円
(2024/11/13 14:46時点)
感想(2件)

[HTML5＆CSS3辞典]
　「HTML5＆CSS3辞典」という本なのですが、その中で、コンテンツに意味を持たせることを強く推奨していません。タグの意味は書いてあるんですけれどね・・・。まっ、辞書って書いてあるから仕方がないのかもしれませんが、ちょっと不満です。
　本の記述の書き方としては、タイトルに「・・・・したい」と記述されていて、そのやりたい内容をどうすればできるのかと言うことが記述されています。
　その中に、 セマンティクスタグ の仕様が記述されているのですが、内容を読むと画面を表示するという意味では、全く意味がありません。そんな意味ないコトって普通やりたくないですよね？作業も増えますし、 PHP でゴリゴリ作り込む部分もあるので、できれば余計な事はしたくありません。まっ、セマンティクスタグが、新たなタグとして追加されていたのは知っていたのですが、無視していたというのが本当のところです。
　ただ、図書館から借りてきた本を読んでみると、それが、現在の主流となっていて、W3Cでも推奨しているとのこと・・・。知ったからには今後システムに取りいれていきます。

[セマンティクスタグ]
　セマンティクスタグのサンプルを見ていて思うのは、 検索エンジン などに同サイトの正確な意味などを伝えるために使用するのかな？っていう印象なのですが、正確なところはどうなのでしょうか？本日も、 ChatGPT に聞いてみましょう。

?HTMLの初期段階と構造の不明確さ
　初期のHTMLでは、文書の構造や意味を示すために、主に視覚的なスタイルやレイアウトに関するタグ（例えば、<div> や vspan>）が多く使用されていました。これらはプレゼンテーションを主に目的としており、コンテンツの意味（セマンティクス）を示すものではありませんでした。
　例えば、ページ内のメニューやナビゲーション部分、記事、サイドバーなどを区別するために、<:div>タグが多く使われ、その中にクラス名やIDで意味を持たせるのが一般的でした。しかし、こうした構造は文書の意味や役割を明確にするものではなく、検索エンジンや支援技術（スクリーンリーダーなど）がコンテンツの内容を理解しづらくなる原因となっていました。

?ウェブの進化と要請
　ウェブの技術やコンテンツが進化する中で、以下のようなニーズが強くなりました：

・コンテンツの意味付け
　複雑なウェブサイトやアプリケーションにおいて、ページ内でどの部分がメインのコンテンツなのか、どこにナビゲーションがあるのかなどを、HTML構造自体で明示的に示したいという要望が高まりました。
・検索エンジン最適化（SEO）
　コンテンツの意味が明確であれば、検索エンジンがウェブページをより正確にインデックスし、ランキングの向上に繋がるという考えが広がりました。
・アクセシビリティの向上
　スクリーンリーダーなどを使う視覚障害者が増えている中で、コンテンツの意味がHTML自体に含まれていることが、ウェブのアクセシビリティを高めるために重要とされました。

?HTML5の登場とセマンティックタグ
　こうした要請に応える形で、HTML5ではセマンティックタグが導入されました。具体的には、以下のような新しいタグが加わり、ウェブページの意味をより明確に表現できるようになりました：

<header>ページまたはセクションの見出し部分を示す。
<footer>ページまたはセクションのフッター部分を示す。
<article>独立したコンテンツブロック（例えば、ニュース記事やブログ投稿）を示す。
<section> 複数のコンテンツをグループ化し、テーマやトピックごとに区分けする。
<nav> ナビゲーションリンクを囲むための要素。
<aside> 主にメインコンテンツから外れる補足的なコンテンツを示す。
これらのタグは、単に視覚的なレイアウトのために使われるのではなく、文書の意味や構造を反映するために使われます。

?セマンティックタグのメリット
　セマンティックタグの導入には、以下のようなメリットがあります：

・SEOの向上
　検索エンジンがページのコンテンツをより正確に理解しやすくなり、ランキングが向上する可能性があります。
・アクセシビリティの向上
　スクリーンリーダーや支援技術が文書の構造を理解しやすくなり、視覚障害者のウェブ利用が向上します。
・コードの可読性と保守性の向上
　セマンティックな要素を使用することで、HTMLのコードがより論理的に構造化され、他の開発者にとって理解しやすくなります。
・ウェブの標準化
　セマンティックタグを使用することで、ウェブコンテンツの構造が標準化され、異なるプラットフォームやデバイスでも一貫した体験を提供できます。

?セマンティックタグが求められる背景
　セマンティックタグは、単に検索エンジンやアクセシビリティを改善するためだけでなく、ウェブの構造がより明確で理解しやすくなることを目指して導入されました。HTML5は、"意味を持ったウェブ"を作るための重要なステップとして位置づけられており、単なる視覚的な表現を超えて、コンテンツ自体の意味と役割を伝えることが重視されました。

■結論
　HTML5から導入されたセマンティックタグは、ウェブページの意味的な構造を明確にし、検索エンジン最適化（SEO）やアクセシビリティを改善するために重要な役割を果たしています。これらのタグは、単なる視覚的な表示のためではなく、コンテンツの意味や役割をウェブ全体に伝えるために採用されました。

予想通り、検索エンジン対応ということもありますが、それだけではないようです。その内容は、ビジネスとして自分でサイトを作ろうとしているなら、必須のタグだといえます。そして、ChatGPTからの解答を見て気づきましたが、当プロジェクトで利用するHTML規約の中に、使用することが明記されていました。なんでセマンティックタグを利用するのか理解していなかったので、つい先ほどまで気づきませんでした。

[あとがき]
　CSSの規約を作ろうと借りてきた本だったのですが、CSSの規約のためだけでなく、HTMLの再学習のために利用することになりそうです。やはり、この手の本は複数読まなければ本当の意味を理解できないのかもしれません。

　では、また！