div და span

რას ისწავლი

• რისთვისაა <div> და <span> და რით განსხვავდება ისინი ერთმანეთისგან
• როგორ მისცე ელემენტს სახელი class ატრიბუტით
• რატომ ჯობს სემანტიკური ელემენტი, როცა ასეთი არსებობს

ყუთები მნიშვნელობის გარეშე

აქამდე ნასწავლ ელემენტებს მნიშვნელობა ჰქონდათ: <h1> სათაურია, <p> აბზაცი, <ul> სია, <nav> ნავიგაცია. მაგრამ ზოგჯერ ელემენტების ჯგუფი უბრალოდ ერთად უნდა „შეფუთო“, მაგალითად CSS-ით ერთი ფონი მისცე, ან JavaScript-ით ერთად დამალო, და ამ ჯგუფს რაიმე განსაკუთრებული მნიშვნელობა არ აქვს. ამისთვის HTML-ს ორი „ცარიელი“ ელემენტი აქვს:

• <div> (division, განყოფილება) ბლოკური ყუთია: ახალი ხაზიდან იწყება და მთელ სიგანეს იკავებს. მასში შეიძლება ნებისმიერი ელემენტი იყოს: სათაურები, აბზაცები, სურათები, სხვა div-ები.
• <span> სტრიქონული ყუთია: ტექსტის შიგნით დგას და მხოლოდ იმდენ ადგილს იკავებს, რამდენსაც მისი შინაარსი.

<div class="card">
  <h3>ბიტი</h3>
  <p>ასაკი: <span class="number">7</span> წელი</p>
</div>

ბრაუზერი ამ ელემენტებს არანაირად არ აფორმებს: <div> უბრალოდ ხაზს წყვეტს, <span> კი ეკრანზე საერთოდ შეუმჩნეველია. მათი ძალა CSS-თან და JavaScript-თან ერთად ჩნდება.

class: ჯგუფის სახელი

<div> და <span> თითქმის ყოველთვის class ატრიბუტთან ერთად გამოიყენება. class ელემენტს სახელს აძლევს, რომლითაც მას CSS-ში იპოვი: „ყველა ელემენტს კლასით card მიეცი თეთრი ფონი და ჩრდილი“.

class-ს და id-ს შორის მნიშვნელოვანი განსხვავებაა:

• id უნიკალურია: გვერდზე მხოლოდ ერთ ელემენტს შეიძლება ჰქონდეს.
• class შეიძლება ბევრ ელემენტს ჰქონდეს ერთდროულად: ათივე პროდუქტის ბარათს class="card". ერთ ელემენტს რამდენიმე კლასიც შეიძლება ჰქონდეს, ინტერვალით: class="card featured".

კლასის სახელი აღწერს, რა არის ელემენტი, და არა როგორ გამოიყურება: class="warning" ჯობს class="red-text"-ს. ხვალ თუ გაფრთხილება ნარინჯისფერი გახდება, red-text ტყუილი იქნება.

div-ების ზღვა

ადრე, როცა სემანტიკური ელემენტები ჯერ არ არსებობდა, საიტები მხოლოდ div-ებისგან იგებოდა: <div class="header">, <div class="menu">, <div class="footer">. ასეთ კოდს ხუმრობით „div-ების წვნიანს“ (div soup) ეძახიან. ბრაუზერი და ეკრანის წამკითხველი ვერ ხვდება, რომელი div მენიუა, რომელი ძირი: ყველა ერთნაირი უაზრო ყუთია.

დღეს HTML-ს თითოეული ასეთი ნაწილისთვის თავისი ელემენტი აქვს: <header>, <nav>, <main>, <footer> და სხვა. მათ ამ მოდულის შემდეგ თავებში ისწავლი. ამიტომ წესი ასეთია: ჯერ ეძებე სემანტიკური ელემენტი; <div> და <span> მხოლოდ მაშინ, როცა შესაფერისი არ არსებობს.

სცადე თავად

ეს მაგალითი პატარა CSS-ს შეიცავს, რომ div-ები და span-ები დაინახო: ყოველ კლასს თავისი ფერი აქვს. დაამატე მესამე ბარათი იმავე კლასით და ნახე, რომ მასაც იგივე სტილი მიეცა.

ხშირი შეცდომები

• div ყველაფრისთვის. თუ არსებობს ელემენტი, რომელიც ზუსტად აღწერს შინაარსს (<nav>, <button>, <p>), ის გამოიყენე.
• div ღილაკად. <div> დაჭერადი ღილაკივით არ იქცევა: კლავიატურით ვერ მიხვალ და წამკითხველი ვერ გამოაცხადებს. ღილაკისთვის <button>.
• კლასის სახელი გარეგნობით. class="big-blue" დიზაინის ცვლილებისას ტყუილად იქცევა. დაარქვი შინაარსით.

<style>
  .student { border: 2px solid #8c8; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
  .score { font-weight: bold; }
</style>
<div class="student">
  <h3>ნინო</h3>
  <p>ქულა: <span class="score">95</span></p>
</div>
<div class="student">
  <h3>ლუკა</h3>
  <p>ქულა: <span class="score">88</span></p>
</div>

მინი-ქვიზი

შეჯამება

• <div> ბლოკური ყუთია, <span> სტრიქონული. მნიშვნელობა არცერთს არ აქვს.
• ისინი CSS-ისთვის და JavaScript-ისთვის გამოიყენება, ჩვეულებრივ class-თან ერთად.
• class შეიძლება ბევრ ელემენტს ჰქონდეს, id მხოლოდ ერთს. კლასს შინაარსით დაარქვი.
• სემანტიკური ელემენტი ჯობს: div მხოლოდ მაშინ, როცა სხვა არ გამოდგება.