I had a task to create simple audio player. So far I managed to do functionalities and all that is needed. Other part of same task was to make it semantic and modular.I read some blog posts and articles about semantic but I am not sure how to do it in right way.player();  function player(){    music = new Audio('http://www.w3schools.com/tags/horse.mp3');  }  $('.button__play').click(function(event){    event.preventDefault();    music.play();  });  $('.button__pause').click(function(event){    event.preventDefault();    music.pause();  });  $('.button__stop').click(function(event){    event.preventDefault();    music.pause();    music.currentTime = 0;  });  $('.button__repeat, .button__rate').click(function(event){    event.preventDefault();    $(this).toggleClass('button__active');  });.player{  background: #eaeaea;  width: 360px;  font-family: 'Arial', sans-serif;  font-size: 16px;}.cover{  width: 100%;  height: 160px;  overflow:hidden;}.cover__img{  width: 100%;  height: auto;  display:block;}.container{  padding: 0.500em;}.info{  margin: 1em 0;}.info:after{  content: '';  clear: both;  display: table;}.song{  list-style: none;  margin:0;   padding: 0;  float: left;  width: 75%;}.progress{  height: 0.250em;  width: 100%;  background: orangered;  margin: 1em 0;  postion: relative;}.progress__bar{  height: 0.250em;  width: 20%;  background: lightblue;  }.button{  display: inline-block;  text-decoration: none;  padding: 0.250em 0.500em;}.button__play{  background: orangered;  color: white;}.button__pause, .button__stop{  font-size: 0.750em;  background: gray;  color: white;}.button__repeat, .button__rate{  color: gray;}.button__active{  color: red;}<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script><div class=player>  <div class=cover>    <img src=http://res.cloudinary.com/wired/image/upload/v1475688832/pine-273826_640_wylrrc.jpg alt=img class=cover__img />  </div>  <div class=container>    <div class=info>       <ul class=song>        <li class=song__info__artist>forest</li>        <li class=song__info__song>rain</li>       </ul>      <div class=rate>        <a href=# class=button button__rate>rate</a>      </div>    </div>    <div class=progress>      <div class=progress__bar></div>    </div>    <div class=ctrl>      <a href=# class=button button__play>play</a>      <a href=# class=button button__pause>pause</a>      <a href=# class=button button__stop>stop</a>      <a href=# class=button button__repeat>repeat</a>    </div>  </div></div>
HTML and jQuery audio player
javascript;jquery;html5;audio