Атрибут name тега <a> — якір усередині сторінки

HTML

<div id="block1">
  <p><a name="a1">Закладка 1</a></p>
  <a href="#a2">Посилання на закладку 2</a></div>

<div id="block2">
  <p><a name="a2">Закладка 2</a></p> 
  <a href="#a1">Посилання на закладку 1</a>
  
</div>

CSS

*{
    padding:0;
  margin:0;
}
p{
  font-size:40px;
     color:#f0f0f0;
 
}
a:link{
   color:#f10005;
  font-size:20px;
}

a:visited{
  color:#010005;
}

a:hover{
  color:#f10000;
}

a:active{
  color:#01c00f;
   font-size:19.5px;
}

#block1{
  width:100%;
  height:1000px;
  background:#0000ff;
}

#block2{
  width:100%;
  height:1000px;
  background:#ffff00;
}

HTML

<div class="shapka">липка шапка, під якою ховаються якорі</div>

<p class="nav">
    <a href="#staryj">До старої закладки (a name)</a> ·
    <a href="#novyj">До заголовка з id</a>
</p>

<div class="prostir">між посиланнями й ціллю — трохи тексту, щоб було куди прокручувати</div>

<a name="staryj"></a>
<h3 class="cil">Стара закладка: порожній теґ a з name</h3>
<p class="why">Перехід працює, і в Firefox цей теґ навіть збігається з :target.
    Але сам по собі він порожній: у розмітці лишається зайвий рядок, який нічого
    не означає ні для читалки екрана, ні для пошуковика.</p>

<div class="prostir">і ще трохи тексту</div>

<h3 class="cil" id="novyj">Сучасний якір: id прямо на заголовку</h3>
<p class="why">Той самий перехід, але закладкою стає сам заголовок. Нічого
    зайвого в розмітці немає, а знайти елемент можна звичайним пошуком за
    ідентифікатором.</p>

<div class="prostir">кінець прикладу</div>

CSS

.shapka {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -12px -12px 12px;
    padding: 10px 14px;
    background: #1b4f9c;
    color: #fff;
    font-weight: 600;
}

.nav {
    margin: 0 0 14px;
}

.nav a {
    color: #1b4f9c;
}

.prostir {
    margin: 12px 0;
    padding: 40px 12px;
    background: #f2f4f7;
    color: #8a94a6;
}

.cil {
    margin: 0;
    padding: 8px 10px;
    font-size: 1em;
    scroll-margin-top: 70px;
}

.cil:target,
a[name]:target + .cil {
    background: #fff3c4;
    box-shadow: inset 6px 0 0 #f2b134;
}

.why {
    max-width: 520px;
    margin: 6px 0 0;
    color: #5a6472;
    font-size: .9em;
}

html {
    scroll-behavior: smooth;
}