Anlamsal HTML, yalnızca içeriğin görünüşünü değil, anlamını tanımlayan öğeleri kullanmak anlamına gelir. <nav> "bu navigasyon"dır demiş olur; <button> "bu tıklanabilir"dir demiş olur — oysa <div> hiçbir şey demez.
html
Home
Home
Her ikisi de aynı şekilde şekillendirilebilir, ancak yalnızca ikincisi tarayıcılar, ekran okuyucular ve arama motorları tarafından anlaşılır.
<header>, <nav>, <main>, <footer> öğelerinden bir yer işareti haritası oluştururlar ve kullanıcıların bölgeler arasında geçmesini sağlarlar. <div> duvarı onlara hiçbir şey vermez.<h1>, <article>, <main> içindeki içeriğe ağırlık verirler ve sayfa yapısını anlarlar.<button> odaklanabilir, klavye ile etkinleştirilebilir (Enter/Space) ve bir düğme olarak duyurulur — <div onclick> bunların hiçbiri değildir, bunu kendiniz yeniden eklememedikçe.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Temel kural: amaçladığınız şeyi ifade eden öğeyi seçin ve <div>/<span> öğelerini yalnızca anlamsal bir öğe uygun olmadığında şekillendirme kapsayıcıları olarak kullanın.
Bu yapabileceğiniz en ucuz erişilebilirlik ve SEO kazancıdır.