スタッフブログ

ココマチ コーディングラボのスタッフから、
日々のつぶやきをお届けします。

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

セマンティック・ウェブ(英: 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タグは極力書かない

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

料金改定のお知らせ

コーディングラボのコーディング料金ですが、2017年4月よりページ単価の値下げをさせて頂きます。


PCサイトコーディング代金…1ページあたり7,000円(旧価格8,000円)縦の長さが3000pxまで

スマホサイトコーディング代金…1ページあたり7,000円(旧価格8,000円)縦の長さが5000pxまで

レスポンシブコーディング代金…1ページあたり15,000円(旧価格19,000円)縦の長さが3000pxまで

※同時に最低ご利用料金の設定をさせて頂きます。

最低ご利用料金:30,000円

※レスポンシブの場合、1Pのみ発注頂く場合は、30,000円となります。
→1Pでも2Pでも同じ30,000円とさせて頂きます。

以上

 

 

年末年始休暇のお知らせ

12月28日(水)より1月4日(水)まで年末年始休暇とさせて頂きます。
ご連絡頂きましたお問合せに関しましては、5日(木)以降随時対応させて頂きますので、あらかじめご了承ください。