როგორ დავყოთ სემანტიკურად კონტენტი გვერდზე?

სემანტიკური შინაარსის განყოფილება მიღწეულია შესაბამის HTML5-ტეგების გამოყენებით.

ძირითადი სემანტიკური ტეგები:

<header>: შესავალი ან ნავიგაციის ან შესავალი ელემენტების ჯგუფი. ხშირად შეიცავს საიტის სათაურს, ნავიგაციას, ლოგოს.
<nav>: ნავიგაციის ბლოკი.
<main>: დოკუმენტის მთავარი შინაარსი. უნდა იყოს უნიკალური გვერდზე (არ უნდა იდეორებოდეს ფუტერში, ჰედერში, გვერდის ზოლში).
<article>: დამოუკიდებელი, ავტონომიური შინაარსის ფრაგმენტი (მუხლი, ბლოგის პოსტი, კომენტარი).
<section>: დოკუმენტის ცალკეული განყოფილება (თავი, აბზაცი, მთავარი გვერდის შინაარსის ბლოკი). უნდა ჰქონდეს სათაური (<h1>-<h6>).
<aside>: შინაარსის ნაწილი, რომელიც ირიბად უკავშირდება ძირითად შინაარსს (გვერდის ზოლი, ციტატა, რეკლამა).
<footer>: განყოფილების ან დოკუმენტის ქვედა ნაწილი. ჩვეულებრივ შეიცავს ავტორის ინფორმაციას, ავტორ უფლებებს, დაკავშირებული დოკუმენტების ბმულებს.
<figure>: დამოუკიდებელი შინაარსი (სურათი, დიაგრამა, ცხრილი), რომელიც შეიძლება გადაიტანოს დოკუმენტის ძირითად ნაკადიდან მნიშვნელობის დაკარგვის გარეშე. ხშირად გამოიყენება <figcaption>-თან ერთად.
<figcaption>: <figure> ელემენტისთვის აღწერა.
<mark>: ხაზს უსვამს (მარკირებს) ტექსტს, რომელიც განსაკუთრებულ მნიშვნელობას ან ინტერესს იძენს გარემომცველ ტექსტში.
<time>: წარმოადგენს კონკრეტულ დროს ან დროის მონაკვეთს.

სემანტიკური ტეგების გამოყენება აუმჯობესებს ხელმისაწვდომობას, SEO-ს და კოდის შენარჩუნებას. საძიებო სისტემები და დახმარებითი ტექნოლოგიები (ეკრანული მკითხველები) უკეთესად ხვდებიან გვერდის სტრუქტურას.