title: can I make an <h1> tag as a clickable button that functions?
body: <p>The web page I am making consists of</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;cane-wrap&quot;&gt;
          &lt;h1 class=&quot;mc&quot;&gt;christmas tic tac toe&lt;/h1&gt;
  &lt;/div&gt;
      
  </code></pre>
  <p><a href="https://i.stack.imgur.com/R3Yps.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R3Yps.png" alt="enter image description here" /></a></p>
  <p>on top centre of the web and autoplay going on the background using JS.</p>
  <p>I have successfully hid the play button using <code>style=&quot;display:none;&quot;</code>  but shortly after realized I can't turn the music off. how do I <strong>make <code>&lt;div&gt;&lt;h1&gt;</code> as a clickable button</strong> so that I can <strong>turn on/off the music</strong>?</p>
  <p>after some googling I found some sources that turn div into buttons but can <code>&lt;h1&gt;</code> be a button as well ?</p>