<section lang="ja">
  <h1>テキスト要素の意味を表す新しい見た目</h1>

  <table>
    <thead>
      <tr>
        <th scope="col">要素</th>
        <th scope="col">デフォルトの見た目</th>
        <th scope="col">新しく検討した見た目</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <th scope="row">span</th>
        <td><span>意味を持たない</span></td>
        <td><span>意味を持たない</span></td>
      </tr>
      <tr>
        <th scope="row">strong</th>
        <td><strong>重要性・深刻性・緊急性</strong></td>
        <td><strong>重要性・深刻性・緊急性</strong></td>
      </tr>
      <tr>
        <th scope="row">b</th>
        <td><b>キーワード</b></td>
        <td><b>キーワード</b></td>
      </tr>
      <tr>
        <th scope="row">em</th>
        <td><em>強調 (Stress emphasis)</em></td>
        <td><em>強調</em></td>
      </tr>
      <tr>
        <th scope="row">i</th>
        <td><i>代替音声 (Alternative voice)</i></td>
        <td><i>代替音声</i></td>
      </tr>
      <tr>
        <th scope="row">dfn</th>
        <td><dfn>用語の定義実体 (Defining instance)</dfn></td>
        <td><dfn>用語の定義実体</dfn></td>
      </tr>
      <tr>
        <th scope="row">cite</th>
        <td><cite>作品のタイトル (Titles of works)</cite></td>
        <td><cite>作品のタイトル</cite></td>
      </tr>
      <tr>
        <th scope="row">var</th>
        <td><var>変数 (Variables)</var></td>
        <td><var>変数</var></td>
      </tr>
      <tr>
        <th scope="row">mark</th>
        <td><mark>ハイライト</mark></td>
        <td><mark>ハイライト</mark></td>
      </tr>
      <tr>
        <th scope="row">u</th>
        <td><u>注釈</u></td>
        <td><u>注釈</u></td>
      </tr>
      <tr>
        <th scope="row">ins</th>
        <td><ins>追加</ins></td>
        <td><ins>追加</ins></td>
      </tr>
      <tr>
        <th scope="row">del</th>
        <td><del>削除</del></td>
        <td><del>削除</del></td>
      </tr>
      <tr>
        <th scope="row">s</th>
        <td><s>正確ではないか、もはや関連しないコンテンツ</s></td>
        <td><s>正確ではないか、もはや関連しないコンテンツ</s></td>
      </tr>
      <tr>
        <th scope="row">strike（廃止済み）</th>
        <td><strike>打ち消し線を引いて表示 </strike></td>
        <td><strike>打ち消し線を引いて表示 </strike></td>
      </tr>
      <tr>
        <th scope="row">big（廃止済み）</th>
        <td><big>大きな文字で表示</big></td>
        <td><big>大きな文字で表示</big></td>
      </tr>
      <tr>
        <th scope="row">small</th>
        <td><small>副次的なコメント</small></td>
        <td><small>副次的なコメント</small></td>
      </tr>

    </tbody>
  </table>

</section>

td:nth-child(3) {
  strong {
    font-weight: bold;
    color: red;
    /* animation: blink 1s step-end infinite; */
  }

  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

  em:lang(ja) {
    text-emphasis: filled dot;
  }

  i:lang(ja) {
    font-family: serif;
  }

  dfn:lang(ja) {
    quotes: "「" "」";
  }
  dfn:lang(ja)::before {
    content: open-quote;
  }
  dfn:lang(ja)::after {
    content: close-quote;
  }

  cite:lang(ja) {
    quotes: "『" "』";
  }
  cite:lang(ja)::before {
    content: open-quote;
  }
  cite:lang(ja)::after {
    content: close-quote;
  }

  u {
    text-decoration: underline wavy;
  }

  ins {
    background-color: lightgreen;
    text-decoration: none;
  }
  ins::before {
    content: "+";
  }

  del {
    background-color: lightpink;
    text-decoration: none;
  }
  del::before {
    content: "−";
  }

  s {
    opacity: 0.3;
  }
}