スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

HTMLマークアップ

ページの内容を正しく理解して、見出し(H1, H2, H3)、段落、箇条書きなどを正しくマークアップするため、以下のガイドラインを参考にしてください。

また、デザイナーから提出されるデザインや、お客様からいただく原稿を見た目のままマークアップするのではなく、文章なのか、箇条書きなのかなどを考えながらマークアップしてください。

見出し <h1>

<h1>~<h6>
heading 見出し
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>

dt要素との使い分けに迷ったら、以下を参考にしてください。以下が該当する場合は、hタグを使用してください。

  • ページの目次として適しているか
  • 見出しに対応する内容(本文、箇条書きなど)があるか

h1以下(h2~h6)は各sectionタグに1つづつ使用されます。ページの構造を判断しやすくするために、sectionタグ内のhタグは階層レベルが分かるように数字を増やしてください。

文脈 <p>

<p>
paragraph 節、段落、文脈

ページ内で一番多用されるのがこの<p>タグです。使用用途を間違えないように、コンテンツの意味をよく理解して使用してください。

間違っている例1

箇条書きを<p>タグで記載してしまっているよくある例。

<p>埼玉県富士見市は埼玉県の南東部に位置し、人口は約11万人です。富士見市に隣接している市町村は、以下の市町村です。<br>
・さいたま市<br>
・川越市<br>
・ふじみ野市<br>
・志木市<br>
・三芳町<br>
</p>

正しい例1

箇条書きには、<ul><li>などで正しいマークアップをしてください。

<p>埼玉県富士見市は埼玉県の南東部に位置し、人口は約11万人です。富士見市に隣接している市町村は、以下の市町村です。</p>
<ul>
  <li>さいたま市</li>
  <li>川越市</li>
  <li>ふじみ野市</li>
  <li>志木市</li>
  <li>三芳町</li>
</ul>

間違っている例2

コンバージョンのボタンなどを<p>タグにしてしまっている例。これが間違いというわけではないですが、文脈ではないため、このようなケースでは、<div>を使用することにします。

<p><a href="#">更に詳しく</a></p>

正しい例2

文脈ではなく、ただのブロックなので<div><li>でマークアップをしてください。

<div><a href="#">更に詳しく</a></div>

リンク <a>

<a>
anchor アンカー

サイト内リンク

サイト内リンクの場合は .com 以下のパスを記載してください。以下は、リンク先が https://www.s-contigo.website/about の場合のリンクの記載方法を示しています。

<a href="/about">当社について</a>

サイト外リンク

サイト外リンクの場合は、target="_blank" rel="noreferrer noopener"を記載してください。ユーザーが迷子にならないように、サイト外リンクの場合は、blankで新規ウィンドウを立ち上げます。

<a href="https://www.s-contigo.com" target="_blank" rel="noreferrer noopener">リンク先テキスト</a>

箇条書き <ul><li>

<ul>
unordered list 序列なしの箇条書き
<li>
list item 箇条書きの項目
<ul>
  <li>箇条書き</li>
  <li>箇条書き</li>
  <li>箇条書き</li>
</ul>

順序に意味がないリスト(箇条書き)に使用してください。

順序リスト <ol><li>

<ol>
ordered list 序列ありの箇条書き
<li>
list item 箇条書きの項目
<ol>
  <li>序列箇条書き</li>
  <li>序列箇条書き</li>
  <li>序列箇条書き</li>
</ol>

順序に意味があるリスト(箇条書き)に使用してください。

定義リスト <dl><dt><dd>

<dl>
definition list 定義リスト
<dt>
definition term 定義する言葉
<dd>
definition description 定義の説明
<dl>
  <dt>住所</dt>
  <dd>埼玉県富士見市</dd>
  <dt>電話番号</dt>
  <dd>000-111-2222</dd>
  <dt>URL</dt>
  <dd>https://www.s-contigo.website</dd>
</dl>

用語とその説明から構成される文章に使用してください。hタグの見出しとdtタグ、pタグ本文とddタグを使い間違えて使わないように注意してください。

テーブル組 <table>

<table>
table 表組
<thead>
table header テーブルヘッダー
<tbody>
table body テーブルボディー
<tfoot>
table footer テーブルフッター
<th>
table header cell ヘッダーセル
<td>
table data cell データセル
<caption>
caption 表組の説明
<table>
  <caption>シャツ</caption>
  <thead>
    <tr>
      <th></th>
      <th>S</th>
      <th>M</th>
      <th>L</th>
      <th>XL</th>
      <th>3L</th>
      <th>4L</th>
      <th>5L</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>着丈</th>
      <td>57</td>
      <td>59</td>
      <td>61</td>
      <td>63</td>
      <td>66</td>
      <td>68</td>
      <td>69.5</td>
    </tr>
    <tr>
      <th>身幅</th>
      <td>48</td>
      <td>50</td>
      <td>52</td>
      <td>53.5</td>
      <td>55</td>
      <td>56.5</td>
      <td>58</td>
    </tr>
  </tbody>
</table>

記事 <article>

<article>
article 記事のブロック
<article>
  <section>
    <h2>見出し</h2>
    <p>本文</p>
  </section>
  <section>
    <h2>見出し</h2>
    <p>本文</p>
  </section>
</article>

ページ内に1か所のみ、メインコンテンツを囲うように使用。

セクション <section>

<section>
section 意味のあるコンテンツブロック。divは意味のないコンテンツブロック(ただの囲い)
<article>
  <section>
    <h2>見出し</h2>
    <p>本文</p>
    <section>
      <h3>見出し</h3>
      <p>本文</p>
    </section>
  </section>
  <section>
    <h2>見出し</h2>
    <p>本文</p>
  </section>
</article>

上記の例の通り、各hタグを囲うように使用してください。但し、bodyタグ直下のh1タグはsectionタグで囲わないでください。h1タグをsectionタグで囲ってしまうと、body自体の見出しが無いことになります。

ヘッダー <header>

<header>
header ページやコンテンツのヘッダー
<header>
  <nav>
    <ul>
      <li><a href="#">当社について</a></li>
      <li><a href="#">事業概要</a></li>
      <li><a href="#">サービス紹介</a></li>
      <li><a href="#">会社概要</a></li>
    </ul>
  </nav>
</header>

ページ全体のヘッダーに使用してください。hタグを入れるためにheaderタグを使用するやり方もありますが、弊社では、ページ全体のヘッダーとして使用しています。

フッター <footer>

<footer>
footer ページやコンテンツのフッター
<footer>
  <ul>
    <li><a href="#">当社について</a></li>
    <li><a href="#">事業概要</a></li>
    <li><a href="#">サービス紹介</a></li>
    <li><a href="#">会社概要</a></li>
  </ul>
  <small>Copyright 2020 スタジオコンチーゴ株式会社</small>
</footer>

ページ全体のフッターに使用してください。

余談・補足情報 <aside>

<aside>
aside 関連してるけどメインではない補足情報
<aside>
  <ul>
    <li><a href="#">サービス1</a></li>
    <li><a href="#">サービス2</a></li>
    <li><a href="#">サービス3</a></li>
    <li><a href="#">サービス4</a></li>
  </ul>
  <p><a href="#"><img src="banner.jpg" width="300" height="300" alt="バナー"></a></p>
</aside>

ページの内容と関連してるけど、区別して掲載するべき内容のことです。 例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。迷ったときは、aside内の内容を削除してもページの内容が破綻しないかという基準で判断してください。