Смысловая разметка

Смысловые теги сообщают, какая это часть страницы: <header> — шапка, <main> — основное содержимое, <section> — раздел, <footer> — подвал.

Внешне страница почти не изменится. Зато программы экранного доступа, которыми пользуются незрячие люди, и поисковые системы лучше поймут её устройство.

Теги вкладываются друг в друга: имя и абзац о себе — в <header>, раздел навыков — в <section> внутри <main>, контакты — в <footer>. Отступы в коде не обязательны, но помогают видеть вложенность.

<header>
  <h1>Портфолио Анны</h1>
  <p>Учусь создавать сайты.</p>
</header>

<main>
  <section>
    <h2>Навыки</h2>
    <ul>…</ul>
  </section>
</main>

<footer>
  <h2>Контакты</h2>
  <p><a href="mailto:anna@example.com">Написать мне</a></p>
</footer>