htmlのolの自動ナンバリングに関して

前提・実現したいこと

初めまして。teachと申します。
今回html,cssを使用してと利用規約のページをコーディングしていました。
そこで一つ気になったことがあったので質問させてください。

気になったところというのは
順序付きリストがある場合にolで実装をすると思うのですが
liの文頭に1とか2とかをつける場合、自動ナンバリングで実装(cssのcounter関数などで)した方がいいのか、
またはテキストで1とか2とかをつける方がいいのか悩んでいます。

どちらでもいいような気はしているのですがseoなどを考慮するとなるとどちらがいいのか気になりました。

個人的には
利用規約などでは以下のようになる場合があるので

1条 タイトル
1.テキストが入ります。テキストが入ります。テキストが入ります。
  1) テキストが入ります。テキストが入ります。
  2) テキストが入ります。テキストが入ります。
2.テキストが入ります。テキストが入ります。テキストが入ります。

以下はhtmlです。

<ol>
<li>
  1.テキストが入ります。テキストが入ります。テキストが入ります。
  <ol>
    <li>1) テキストが入ります。テキストが入ります。<li>
    <li>2) テキストが入ります。テキストが入ります。<li>
  </ol>
</li>
<li>2.テキストが入ります。テキストが入ります。テキストが入ります。</li>
</ol>

自動ナンバリングだと
1.のcounterと1)のcounterを2つ用意することになると思います。
このことから
cssを増やすより、テキストに1.や1)をいれるようにした方がcssを増やさなくていいのと拡張性(他にも(1)などが出てきた場合など)もあるのでいいのかなと思っています。
また、テキストをコピーする際に自動ナンバリングだとテキストのコピーはできてもナンバリングされている数字まではコピーできないようなのでそこも考えるとテキストの方がいいのではと考えています。

調べたこと

私が調査したところとしてはまずolのseoの効果を調べてみましたが
olについて詳しく書かれている記事があまりませんでした。

http://w-just.com/blog/seo-tag-358.html
https://emma.tools/magazine/html-tags-for-seo/

yambejp

2020/11/09 02:57

1. 1-1. 1-1-1. 的なネストは不要なのでしょうか？

teach

2020/11/09 03:05 編集

htmlだと以下のような感じでネストしています。 <ol> <li> 1.テキストが入ります。テキストが入ります。テキストが入ります。 <ol> <li>1) テキストが入ります。テキストが入ります。<li> <li>2) テキストが入ります。テキストが入ります。<li> </ol> </li> <li>2.テキストが入ります。テキストが入ります。テキストが入ります。</li> </ol>

行動規範の内容に同意します

回答1件

ベストアンサー

またはテキストで1とか2とかをつける方がいいのか悩んでいます。

実装の手間を気にしないのであればそれでいいかと。

cssを増やすより、テキストに1.や1)をいれるようにした方がcssを増やさなくていいのと拡張性(他にも(1)などが出てきた場合など)もあるのでいいのかなと思っています。

その分、入れ替えや、間の削除などした時に、
手動でナンバリングの必要が発生します。
（というわけで、上記のように手間でなければ別に問題ない）

なので、
list-styleでの実装の他に、
CSSのインクリメント関数を使う方法もあります。

html
1<ol class="list">
2  <li class="listItem">hoge</li>
3  <li class="listItem">mog</li>
4  <li class="listItem">hog</li>
5</ol>

css
1.list {
2  counter-reset: counter;
3  list-style: none;
4}
5
6.listItem {
7  counter-increment: counter;
8}
9
10.listItem::before {
11  content: counter(counter) ")";
12}