logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

セマンティック・ウェブについて

セマンティック・ウェブ(英: semantic web)は W3C のティム・バーナーズ=リーによって提唱された、ウェブページの意味を扱うことを可能とする標準やツール群の開発によってワールド・ワイド・ウェブの利便性を向上させるプロジェクト。セマンティック・ウェブの目的はウェブページの閲覧という行為に、データの交換の側面に加えて意味の疎通を付け加えることにある。
最近よく聞くことが多い、「セマンティック・ウェブ」。これをWEBコーディングの際に当てはめるとしたら、 HTMLのタグの意味を考えてコーディングしましょう という事になるのではないでしょうか。
今回、セマンティック・ウェブ的なコーディングについてまとめてみました。

1.見出しタグを適切に使用する

見出し(h)タグには、ランクが存在しています。 h1タグが最上位となり、次にh2タグ、h3タグ、h4タグとなっています。 これは、文章の階層構造を説明することにもなるので hタグの順序がバラバラになっていると検索エンジンに正しく解釈してもらえなくなります。
良い例
<h1></h1>

      <h2></h2>     <p></p>

     <h3></h3>      <p></p>

      <h4></h4>       <p></p>  

    <h2></h2>     <p></p>  

     <h3></h3>      <p></p>

 

→H1は最初に出現、その後はH2、H3と続くのが正しい


2.セクション要素

HTML5 では、セクション要素という新しい要素が加わっています。このセクション要素を使えば、セクションを意味的にひとつの塊として捉えてくれて、アウトラインを形成してくれます。 <nav>… ナビゲーションを示すセクション要素
<article>… ブログの記事みたいに、独立しても意味が通るような部分を示すセクション要素
<section>… 基本的に見出しを伴う文章のひと塊、段落とか章を示すセクション要素
<aside>… あまり重要でない部分を示すセクション要素

→意味ごとのまとまりで<section>、単独で意味が成り立つものは<article>、単なる装飾の場合は<div>


3.各タグの意味

HTML5 では、不要なdivタグは極力書かず、各タグの意味を考えてコーディングをしてください。

繰り返し要素や、要素を並列に並べるなら<ul>と<li> 例)グローバルナビ

単語と説明のペアは<dl>(<dt>と<dd>のペア)
不要なdivタグは極力書かない

→誰が見ても読みやすいソースコードを心掛ける