what link should I use in my event page article? to open and load individually?

Hello everyone, with a question that makes me sleepy.

  

In my page index.html I have a < section > called EVENTS , and I also have a page called events.html

     

In events.html I have some < article > each "article" linked to page events.html >

The problem is that all of my articles all appear together on the events.html page I type in Article 1 and all others appear below one another!
*
I was wondering if you have any way to make each article load by clicking it *

that is when clicking on my article it loads and opens on the same page? which case and the EVENTS page ?

<sectionid="eventos-index" class="pg-eventos" />
<!--sesao de eventos index -->


<h1>EVENTOS </h1>

<a href="eventos.html#evento-jigante" title="jigante em mutuipe ba">

  <article class="fotos"><img src="_imagens/eventos/jigante.jpg" width="100%" height="100%">
    <hgroup>
      <h2>Gigante 18/01/2018 mutuipe BA</h2>
    </hgroup>
  </article>
</a>

<a href="eventos.html#santinha" title="baille da santinha saj">
  <article class="fotos"><img src="_imagens/eventos/santinha.jpeg" width="100%" height="100%">
    <hgroup>
      <h2> Baille da santinha 18/01/2018<br>SAJ BA</h2>
    </hgroup>
  </article>
</a>


<section class="eventos" alt="eventos do vale">

  <h1>EVENTOS</h1>

  <a href="#evento-gigante">
    <article class="eventos" id="evento-gigante">
      <img src="_imagens/eventos/jigante.jpg">
      <p class="desc-eventos">
        gigante<br> bloco nana com leo santana
        <br>Local campo Grande Salvador <br> Data 18/01/18.<br> Hora. 21:00hs <br> Valor. Individual. 190.00 reais <br> Casadinha. <br> 340.00 reais <br> 5 x no cartão. <br> Shopping Mega China.</p>
    </article>
  </a>