ელემენტების ჩადგმა

რას ისწავლი

• რას ნიშნავს ელემენტის ჩადგმა (nesting) და როგორ ქმნის ის ხეს
• „ბოლოს გახსნილი, პირველი იხურება“ წესი
• რომელი ელემენტები შეიძლება ერთმანეთში ჩაისვას და რომელი არა

ელემენტი ელემენტში

უკვე ნახე, რომ <head> და <body> <html>-ის შიგნითაა, <title> კი <head>-ის შიგნით. ეს ჩადგმაა (nesting): ერთი ელემენტი მეორის შინაარსის ნაწილია. ჩადგმა ყველგანაა, აბზაცის შიგნითაც:

<p>ბიტს <strong>ძალიან</strong> უყვარს კოდი.</p>

<strong> (მუქი, მნიშვნელოვანი ტექსტი) <p>-ის შიგნითაა. ამიტომ სიტყვა „ძალიან“ აბზაცის ნაწილია და თან მუქადაც იწერება.

ოჯახის ხე

ჩადგმული ელემენტები ხეს ქმნის, ზუსტად ისე, როგორც ოჯახის საგვარეულო ხე. ამიტომ მათ ოჯახური სიტყვებით აღწერენ:

• მშობელი (parent): ელემენტი, რომლის შიგნითაც სხვა დგას. <p> არის <strong>-ის მშობელი.
• შვილი (child): ელემენტი, რომელიც პირდაპირ სხვის შიგნითაა. <strong> არის <p>-ის შვილი.
• და-ძმა (sibling): ერთი მშობლის შვილები. <head> და <body> და-ძმები არიან.
• შთამომავალი (descendant): ნებისმიერი ელემენტი, რომელიც სადმე შიგნითაა, შვილის შვილიც.

<body>
  <h1>ჩემი ცხოველები</h1>
  <p>მყავს <em>კატა</em> და <em>ძაღლი</em>.</p>
</body>

აქ <body> არის <h1>-ისა და <p>-ის მშობელი. <h1> და <p> და-ძმები არიან. ორი <em> (დახრილი ტექსტი) <p>-ის შვილებია და <body>-ის შთამომავლები.

ბრაუზერი HTML-ს სწორედ ასეთ ხედ ინახავს მეხსიერებაში. ამ ხეს DOM ჰქვია (Document Object Model) და DevTools-ის Elements ჩანართი სწორედ მას აჩვენებს. როცა JavaScript-ს ისწავლი, გვერდს ამ ხის გავლით შეცვლი, ამიტომ ჩადგმის სწორად გაგება ახლავე მნიშვნელოვანია.

ბოლოს გახსნილი, პირველი იხურება

ჩადგმის მთავარი წესი: ელემენტები ერთმანეთის შიგნით უნდა იყოს და არა ერთმანეთზე „გადაჯვარედინებული“. ბოლოს გახსნილი ტეგი პირველი უნდა დაიხუროს, ისევე როგორც მათემატიკაში ფრჩხილები:

<!-- სწორია: strong მთლიანად p-ის შიგნითაა -->
<p>ეს <strong>მნიშვნელოვანია</strong>.</p>

<!-- არასწორია: p დაიხურა მანამ, სანამ strong -->
<p>ეს <strong>მნიშვნელოვანია.</p></strong>

მეორე ვარიანტს ბრაუზერი როგორმე „გაასწორებს“, მაგრამ შედეგი შეიძლება არ იყოს ის, რასაც ელი. შეწევა გეხმარება: თუ ყოველ შვილს მშობელზე მეტად შეწევ, გადაჯვარედინება თვალში მოგხვდება.

ვინ ვის შიგნით

ყველა ელემენტი ყველაფერს ვერ შეიცავს. მარტივი წესი დასაწყისისთვის:

• ბლოკური ელემენტები (h1, p, ul, div და სხვა) ახალი ხაზიდან იწყება და მთელ სიგანეს იკავებს.
• სტრიქონული ელემენტები (strong, em, a, img და სხვა) ტექსტის შიგნით, იმავე ხაზზე დგას.

სტრიქონული ელემენტი ბლოკურის შიგნით ჩადგება, მაგრამ აბზაცის შიგნით სხვა აბზაცი ან სათაური ვერ ჩაისმის: <p><h2>...</h2></p> შეცდომაა. ბრაუზერი ასეთ დროს აბზაცს ჩუმად ხურავს და სათაურს მის გარეთ სვამს.

სცადე თავად

მეორე აბზაცში ტეგები გადაჯვარედინებულია. გაუშვი, მერე DevTools-ის გარეშეც შეამჩნევ განსხვავებას? გაასწორე ისე, რომ ორივე აბზაცი ერთნაირად გამოჩნდეს.

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

• გადაჯვარედინებული ტეგები. <b><i>ტექსტი</b></i> არასწორია. სწორია <b><i>ტექსტი</i></b>.
• ბლოკური ელემენტი აბზაცის შიგნით. სათაური, სია ან სხვა აბზაცი <p>-ის შიგნით არ იწერება.
• შეწევის გარეშე კოდი. ჩადგმული ელემენტები შეწევით ბევრად უფრო ადვილად იკითხება.

<h1>ჩემი ჰობი</h1>
<p>
  მიყვარს <strong><em>ხატვა</em></strong> და მუსიკა.
</p>

მინი-ქვიზი

შეჯამება

• ჩადგმა ნიშნავს ელემენტის სხვა ელემენტის შიგნით მოთავსებას. ჩადგმული ელემენტები ხეს ქმნის, DOM-ს.
• მშობელი, შვილი, და-ძმა, შთამომავალი: ოჯახის ხის სიტყვები.
• ბოლოს გახსნილი ტეგი პირველი იხურება. გადაჯვარედინება შეცდომაა.
• სტრიქონული ელემენტი ბლოკურში ჩადგება, მაგრამ აბზაცში სათაური ან სხვა აბზაცი ვერ ჩაისმის.