DOCTYPE და html ელემენტი

რას ისწავლი

• რატომ იწყება ყოველი HTML დოკუმენტი <!DOCTYPE html>-ით
• რა არის <html> ელემენტი და რატომ ჰქვია მას ძირეული
• რისთვის გჭირდება lang ატრიბუტი

DOCTYPE: ბრაუზერის „რეჟიმის გადამრთველი“

<!DOCTYPE html> ტეგი არ არის, ის დოკუმენტის ტიპის განცხადებაა (document type declaration). მას ერთი საქმე აქვს: ბრაუზერს უთხრას, რომ გვერდი თანამედროვე წესებითაა დაწერილი.

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

• სტანდარტების რეჟიმი (standards mode): თანამედროვე, ყველა ბრაუზერში ერთნაირი ქცევა.
• თავსებადობის რეჟიმი (quirks mode): ძველი ბრაუზერების უცნაურობების იმიტაცია, რომ ძველი საიტები არ „დაიშალოს“.

თუ DOCTYPE არ წერია, ბრაუზერი ფიქრობს, რომ გვერდი ძველია, და თავსებადობის რეჟიმს რთავს. ამ დროს ზომები, დაშორებები და განლაგება შეიძლება მოულოდნელად იქცეოდეს, განსაკუთრებით როცა CSS-ს დაამატებ. ამიტომ წესი მარტივია: ყოველი HTML ფაილი <!DOCTYPE html>-ით დაიწყე.

ძველ საიტებზე შეიძლება შეხვდე გრძელ DOCTYPE-ებს, მაგალითად <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...>. თანამედროვე HTML-ს მხოლოდ მოკლე ვერსია სჭირდება და ასოების ზომას მნიშვნელობა არ აქვს: <!doctype html>-იც მუშაობს.

html: ყველაფრის გარსი

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

<!DOCTYPE html>
<html lang="ka">
  <head>...</head>
  <body>...</body>
</html>

დოკუმენტში მხოლოდ ერთი <html> ელემენტია და </html> ფაილის ბოლო ტეგია.

lang: გვერდის ენა

lang ატრიბუტი ამბობს, რა ენაზეა დაწერილი გვერდი. ქართულისთვის ka, ინგლისურისთვის en, რუსულისთვის ru, გერმანულისთვის de. ეს პატარა ატრიბუტი ბევრს აკეთებს:

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

თუ გვერდის ნაწილი სხვა ენაზეა, lang ცალკე ელემენტსაც შეიძლება მიეცეს: <p lang="en">Hello, world!</p>.

სცადე თავად

გაუშვი. ორი აბზაცი სხვადასხვა ენაზეა და თითოეულს თავისი lang აქვს. დაამატე მესამე აბზაცი სხვა ენაზე შესაბამისი lang-ით.

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

• დავიწყებული DOCTYPE. გვერდი ერთი შეხედვით მუშაობს, მაგრამ თავსებადობის რეჟიმში CSS უცნაურად იქცევა.
• DOCTYPE არა პირველ ხაზზე. მის წინ არაფერი უნდა იყოს, არც კომენტარი.
• არასწორი ენის კოდი. ქართულის კოდია ka და არა ge (ge საქართველოს, ქვეყნის კოდია, მაგალითად დომენებში).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This page is written in English.</p>
  </body>
</html>

მინი-ქვიზი

შეჯამება

• <!DOCTYPE html> სტანდარტების რეჟიმს რთავს და ყოველთვის პირველ ხაზზე იწერება.
• <html> ძირეული ელემენტია: <head> და <body> მის შიგნითაა.
• lang="ka" ამბობს, რომ გვერდი ქართულადაა. სხვა ენის ნაწილს თავისი lang შეიძლება მიეცეს.
• ენის კოდები: ka, en, ru, de. ქვეყნის კოდი ge სხვა რამეა.