最上位見出し（h1 要素）

上位見出し（h2 要素）

上位見出し（h2 要素）

見出し（h3 要素）

見出し（h3 要素）

見出し（h3 要素）

見出し（h3 要素）

最上位見出し（h1 要素）

上位見出し（h2 要素）

見出し（h3 要素）

見出し（h3 要素）

<div id="noneDivision">
  <h1>最上位見出し（h1 要素）</h1>
    <h2>上位見出し（h2 要素）</h2>
    <h2>上位見出し（h2 要素）</h2>
      <h3>見出し（h3 要素）</h3>
      <h3>見出し（h3 要素）</h3>
      <h3>見出し（h3 要素）</h3>
      <h3>見出し（h3 要素）</h3>
    <h2>上位見出し（h2 要素）</h2>
      <h3>見出し（h3 要素）</h3>
      <h3>見出し（h3 要素）</h3>
</div>

最上位見出し（h1 要素）

上位見出し（h2 要素）

上位見出し（h2 要素）

見出し（h3 要素）

見出し（h3 要素）

見出し（h3 要素）

見出し（h3 要素）

最上位見出し（h1 要素）

上位見出し（h2 要素）

見出し（h3 要素）

見出し（h3 要素）

<div id="useDivision">
  <div class="section">
    <h1>最上位見出し（h1 要素）</h1>
    <div class="section">
      <h2>上位見出し（h2 要素）</h2>
    </div>
    <div class="section">
      <h2>上位見出し（h2 要素）</h2>
      <div class="section">
        <h3>見出し（h3 要素）</h3>
        <h3>見出し（h3 要素）</h3>
        <h3>見出し（h3 要素）</h3>
        <h3>見出し（h3 要素）</h3>
      </div>
    </div>
  </div>
  <div class="section">
    <h1>最上位見出し（h1 要素）</h1>
    <div class="section">
      <h2>上位見出し（h2 要素）</h2>
      <div class="section">
        <h3>見出し（h3 要素）</h3>
        <h3>見出し（h3 要素）</h3>
      </div>
    </div>
  </div>
</div>
div.box {
    margin: 20px;
    border: solid 1px #ccc;
}

h1 {
    counter-increment: chapter;
    counter-reset: section;
}

h1::before {
    margin-right: 0.5em;
    content: "第" counter(chapter) "章";

}

h2 {
    counter-increment: section;
    counter-reset: paragraph;
}

h2::before {
    margin-right: 0.5em;
    content: "第" counter(section) "節";

}

h3 {
    counter-increment: paragraph;
}

h3::before {
    margin-right: 0.5em;
    content: "第" counter(paragraph) "項";
}

div.section {
    padding: 0 20px;
    border: solid 1px #ccc;
    background-color: #fcc;
}

div.section div.section {
    background-color: #cfc;
}

div.section div.section div.section {
    background-color: #ccf;
}