There is a peculiar temptation in front-end work to collect elements the way some people collect stamps. We learn about <dialog>, <details>, <output>, and feel briefly clever. But the elements that actually carry the web are boring, old, and quietly indispensable. Master those first, and the exotic ones become footnotes.
Strip a page back to its structure and you find the same cast every time: headings, paragraphs, lists, links, and a few sectioning containers. These are the elements you cannot fake with a <div> and a class name, because they carry meaning that browsers, screen readers, and search engines actually read.
<h1>–<h6>) form the document outline. One <h1> per view; never skip levels for visual effect.<p>) are for prose, not for spacing. If you reach for an empty <p>, you want margin.<ul>, <ol>, <dl>) express relationships between items, not just bullet decoration.<a>) navigate. If it goes somewhere, it is a link; if it does a thing, it is a <button>.HTML5 gave us <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. The trap is treating them as fancier divs. They are not interchangeable.
<main>
<article>
<h2>The elementary elements</h2>
<p>Structure first, style later.</p>
</article>
<aside>
<h2>Related reading</h2>
</aside>
</main>A good rule: <article> is a thing that would still make sense syndicated on its own; <section> is a thematic grouping that needs a heading to justify its existence. If a <section> has no natural heading, it probably wants to be a <div>.
Semantics is not decoration you add at the end. It is the skeleton you hang everything else on.
Inside your prose, a few inline elements do quiet heavy lifting. <strong> signals importance and <em> signals stress emphasis — both convey meaning to assistive technology, unlike their purely visual cousins <b> and <i>. Reach for <time>, <code>, <abbr>, and <q> when they fit; each one tells a machine something a <span> never could.
The best front-end authors are not the ones who know the rarest element. They are the ones whose <p> is always a paragraph, whose <a> always goes somewhere, and whose headings always describe what follows. Learn the elementary elements properly and the rest of HTML stops being a vocabulary test and starts being a language you speak.