HTMLコードを最小限に抑える方法は？

Question

私は反復的なものがたくさんあるHTMLページを行ってきました。何らかのテンプレートで最小化する方法はありますか？ここ はコードです：

<div class="float-left-area"> 
      <div class="inner-left"> 
     <label for="picture1"> 
       <div id="pic1" class="sidebar-item"> 
        <img src="eslcc_logo2.png" alt="eslcc logo" style="float:left;" class="size"> 
        <p align="right">1</p> 
       </div> 
     </label> 
     <input id="picture1" type="checkbox" name="picture" data-pic="pic1" value="1" onclick="selectPicture(this)"> 
    <hr />  
     <label for="picture2"> 
       <div id="pic2" class="sidebar-item"> 
        <img src="imac_2.jpg" style="float:left;" class="size" alt="iMac"> 
        <p align="right">5</p> 
       </div> 
     </label> 
     <input id="picture2" type="checkbox" name="picture" data-pic="pic2" value="5" onclick="selectPicture(this)"> 
    <hr /> 
     <label for="picture3"> 
       <div id="pic3" class="sidebar-item"> 
        <img src="coding_img.png" style="float:left;" class="size" alt="Coding Image"> 
        <p align="right">10</p> 
       </div> 
     </label> 
     <input id="picture3" type="checkbox" name="picture" data-pic="pic3" value="10" onclick="selectPicture(this)"> 
    <hr /> 
     <label for="picture4"> 
      <div id="pic4" class="sidebar-item"> 
        <img src="ariane_6.jpg" style="float:left;" class="size" alt="Ariane 6"> 
        <p align="right">20</p> 
       </div> 
     </label> 
     <input id="picture4" type="checkbox" name="picture" data-pic="pic4" value="20" onclick="selectPicture(this)"> 
    <hr /> 
</div> 
</div> 

Answer 1

は、残念ながら、純粋なHTMLの解決策はありません。

は、私には、JavaScript（JS）で書かれた「テンプレート・エンジン」

Here'sいくつかの人気のあるエンジンの概要をお勧めします。 https://www.sitepoint.com/overview-javascript-templating-engines/

もちろん、PHP、ASPなどのサーバーサイドスクリプト言語でも行うことができます。 もう1つの利点は、データベースのサポートです。 データをwhileループで出力できます。 もちろん、サーバーサイドスクリプト言語にはテンプレートエンジンもあります。