hタグの見出しに項番を含むことは、SEO的にあまりよくないので、CSSの疑似要素で下記のように自動的に番号を振る方法をご紹介します。

CSS

      
    .demo_box{
      counter-reset: period;
    }
    .title_index_period::before {
      counter-increment: period;
      content: counter(period) ".";      
    }
      

親要素にcounter-resetを設定し、counter-incrementでカウンタを増加させます。 contentでカウンタの表示形式を指定しています。例では、ナンバーの後にピリオドを表示させています。これをカッコつきのナンバーにしたい場合、 content: "(" counter(number) ")";　になります。