სემანტიკური HTML ნიშნავს ელემენტების გამოყენებას, რომლებიც აღწერენ მათი ამ შინაარსის მნიშვნელობას, არა მხოლოდ მის გარეგნობას. <nav> ამბობს "ეს არის ნავიგაცია"; <button> ამბობს "ეს კლიკებადია" — მაშინ როცა <div> არაფერ ამბობს.
Home
Home
ორივე შეიძლება სტილიზირდეს ერთნაირად, მაგრამ მხოლოდ მეორე ესმის ბრაუზერებს, ეკრანის მკითხველებს და საძიებო სისტემებს.
<header>, <nav>, <main>, <footer> დან, რაც მომხმარებლებს აძლევს გადახტომის შესაძლებლობას რეგიონებს შორის. <div> ების კედელი მათ არაფერი იძლევა.<h1>, <article>, <main> და მესმით გვერდის სტრუქტურა.<button> ფოკუსირებადია, კლავიატურით აქტივირებადი (Enter/Space) და გამოცხადებულია როგორც ღილაკი — <div onclick> არაფერი არ არის აქედან თუ თვითონ არ დაამატებთ ამას ხელით.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
ოქროს წესი: აირჩიეთ ელემენტი, რომელიც მეანიშნება თქვენი ნიმუში, და მხოლოდ გამოიყენეთ <div>/<span> როგორც სტილის კონტეინერი, როდესაც სემანტიკური ელემენტი არ შემოსაფარი.
ეს არის ხელმისაწვდომობის და SEO-ს ყველაზე იაფი გამარჯვება, რომელიც შეგიძლიათ გააკეთოთ.