検索

HTMLの構造マニュアル・ガイド

HTMLタグの構造

HTMLタグの構造はPCサイトもタブレット、スマートフォンでもすべて同じです。レスポンシブ（アダプティブ）サイトの作りをしているので、同じHTMLをスタイルシート（CSS）によってデザイン、レイアウトを切り替えて使用しています。

HTMLの構造 スクリーンショット
<header>
　　<nav>       
　　</nav>
</header>
<div id="wrapper">
　　<nav>（breadcrumb）
　　　　<ol></ol>
　　</nav>
　　<main>
　　　　<article>
　　　　　　<h1>主題</h1>
　　　　　　<section>
　　　　　　　　<h2>副題</h2>
　　　　　　</section>
　　　　</article>
　　　　<aside>
　　　　</aside>
　　</main>
</div>
<footer>
</footer>

PCサイトの構造

ブレイクポイントによって多少の差異はありますが、PCサイト（主にデバイス横幅1,025以上）の構造です。ブレイクポイントについてはこちらのページをご覧ください。

画像で表すHTML構造

PCサイト 画像で表すHTML構造<

実際の画面と重ねて見た画像

PCサイト 実際の画面と重ねて見た画像

タブレット・スマホサイトの構造

ブレイクポイントによって多少の差異はありますが、タブレット・スマホサイト（主にデバイス横幅1,024以下）の構造です。ブレイクポイントについてはこちらのページをご覧ください。

画像で表すHTML構造

スマホサイト 画像で表すHTML構造<

実際の画面と重ねて見た画像

スマホサイト 実際の画面と重ねて見た画像