Semantyczny HTML oznacza używanie elementów, które opisują znaczenie ich zawartości, a nie tylko jej wygląd. <nav> mówi „to jest nawigacja"; <button> mówi „to jest klikalne" — natomiast <div> nic nie mówi.
html
Home
Home
Semantyczny HTML oznacza używanie elementów, które opisują znaczenie ich zawartości, a nie tylko jej wygląd. <nav> mówi „to jest nawigacja"; <button> mówi „to jest klikalne" — natomiast <div> nic nie mówi.
Home
Home
Oba mogą być stylizowane identycznie, ale tylko drugi jest zrozumiały dla przeglądarek, czytników ekranu i wyszukiwarek.
<header>, <nav>, <main>, <footer>, umożliwiając użytkownikom przechodzenie między regionami. Mur <div>ów nie daje im nic.<h1>, <article>, <main> i rozumieją strukturę strony.<button> jest focusable, aktywowalne za pomocą klawiatury (Enter/Space) i ogłaszane jako przycisk — <div onclick> nic z tego nie posiada, jeśli nie dodasz tego wszystkiego ręcznie.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Reguła kciuka: sięgnij po element, który oznacza to, co zamierzasz, i używaj <div>/<span> jako kontenerów do stylizacji tylko wtedy, gdy żaden element semantyczny nie pasuje.
To najtańsze wygranie dostępności i SEO, jakie możesz zrobić.