HTMLの最小例 - AdSense最小例

WordPressなどのCMSを使わずにHTMLでページを作る例を示します。

このサイトの初期段階である2023年4月17日のソースコードを元とした例を掲載しました。

また，概ねそのままページ化したサンプルを作成しました。

ソースコード全体
<head>配下
<body>配下
その他にお勧めの機能

ソースコード全体

HTMLファイルにまずこれをコピー&ペーストします。

ここから<head>配下，<body>配下を置き換えれば完成します。

<!doctype html>
<html lang="ja">
  <head>
    AdSense コードなどが入る
  </head>
  <body>
    実際にページとして表示されるコンテンツが入る
  </body>
</html>

<head>配下

これを<head>配下にコピー&ペーストし，内容をページに適するものに書き換えます。

AdSense コード
文字エンコーディング
ページタイトル
ビューポートの設定
検索結果のスニペット

<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1111222233334444" crossorigin="anonymous"></script>
  <meta charset="utf-8">
  <title>ページタイトル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="検索結果のスニペットの文章">
</head>

以下の公式解説も参考にしてください。

<body>配下

見出しを配置し，その配下に段落を配置して3行程度の作文をします。

その他，必要に応じて各見出しへの目次を設置したり，箇条書きで情報を整理したりします。

これを繰り返せば階層化されたコンテンツを作れます。

見出し（<h1>，<h2>，<h3>）
段落（<p>）
アンカー（<a>）
- id属性を設定した他の要素にハイパーリンク
- サイト内の他のページにハイパーリンク
- 外部ページにハイパーリンク
箇条書き（<ul>，<ol>，<li>）

<body>
  <h1>主にページタイトルかロゴが入る</h1>
  <ul>
    <li><a href="#abcd">見出し1へ</a>
      <ul>
	<li><a href="#efgh">見出し1.1へ</a></li>
	<li><a href="#ijkl">見出し1.2へ</a></li>
      </ul>
    </li>
  </ul>

  <h2 id="abcd">見出し1</h2>
  <p>3行作文。</p>

  <h3 id="efgh">見出し1.1</h3>
  <p>3行作文。</p>

  <h3 id="ijkl">見出し1.2</h3>
  <ol>
    <li>箇条書きなど</li>
    <li>箇条書きなど</li>
  </ol>

  <h2>見出し2</h2>
  <p><a href="code.html">サイト内のページへ</a></p>
  <p><a href="/">トップページへ</a></p>
  <p><a href="https://adsense.google.com/intl/ja_jp/start/" target="_blank" rel="noopener noreferrer">Google AdSenseへ</a></p>
</body>

その他にお勧めの機能

お勧め順です。便利ですが最小例としては不要です。

スタイルシートで見出しを装飾
見出し以外の要素（<div>，<span>，<header>など）を装飾
Flexboxによる横並びレイアウト
CSS Gridによる二次元レイアウト
表（<table>，<tr>，<th>，<td>など）
ナビゲーションメニューおよび必要に応じてプルダウンリスト（<details>）
パンくずリスト
公開日，更新日および<time>要素
構造化データ