HTMLマークアップマニュアル・ガイド

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

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

見出し <h1>
文脈 <p>
リンク <a>
1. サイト内リンク
2. サイト外リンク
箇条書き <ul><li>
順序リスト <ol><li>
定義リスト <dl><dt><dd>
テーブル組 <table>
メイン <main>
記事 <article>
セクション <section>
ヘッダー <header>
フッター <footer>
余談・補足情報 <aside>

見出し <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>

メイン <main>

<main>: メインコンテンツ
注意事項: article、aside、footer、header、navの各要素の子階層に設置するのはNG

<main>
    <article>
    　　<section>
    　　　　<h2>見出し</h2>
    　　　　<p>本文</p>
    　　</section>
    　　<section>
    　　　　<h2>見出し</h2>
    　　　　<p>本文</p>
    　　</section>
    </article>
</main>

記事 <article>

<article>: article 記事のブロック

<article>
　　<section>
　　　　<h2>見出し</h2>
　　　　<p>本文</p>
　　</section>
　　<section>
　　　　<h2>見出し</h2>
　　　　<p>本文</p>
　　</section>
</article>

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

セクション <section>

<section>: section 意味のあるコンテンツブロック。divは意味のないコンテンツブロック（ただの囲い）

<article>
    <section>
        <h2>見出し</h2>
        <p>本文</p>
        <section>
            <h3>見出し</h3>
            <p>本文</p>
        </section>
        <section>
            <h3>見出し</h3>
            <p>本文</p>
            <section>
                <h4>見出し</h4>
                <p>本文</p>
            </section>
            <section>
                <h4>見出し</h4>
                <p>本文</p>
            </section>
        </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="#">サービス１</a></li>
　　　　<li><a href="#">サービス２</a></li>
　　　　<li><a href="#">サービス３</a></li>
　　　　<li><a href="#">サービス４</a></li>
　　</ul>
　　<p><a href="#"><img src="banner.jpg" width="300" height="300" alt="バナー"></a></p>
</aside>

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