semantic-html-and-seolisted

# Semantic HTML and SEO Good HTML is not just markup — it is the contract between your content, search engines, assistive technologies, and the browser. Semantic HTML, correct metadata, and progressive enhancement make UI resilient, findable, and accessible by default. --- ## Semantic HTML5 Use the element that describes the content's meaning, not just its appearance. ### Document structure ```html <header> <!-- site header, logo, primary nav --> <nav> <!-- navigation links --> <main> <!-- primary page content, one per page --> <article> <!-- self-contained content: blog post, product card, news item --> <section> <!-- thematic grouping with a heading --> <aside> <!-- tangentially related content: sidebar, callout --> <footer> <!-- site footer, secondary links, copyright --> ``` ### Headings One `<h1>` per page — the primary topic. Headings form an outline: do not skip levels (`h1` → `h3` without `h2`). ```html <h1>Product name</h1> <h2>Features</h2> <h3>Feature detail</h3> <h2>Pricing</h2> ``` ### Interactive elements ```html <button> <!-- clickable action, submits or triggers JS --> <a href> <!-- navigation to a URL --> <input> <!-- user data entry --> <select> <!-- option selection --> <details> / <summary> <!-- native disclosure/accordion --> ``` Never use `<div>` or `<span>` as interactive elements without full ARIA annotation — and even then, prefer the native element. --- ## Images and Alt Text