თანამედროვე ვებ-განვითარებაში სემანტიკური კოდის მნიშვნელობა ხშირად იჩრდილება ვიზუალური მხარის მიღმა. ერთ-ერთი ყველაზე უგულებელყოფილი ელემენტია <dl>, იგივე აღწერილობითი სია (description list), რომელიც იდეალურია მონაცემთა სახელ-მნიშვნელობის (name-value) წყვილებისთვის.

რა არის <dl> და როგორ მუშაობს ის?

ბევრი დეველოპერი მიჩვეულია <ul> ან <ol> ელემენტების გამოყენებას, მაგრამ როცა საქმე ეხება ისეთ ინფორმაციას, როგორიცაა ტექნიკური მახასიათებლები, ფასების სია ან გლოსარიუმი, <dl> გაცილებით ზუსტი არჩევანია. ეს ელემენტი სამი ძირითადი კომპონენტისგან შედგება:

  • <dl>: თავად სია, რომელიც აერთიანებს მთლიან სტრუქტურას.
  • <dt> (description term): ტერმინი ან სახელი.
  • <dd> (description detail): ტერმინის შესაბამისი აღწერილობა ან მნიშვნელობა.

მოქნილი სტრუქტურა

ეს ელემენტი გაცილებით მოქნილია, ვიდრე ერთი შეხედვით ჩანს. მაგალითად, თუ ერთ ტერმინს რამდენიმე მნიშვნელობა აქვს — ვთქვათ, წიგნს ჰყავს რამდენიმე ავტორი — თქვენ შეგიძლიათ მარტივად დაამატოთ რამდენიმე <dd> ერთი <dt>-ისთვის. ასევე, სტილიზაციის მიზნით, <dt> და <dd> ჯგუფების შეფუთვა შესაძლებელია <div> ელემენტით.

რატომ უნდა მიატოვოთ <div>-ების ბუდეები?

ბევრი გუნდი კვლავ იყენებს ჩასმულ <div>-ებს ამგვარი მონაცემების გამოსატანად. თუმცა, სემანტიკური მარკირების გარეშე, ბრაუზერებსა და დამხმარე ტექნოლოგიებს უჭირთ ინფორმაციის ლოგიკური კავშირების ამოცნობა. როდესაც კომპიუტერი ან ეკრანის მკითხველი (screen reader) ხედავს <dl> სტრუქტურას, ის მომხმარებელს უკეთეს გამოცდილებას სთავაზობს.

სემანტიკური ელემენტების გამოყენება არ არის მხოლოდ ფორმალობა; ეს არის გზა, რომლითაც ჩვენს მომხმარებლებს ვაძლევთ ინფორმაციას უფრო გასაგები და ხელმისაწვდომი ფორმით.

მომხმარებლისთვის, რომელიც იყენებს დამხმარე ტექნოლოგიებს, ამ ტიპის სემანტიკა ნიშნავს, რომ სია აღიქმება როგორც მონაცემთა წყვილების სტრუქტურირებული ერთობლიობა და არა უბრალოდ ტექსტის შემთხვევითი ნაკრები. მიუხედავად იმისა, რომ მხარდაჭერა ყველა ბრაუზერში იდეალური არ არის, <dl> რჩება საუკეთესო პრაქტიკად.

პრაქტიკული მაგალითი: Dungeons & Dragons

ერთ-ერთი საუკეთესო მაგალითი, სადაც <dl> იდეალურად ჯდება, არის სათამაშო სტატისტიკის ბლოკები (statblocks). ისინი სავსეა მონაცემთა წყვილებით — მაგალითად, ძალა (STR), მოხერხებულობა (DEX) და სხვა. ამგვარი მონაცემების სემანტიკურად გაფორმება აადვილებს მათ დამუშავებასა და აღქმას როგორც ადამიანებისთვის, ისე მანქანებისთვის.