შესვლა

HTML › დამწყები › ტექსტი

სათაურები h1–h6

მარტივი⏱ 6 წთ+20 XP👑 Pro#HTML#სათაურები#h1#სტრუქტურა

რას ისწავლი

  • ექვსი სათაურის ელემენტი, <h1>-დან <h6>-მდე
  • როგორ ქმნის სათაურები გვერდის გეგმას
  • რატომ არის სათაური აგებულება და არა გარეგნობა

ექვსი დონე

HTML-ს ექვსი სათაურის ელემენტი აქვს: <h1>, <h2>, <h3>, <h4>, <h5> და <h6>. ასო h ინგლისური heading-ის (სათაური) შემოკლებაა, რიცხვი კი დონეა: 1 ყველაზე მნიშვნელოვანია, 6 ყველაზე ნაკლებად.

HTML
<h1>ბიტის სამზარეულო</h1>
<h2>საუზმე</h2>
<h3>ერბოკვერცხი</h3>
<h3>ბლინები</h3>
<h2>სადილი</h2>
<h3>ლობიანი</h3>

ბრაუზერი <h1>-ს ყველაზე დიდი შრიფტით ხატავს, <h6>-ს ყველაზე პატარათი. მაგრამ ზომა აქ მთავარი არ არის.

სათაურები გვერდის გეგმაა

სათაურები წიგნის სარჩევს ჰგავს. ზემოთ მოცემული კოდი ასეთ გეგმას ქმნის:

ტექსტი
ბიტის სამზარეულო
  საუზმე
    ერბოკვერცხი
    ბლინები
  სადილი
    ლობიანი

ყოველი <h2> <h1>-ის ნაწილია, ყოველი <h3> წინა <h2>-ის ნაწილი. ყურადღება მიაქციე: სათაური ტექსტს არ „შეიცავს“. ის უბრალოდ ნიშნავს, რომ აქ ახალი ნაწილი იწყება, და ეს ნაწილი გრძელდება შემდეგ იმავე ან უფრო მაღალი დონის სათაურამდე. ასეთ გეგმას ბევრი „მკითხველი“ იყენებს:

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

სამი წესი

  1. ერთი <h1> გვერდზე. ის გვერდის მთავარი თემაა, ხშირად <title>-ის მსგავსი.
  2. ნუ გამოტოვებ დონეებს. <h1>-ის შემდეგ <h2> მოდის და არა <h4>. დონე იმიტომ კი არ ირჩევა, რომ შრიფტი მოგეწონა, არამედ ადგილის მიხედვით გეგმაში. ქვემოთ დაბრუნება კი შეიძლება: <h3>-ის შემდეგ ახალი <h2> ნორმალურია.
  3. სათაური მხოლოდ სათაურისთვის. თუ უბრალოდ დიდი, მუქი ტექსტი გინდა, რომელიც სათაური არ არის, ეს CSS-ის საქმეა. სათაურის ელემენტი გეგმაში ჩნდება და ამიტომ აბნევს.

წესი „დონე აგებულებით, ზომა CSS-ით“ HTML-ის ერთ-ერთი მთავარი იდეაა: ელემენტს მისი მნიშვნელობის მიხედვით ირჩევ და არა გარეგნობის. ამ იდეას სემანტიკური HTML ჰქვია და მას ამ კურსში ბევრჯერ შეხვდები.

სცადე თავად

გაუშვი და ნახე ექვსივე დონე. მერე ააწყე შენი გვერდის გეგმა: ერთი <h1>, ორი <h2> და თითოეულის ქვეშ ერთი-ორი <h3>.

HTML · სცადე თავად

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

  • სათაურის არჩევა ზომით. <h4> იმიტომ, რომ „ლამაზი ზომისაა“, გეგმას ამახინჯებს. ზომას CSS-ით შეცვლი.
  • რამდენიმე <h1>. გვერდს ერთი მთავარი თემა აქვს.
  • სათაური აბზაცის შიგნით. <p><h2>...</h2></p> შეცდომაა: სათაური ბლოკური ელემენტია და თავისი ადგილი აქვს.

სავარჯიშო

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

HTML · სცადე თავად
💡 მინიშნება

<h1> ერთხელ, ორი <h2>, პირველი <h2>-ის ქვეშ ორი <h3>.

✅ ამოხსნის ნახვა
HTML
<h1>ექსკურსია მცხეთაში</h1>
<h2>მარშრუტი</h2>
<h3>სვეტიცხოველი</h3>
<p>დავათვალიერებთ საკათედრო ტაძარს ქალაქის ცენტრში.</p>
<h3>ჯვრის მონასტერი</h3>
<p>ავალთ მთაზე, საიდანაც ორი მდინარის შესართავი ჩანს.</p>
<h2>რა წავიღოთ</h2>
<p>წყალი, ქუდი და კარგი განწყობა.</p>

მინი-ქვიზი

1რამდენი <h1> უნდა იყოს გვერდზე?

2<h2>-ის შემდეგ ახალი ქვენაწილი იწყება. რომელი სათაური გამოიყენო?

3რატომ არის სათაურები მნიშვნელოვანი ეკრანის წამკითხველებისთვის?

შეჯამება

  • ექვსი დონე: <h1> (ყველაზე მნიშვნელოვანი) — <h6>.
  • სათაურები გვერდის გეგმას ქმნის, რომელსაც ადამიანები, ეკრანის წამკითხველები და საძიებო სისტემები იყენებენ.
  • ერთი <h1>, დონეები გამოტოვების გარეშე.
  • დონე მნიშვნელობით ირჩევა, ზომა CSS-ით იცვლება: ეს სემანტიკური HTML-ია.
📝 ჩემი შენიშვნა