მონაცემების ვალიდობის შემოწმება. სწორი html კოდი სწორი მოთხოვნები

აქამდე ჩვენ განვიხილეთ HTML კოდის ცალკეული ნაწილები. მაგრამ HTML დოკუმენტი (ან ვებ გვერდი, რაც იგივეს ნიშნავს) მოითხოვს გარკვეულ სტრუქტურას, რათა იყოს მოქმედი.

რატომ ვზრუნავთ HTML დოკუმენტის ვალიდაციაზე?

• სისწორე: სწორი დოკუმენტი ნაჩვენებია ბრაუზერში.
• გამართვა: HTML-ის ცუდმა კოდმა შეიძლება გამოიწვიოს შეცდომები, რომელთა აღმოჩენა რთულია.
• შენახვა: მოქმედი დოკუმენტი უფრო ადვილია მოგვიანებით განახლება, თუნდაც სხვისთვის.

პირველი ინფორმაცია ჩვენ ვწერთ არის ტიპი HTML დოკუმენტი - doctype.

იფიქრეთ დოქტიპზე, როგორც მანქანის ვერსიაზე წლების განმავლობაში: Ford Fiesta, რომელიც იყიდეთ 1986 წელს, იყო Fiesta 2. თუ დღეს იყიდით, ეს არის Fiesta 7.

ადრე HTML-ის რამდენიმე ვერსია თანაარსებობდა (XHTML და HTML 4.01 კონკურენტ სტანდარტებს წარმოადგენდნენ). ამჟამად, HTML5 არის ნორმა.

ბრაუზერს რომ უთხრათ, რომ HTML დოკუმენტი არის HTML5, უბრალოდ დაიწყეთ თქვენი დოკუმენტი შემდეგი ხაზით:

ესე იგი. უბრალოდ დააინსტალირეთ და დაივიწყეთ.

შეიძლება გაინტერესებთ, რატომ არ არის აღნიშნული HTML5 დოქტიპი რიცხვი 5. W3C-მა ჩათვალა, რომ დოქტიპის წინა განმარტებები ძალიან დამაბნეველი იყო და გამოიყენა შესაძლებლობა, გაემარტივებინა იგი HTML ვერსიის ხსენების მოხსნით.

გარდა doctype ხაზისა, თქვენი მთელი HTML დოკუმენტი უნდა განთავსდეს ელემენტის შიგნით:

ტექნიკურად არის ყველა HTML ელემენტის წინაპარი.

როგორ ტარდება ატრიბუტები დამატებითი ინფორმაცია HTML ელემენტისთვის, ელემენტი ასევე შეიცავს დამატებით ინფორმაციას მთელი ვებ გვერდისთვის.

მაგალითად, გვერდის სათაური (ჩანართში ნაჩვენები) არის:

ჩემი ზღაპრული ბლოგი

შემდეგი HTML ელემენტები შეიძლება გამოჩნდეს და მხოლოდ:

მიუხედავად იმისა, რომ ის შეიცავს მხოლოდ მეტამონაცემებს, რომლებიც საერთოდ არ არის გამიზნული გამოსატანად (გარდა ), ელემენტი არის ის, სადაც ჩვენ ვწერთ მთელ ჩვენს შინაარსს. ყველაფერი შიგნით გამოჩნდება ბრაუზერის ფანჯარაში.

ყველა ამ მოთხოვნის კომბინაციით, ჩვენ შეგვიძლია დავწეროთ მარტივი და მოქმედი HTML დოკუმენტი:

MarkSheet

გამარჯობა მსოფლიო!

თუ ამ მაგალითს ბრაუზერში უყურებთ, დაინახავთ, რომ:

• "MarkSheet" იწერება ბრაუზერის ჩანართზე;
• "გამარჯობა სამყარო!" ეს არის ერთადერთი ტექსტი, რომელიც ნაჩვენებია ფანჯარაში, რადგან ის ერთადერთი შინაარსია.

W3C გთავაზობთ მარკირების ვალიდაციის სერვისს, რათა შეამოწმოს ნებისმიერი HTML დოკუმენტი შეცდომებსა და გაფრთხილებებზე.

საიტის HTML კოდის მოქმედების შემოწმება აუცილებლად შედის ჩემს . მაგრამ არ არის საჭირო SEO-ს პოპულარიზაციაზე ვალიდაციის შეცდომების მნიშვნელობის გადაჭარბება - ეს ძალიან მცირეა. TOP-ში ნებისმიერი თემისთვის იქნება საიტები ასეთი შეცდომების დიდი რაოდენობით და ისინი კარგად ცხოვრობენ.

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

საიტის კოდის დადასტურება მოწმდება გამოყენებით ონლაინ სერვისი W3C HTML Validator. თუ არის შეცდომები, სერვისი გაძლევთ სიას. ახლა გავაანალიზებ ყველაზე გავრცელებულ შეცდომებს, რომლებიც შემხვედრია საიტებზე.

• შეცდომა: დუბლიკატი ID min_value_62222

და ამ შეცდომის უკან არის გაფრთხილება.

• გაფრთხილება: ID min_value_62222 პირველი შემთხვევა აქ იყო

ეს ნიშნავს, რომ სტილის იდენტიფიკატორის ID არის დუბლირებული, რომელიც, html მოქმედების წესების მიხედვით, უნიკალური უნდა იყოს. ID-ის ნაცვლად, შეგიძლიათ გამოიყენოთ CLASS დუბლიკატი ობიექტებისთვის.

ამის გამოსწორება სასურველია, მაგრამ არა ძალიან კრიტიკული. თუ ასეთი შეცდომები ბევრია, მაშინ უმჯობესია მათი გამოსწორება.

ანალოგიურად, შეიძლება არსებობდეს სხვა ვარიანტები:

• შეცდომა: დუბლიკატი ID placeWorkTimes
• შეცდომა: დუბლიკატი ID callbackCss-css
• შეცდომა: დუბლიკატი ID Capa_1

შემდეგი არის ძალიან გავრცელებული გაფრთხილება.

• გაფრთხილება: ტიპის ატრიბუტი არასაჭიროა JavaScript რესურსებისთვის

ეს არის ძალიან გავრცელებული შეცდომა ვებსაიტის ვალიდაციის შემოწმებისას. HTML5 წესების მიხედვით, სკრიპტის ტეგისთვის ტიპი ატრიბუტი არ არის საჭირო.

მსგავსი გაფრთხილება სტილისთვის:

• გაფრთხილება: სტილის ელემენტის ტიპის ატრიბუტი საჭირო არ არის და უნდა გამოტოვოთ

ამ გაფრთხილებების გამოსწორება სასურველია, მაგრამ არა კრიტიკული. ზე დიდი რაოდენობითჯობია გაასწორო.

• გაფრთხილება: მოერიდეთ ხედვის პორტის მნიშვნელობებს, რომლებიც ხელს უშლის მომხმარებლებს დოკუმენტების ზომის შეცვლას

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

მე ეს გაფრთხილება ძალიან არასასურველად მიმაჩნია, მომხმარებლისთვის მოუხერხებელია და მინუსია ქცევითი მიზეზების გამო. აღმოიფხვრა ამ ელემენტების ამოღებით - მაქსიმალური მასშტაბი=1.0 და მომხმარებლის მასშტაბირება=არა.

• შეცდომა: itemprop ატრიბუტი იყო მითითებული, მაგრამ ელემენტი არ არის რომელიმე ელემენტის თვისება

ეს არის მიკრო მარკირება, itemprop ატრიბუტი ელემენტის შიგნით უნდა იყოს ელემენტის სკოპით. ვფიქრობ, ეს შეცდომა არ არის კრიტიკული და შეიძლება დარჩეს ისე, როგორც არის.

• გაფრთხილება: დოკუმენტები არ უნდა გამოიყენონ შესახებ:legacy-compat, გარდა იმ შემთხვევისა, როცა გენერირებულია ძველი სისტემებით, რომლებსაც არ შეუძლიათ სტანდარტული დოქტიპის გამოტანა

about:legacy-compat ხაზი საჭიროა მხოლოდ html გენერატორებისთვის. აქ თქვენ უბრალოდ უნდა გააკეთოთ ეს, მაგრამ შეცდომა საერთოდ არ არის კრიტიკული.

• შეცდომა: მაწანწალა ბოლო თეგის წყარო

თუ თავად საიტის კოდს ჩახედავთ და იპოვით ამ ელემენტს, ხედავთ, რომ ერთი ტეგი იწერება წყვილად - ეს არ არის სწორი.

შესაბამისად, თქვენ უნდა ამოიღოთ დახურვის ტეგი კოდიდან. ამ შეცდომის მსგავსად, შეიძლება მოხდეს ტეგები

• შეცდომა: img ელემენტს უნდა ჰქონდეს alt ატრიბუტი, გარდა გარკვეული პირობებისა. დეტალებისთვის, მიმართეთ ინსტრუქციას სურათების ტექსტის ალტერნატივების მიწოდების შესახებ

ყველა სურათს უნდა ჰქონდეს alt ატრიბუტი, მე მიმაჩნია ეს შეცდომა კრიტიკულად და საჭიროებს გამოსწორებას.

• შეცდომა: ამ კონტექსტში ელემენტი ol დაუშვებელია, როგორც ul ელემენტის შვილი. (ამ ქვეხის შემდგომი შეცდომების ჩახშობა.)

ტეგების ბუდე აქ არასწორია. IN

უნდა იყოს მხოლოდ
• . ამ მაგალითში ეს ელემენტები საერთოდ არ არის საჭირო.

  

  ანალოგიურად, შეიძლება იყოს სხვა მსგავსი შეცდომები:

  • ელემენტი h2 დაუშვებელია, როგორც ul ელემენტის შვილი ამ კონტექსტში.
  • ელემენტი a დაუშვებელია როგორც ul ელემენტის შვილი ამ კონტექსტში.
  • ელემენტი noindex დაუშვებელია, როგორც li ელემენტის შვილი ამ კონტექსტში.
  • ელემენტი div დაუშვებელია, როგორც ul ელემენტის შვილი ამ კონტექსტში.

  ეს ყველაფერი უნდა გამოსწორდეს.

  • შეცდომა: http-equiv ატრიბუტი არ არის დაშვებული მეტა ელემენტზე ამ ეტაპზე

  

  http-equiv ატრიბუტი არ არის განკუთვნილი მეტა ელემენტისთვის, საჭიროა მისი ამოღება ან შეცვლა.

  მსგავსი შეცდომები:

  • შეცდომა: ატრიბუტი n2-lightbox დაუშვებელია ელემენტზე a ამ ეტაპზე.
  • შეცდომა: ატრიბუტი asyncsrc ამ ეტაპზე დაუშვებელია ელემენტის სკრიპტზე.
  • შეცდომა: ატრიბუტის ფასი ამ ეტაპზე დაუშვებელია ელემენტის ვარიანტზე.
  • შეცდომა: ატრიბუტის ჰეშსტრინგი ამ ეტაპზე არ არის დაშვებული ელემენტის დიაპაზონში.

  აქ თქვენ ასევე უნდა წაშალოთ n2-lightbox, asyncsrc, price, hashstring ატრიბუტები ან შეცვალოთ ისინი სხვა ვარიანტებით.

  • შეცდომა: ცუდი დაწყების ტეგი img-ში თავში

  ან ასე:

  • შეცდომა: ცუდი დაწყების ტეგი თავში div-ში

  

  Img და div ტეგები არ უნდა იყოს . ეს შეცდომა უნდა გამოსწორდეს.

  • შეცდომა: CSS: გაანალიზების შეცდომა

  

  IN ამ შემთხვევაშისტილში ფრჩხილის შემდეგ არ უნდა იყოს მძიმით.

  ხო, ასეთი შეცდომა, წვრილმანი, მაგრამ არა სასიამოვნო) თავად ნახე მისი ამოღება საჭიროა თუ არა, ეს არანაირ გავლენას არ მოახდენს საიტის პოპულარიზაციაზე.

  • გაფრთხილება: charset ატრიბუტი სკრიპტის ელემენტზე მოძველებულია

  აღარ არის საჭირო სკრიპტებში კოდირების მითითება, ეს მოძველებული ელემენტია. გაფრთხილება არ არის კრიტიკული, თქვენი შეხედულებისამებრ.

  • შეცდომა: ელემენტის სკრიპტს არ უნდა ჰქონდეს ატრიბუტის სიმბოლოების ნაკრები, თუ ატრიბუტი src არ არის მითითებული

  ამ შეცდომაში თქვენ უნდა ამოიღოთ charset="uft-8" ატრიბუტი სკრიპტიდან, რადგან ის აჩვენებს კოდირებას სკრიპტის გარეთ. ვფიქრობ, ეს შეცდომა უნდა გამოსწორდეს.

  • გაფრთხილება: ცარიელი სათაური

  

  აქ არის ცარიელი h1 სათაური. თქვენ უნდა წაშალოთ ტეგები ან დაადოთ სათაური მათ შორის. შეცდომა კრიტიკულია.

  • შეცდომა: დასრულების ტეგი br

  

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

  • შეცდომა: დასახელებული სიმბოლოს მითითება არ წყდებოდა მძიმით. (ან & უნდა გაქცეულიყო როგორც &.)

  

  ეს არის სპეციალური HTML სიმბოლოები, თქვენ უნდა დაწეროთ ისინი სწორად ან &კოპიროთ. ჯობია გამოასწორო ეს შეცდომა.

  • ფატალური შეცდომა: ბოლო შეცდომის შემდეგ აღდგენა შეუძლებელია. ნებისმიერი შემდგომი შეცდომა იგნორირებული იქნება

  ეს არის სერიოზული შეცდომა:

  

  ამის შემდეგ საერთოდ არაფერი უნდა იყოს, რადგან ეს არის გვერდის ბოლო დახურვის ტეგი. თქვენ უნდა წაშალოთ ყველაფერი მის შემდეგ ან გადაიტანოთ უფრო მაღლა.

  • შეცდომა: CSS: მარჯვნივ: მხოლოდ 0 შეიძლება იყოს ერთეული. თქვენ უნდა დააყენოთ ერთეული თქვენი ნომრის შემდეგ

  თქვენ უნდა დაწეროთ მნიშვნელობა px-ში:

  

  აქ არის მსგავსი შეცდომა:

  • შეცდომა: CSS: margin-top: მხოლოდ 0 შეიძლება იყოს ერთეული. თქვენ უნდა დააყენოთ ერთეული თქვენი ნომრის შემდეგ
  • შეცდომა: დახურული ელემენტი a

  ახორციელებს თქვენი კოდის რამდენიმე შემოწმებას. მთავარი:

• სინტაქსის ვალიდაცია - სინტაქსის შეცდომების შემოწმება.
• სწორი სინტაქსია, მიუხედავად იმისა, რომ ეს არ არის სწორი HTML ტეგი, ამიტომ სინტაქსის შემოწმება მინიმალურად სასარგებლოა კარგი HTML-ის დასაწერად.
• ტეგების ბუდობის შემოწმება - ტეგები უნდა დაიხუროს საპირისპირო თანმიმდევრობით მათი გახსნის მიმართ. მაგალითად, ეს შემოწმება იჭერს შეცდომებს .
• DTD ვალიდაცია - შეამოწმეთ, რომ თქვენი კოდი ემთხვევა მითითებულ დოკუმენტის ტიპის განმარტებას. ეს მოიცავს ტეგების სახელების, ატრიბუტებისა და თეგის „ჩაშენების“ შემოწმებას (ერთი ტიპის ტეგები სხვა ტიპის ტეგებში)
გაითვალისწინეთ, რომ ეს არის ლოგიკური შემოწმებები და არ აქვს მნიშვნელობა როგორ განხორციელდება ვალიდატორი. თუ ერთი შემოწმება მაინც ვერ მოხერხდა, მაშინ HTML ითვლება არასწორად. და ამაში მდგომარეობს პრობლემა არგუმენტები HTML ვალიდაციის მთავარი არგუმენტი არის ბრაუზერის თავსებადობა. თითოეულ ბრაუზერს აქვს საკუთარი პარსერი და მისი მიწოდება, რაც ყველა ბრაუზერს ესმის, არის ერთადერთი გზა, რომ დარწმუნდეთ, რომ თქვენი კოდი ყველა ბრაუზერში სწორად იმუშავებს. ვინაიდან თითოეულ ბრაუზერს აქვს საკუთარი HTML შეცდომის გამოსწორების მექანიზმი, თქვენ არ შეგიძლიათ დაეყრდნოთ არასწორ კოდს.

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

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

ზოგადად, ჩემი ყველაზე დიდი ვალიდაციის პრობლემა არის #4-ის შემოწმება (გარე ელემენტებისთვის). მე ვარ მომხრე HTML ტეგებში მორგებული ატრიბუტების გამოყენების, კონკრეტულ ელემენტთან დაკავშირებული დამატებითი მეტა მონაცემების შესანახად. ჩემი გაგებით, ეს არის, მაგალითად, foo ატრიბუტის დამატება, როდესაც მე მაქვს მონაცემები (ზოლი), რომელიც უნდა დავაკავშირო კონკრეტულ ელემენტთან. ზოგჯერ ადამიანები გადატვირთავს არსებულ ატრიბუტებს ამ მიზნებისთვის მხოლოდ დადასტურების გასავლელად, მიუხედავად იმისა, რომ ატრიბუტი გამოყენებული იქნება სხვა მიზნებისთვის. ჩემთვის აზრი არ აქვს.

ბრაუზერების საიდუმლო ის არის, რომ ისინი არასოდეს ამოწმებენ, რომ HTML კოდი ემთხვევა მითითებულ DTD-ს. Doctype, რომელიც თქვენ მიუთითეთ დოკუმენტში, ცვლის ბრაუზერის პარსერს გარკვეულ რეჟიმში, მაგრამ ეს არ იტვირთება doctype და არ ამოწმებს კოდს მასთან შესაბამისობისთვის. ანუ, ბრაუზერის პარსერი ამუშავებს HTML-ს გარკვეული არასწორი ვარაუდებით, როგორიცაა თვითდახურვის ტეგები და ბლოკის ელემენტები შიდა ელემენტების შიგნით (დარწმუნებული ვარ, რომ არსებობს სხვა).

მორგებული ატრიბუტების შემთხვევაში, ყველა ბრაუზერი აანალიზებს და აღიარებს სინტაქსურად სწორ ატრიბუტებს, როგორც მოქმედს. ეს შესაძლებელს ხდის ასეთ ატრიბუტებზე წვდომას DOM-ის მეშვეობით Javascript-ის გამოყენებით. მაშ, რატომ უნდა ვიფიქრო ვალიდობაზე? მე გავაგრძელებ ჩემი ატრიბუტების გამოყენებას და ძალიან მიხარია, რომ HTML5 აფორმებს მათ.

ტექნოლოგიის საუკეთესო მაგალითი, რომელიც იწვევს არასწორ HTML-ს, მაგრამ დიდ განსხვავებას ქმნის, არის ARIA. ARIA მუშაობს HTML 4-ში ახალი ატრიბუტების დამატების გზით. ეს ატრიბუტები დამატებით სემანტიკურ მნიშვნელობას აძლევს HTML ელემენტებს და ბრაუზერს შეუძლია ეს სემანტიკა გადასცეს დამხმარე მოწყობილობებს, რათა დაეხმაროს შეზღუდული შესაძლებლობის მქონე ადამიანებს. ყველა ძირითადი ბრაუზერი ახლა მხარს უჭერს ARIA მარკირებას. თუმცა, თუ იყენებთ ამ ატრიბუტებს, გექნებათ არასწორი HTML.

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

ჩემი პოზიციის გასაგებად: მე მჯერა, რომ #1 და #2 შემოწმებები ძალიან მნიშვნელოვანია და ყოველთვის უნდა გაკეთდეს. მე ასევე ვთვლი, რომ ჩეკი #3 მნიშვნელოვანია, მაგრამ არა ისეთი მნიშვნელოვანი, როგორც პირველი ორი. ჩეკი #4 ჩემთვის ძალიან საეჭვოა, რადგან ის გავლენას ახდენს მორგებულ ატრიბუტებზე. მე მჯერა, რომ მაქსიმუმ, მორგებული ატრიბუტები უნდა იყოს მონიშნული გაფრთხილებად (და არა შეცდომებად) ვალიდაციის შედეგებში, რათა შევამოწმო, არასწორად შევიტანე თუ არა ატრიბუტის სახელი. მორგებული ტეგების შეცდომის სახით მონიშვნა შესაძლებელია კარგი იდეა, მაგრამ ასევე აქვს გარკვეული პრობლემები, მაგალითად, კონტენტის სხვა მარკირებაში - SVG ან MathML ჩაშენებისას.

ვალიდაცია ვალიდაციის გულისთვის? მე ვფიქრობ, რომ დადასტურება ვალიდაციის მიზნით უკიდურესად სულელურია. სწორი HTML მხოლოდ ნიშნავს, რომ ოთხივე შემოწმება შეცდომის გარეშე გაიარა. არსებობს რამდენიმე მნიშვნელოვანი რამ, რასაც მოქმედი HTML არ იძლევა გარანტიას:
• მოქმედი HTML არ იძლევა ხელმისაწვდომობის გარანტიას;
• მოქმედი HTML არ იძლევა გარანტიას კარგი UX (მომხმარებლის გამოცდილება);
• მოქმედი HTML არ იძლევა გარანტიას ფუნქციონირების ვებსაიტზე;
• სწორი HTML არ იძლევა გარანტიას საიტის სწორად ჩვენებაზე.
სწორი HTML შეიძლება იყოს საამაყო, მაგრამ ეს თავისთავად არ არის უნარის მაჩვენებელი. თქვენი მოქმედი კოდი ყოველთვის არ მუშაობს უკეთესად, ვიდრე ჩემი არასწორი კოდი. ეს საშუალებას მისცემს ჩემს კოდს გაიაროს HTML5 ვალიდაციის შემოწმება. რა თქმა უნდა, არის რაღაცეები HTML5 ვალიდატორის შესახებ, რასაც მე არ ვეთანხმები, მაგრამ მე მჯერა, რომ ის ბევრად უკეთ აკმაყოფილებს HTML 4 ვალიდატორს. მაგრამ მე არ მინდა ვიყო მისი მძევალი, რადგან ვიყენებ ჩემს ატრიბუტებს. მე ვამაყობ, რომ ვიყენებ ARIA-ს ჩემს საქმიანობაში და არ მაინტერესებს, ჩაითვლება თუ არა ის არასწორი კოდი. კიდევ ერთხელ, ოთხი ვალიდატორის შემოწმებიდან მხოლოდ ერთთან მაქვს პრობლემა. და HTML5 ვალიდატორი მიხსნის ამ პრობლემების უმეტესობისგან.

ვიცი, რომ ეს ბევრისთვის საკამათო თემაა, ამიტომ გთხოვთ, კომენტარებში წმინდა ემოციური განცხადებებისგან თავი შეიკავოთ.

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

ბოლო დროს მე მივიღე რამდენიმე შეკითხვა მომხმარებლებისგან ჩემი თემების მართებულობასთან და ზოგადად ვალიდაციასთან დაკავშირებით. ამ პოსტში მინდა მათ ვუპასუხო.

რა არის ვალიდობა?


ითვლება, რომ კოდის ვალიდობა არის ნებისმიერი კოდის ერთიანი, უნივერსალური მახასიათებელი.
სინამდვილეში, ვალიდობა არის დოკუმენტის html კოდის შესაბამისობა წესების გარკვეულ კრებულთან, რომელიც მითითებულია doctype-ში ან ნაგულისხმევია HTML5-ში.
ანუ ვალიდობა ფარდობითი ცნებაა, ვინაიდან წესები განსხვავებულია და მათი მოთხოვნებიც.
უფრო გასაგებად, მე მივცემ მაგალითს, რომელიც აღმოვაჩინე ვებსაიტზე css-live.ru:

მშენებლობისკენ საცხოვრებელი კორპუსებიდა ატომური ელექტროსადგურები, გამოიყენება სხვადასხვა SNiPs ( სამშენებლო კოდებიდა წესები), ასე რომ, დოკუმენტი, რომელიც მოქმედებს ერთი წესების მიხედვით, შეიძლება არ იყოს მოქმედი მეორის მიხედვით (სასიამოვნო იქნებოდა საცხოვრებელი კორპუსის სტანდარტების მიხედვით აშენებული ატომური ელექტროსადგური!).

Doctype ჩვეულებრივ მიუთითებს დოკუმენტზე, რომლის მიხედვითაც იგეგმება html ვალიდაცია, მაგრამ შეიძლება არჩეული იყოს პრაგმატული მიზეზების გამო ბრაუზერის ოპტიმალური რეჟიმის შესარჩევად.
XHTML5-ს შეიძლება საერთოდ არ ჰქონდეს დოქტიპი, მაგრამ მაინც იყოს მოქმედი.

დადასტურება - რა არის ეს?

მარტივი სიტყვებით, ვალიდაცია არის კოდის შემოწმებისა და შერჩეული დოქტიპის (DTD) შესაბამისობის პროცესი.

როგორ ხდება მოქმედების შემოწმება?

HTML კოდის ვალიდობა მოწმდება ხელსაწყოთი, რომელსაც ეწოდება Validator.
ყველაზე ცნობილი w3c ვალიდატორი არის https://www.w3.org.
w3c ვალიდატორი ახორციელებს რამდენიმე კოდის შემოწმებას.
მთავარი:

• სინტაქსის შეცდომების შემოწმება:
  მაგალითი habrahabr.ru/post/101985-დან:
  სწორი სინტაქსია, მიუხედავად იმისა, რომ არასწორი HTML ტეგია
  ასე რომ, სინტაქსის შემოწმება მინიმალურად სასარგებლოა კარგი HTML კოდის დასაწერად.
• ტეგის ბუდობის შემოწმება:
  HTML დოკუმენტში ტეგები უნდა დაიხუროს მათი გახსნის საპირისპირო თანმიმდევრობით. ეს შემოწმება განსაზღვრავს დაუხურავ ან არასწორად დახურულ ტეგებს.
• html-ის დადასტურება DTD-ის მიხედვით:
  იმის შემოწმება, თუ რამდენად ემთხვევა კოდი მითითებულ DTD - დოკუმენტის ტიპის განსაზღვრა (doctype). ეს მოიცავს ტეგების სახელების, ატრიბუტებისა და ტეგების შეყვანის შემოწმებას (ერთი ტიპის ტეგები სხვა ტიპის ტეგებში).
• უცხო ელემენტების შემოწმება:
  ის აღმოაჩენს ყველაფერს, რაც კოდშია, მაგრამ არა დოქტიპში.
  მაგალითად, მორგებული ტეგები და ატრიბუტები.

CSS კოდის მოქმედების შესამოწმებლად არის css ვალიდატორი - http://jigsaw.w3.org/css-validator.
კოდის ვალიდობა არის მექანიკური შემოწმების შედეგი ფორმალური OB-ის არარსებობის შესახებ, დადგენილი წესების მიხედვით.
თქვენ უნდა გესმოდეთ, რომ დადასტურება არის ინსტრუმენტი და არა ღირებულება.
გამოცდილმა კოდერებმა, როგორც წესი, იციან, სად შეიძლება დაირღვეს HTML ან CSS ვალიდაციის წესები და სად არა და რა შედეგები მოჰყვება (ან არა) ვალიდაციის ამა თუ იმ შეცდომას.
მაგალითები, როდესაც ვებსაიტი აწარმოებს არასწორი კოდს:

• უფრო მოსახერხებელი და სწრაფი - მორგებული ატრიბუტები Javascrip/AJAX-ისთვის ან
• SEO ოპტიმიზირებულია - ARIA მარკირება.

ცხადია, რომ ვალიდობისთვის აზრი არ აქვს.
როგორც წესი, განლაგების გამოცდილი დიზაინერები იცავენ შემდეგ წესებს:
- კოდში არ უნდა იყოს უხეში შეცდომები.
- წვრილმანის მოთმენა შეიძლება, მაგრამ მხოლოდ გამართლებული მიზეზების გამო.
რაც შეეხება html/CSS ვალიდაციის შეცდომებს მისაღებია:

ვალიდაციის შეცდომები (VE) შეიძლება დაიყოს ჯგუფებად:
• OB შაბლონის ფაილებში:
  მათი პოვნა და გამოსწორება არ არის რთული.
  თუ ზოგიერთი უმნიშვნელო შეცდომა ხელს უწყობს საიტის უფრო ფუნქციონირებას ან დაჩქარებას, შეგიძლიათ დატოვოთ ისინი.
• OB მესამე მხარის სკრიპტებში, რომლებიც დაკავშირებულია საიტზე:
  მაგალითად, VKontakte ვიჯეტი, Twitter სკრიპტი ან ვიდეო ფაილები YouTube-დან.
  მათი გამოსწორების გზა არ არსებობს, რადგან ეს ფაილები და სკრიპტები განთავსებულია სხვა საიტებზე და ჩვენ მათზე წვდომა არ გვაქვს.
• CSS წესები, რომლებიც ვალიდატორს არ ესმის:
  ვალიდატორი ამოწმებს, რომ საიტის კოდი ემთხვევა HTML ან CSS-ის კონკრეტულ ვერსიას.
  თუ თქვენს შაბლონში იყენებდით CSS ვერსიის 3-ის წესებს და ვალიდატორი ამოწმებს შესაბამისობას 2.1 ვერსიასთან, მაშინ ის ჩათვლის ყველა CSS3 წესს შეცდომად, თუმცა ეს ასე არ არის.
• OB-ები, რომლებიც აუცილებლად უნდა დარჩეს საიტზე სასურველი შედეგის მისაღებად. მაგალითად:
  • noindex ტეგები. ისინი არ არის მოქმედი, მაგრამ ისინი ძალიან აუცილებელია და თქვენ უნდა შეეგუოთ ამას.
  • ხაკი. ზოგიერთ ბრაუზერში საიტის სწორად ჩვენების მიზნით, ზოგჯერ თქვენ უნდა გამოიყენოთ ჰაკები - კოდი, რომელიც მხოლოდ გარკვეულ ბრაუზერს ესმის.
• თავად ვალიდატორის შეცდომები.
  ხშირად ის ვერ ხედავს ზოგიერთ ტეგს (მაგალითად, დახურვისას) და აცნობებს OB-ს შესახებ, სადაც არ არის.

გამოდის, რომ სამუშაო ადგილზე თითქმის ყოველთვის იქნება რაიმე სახის OV.
უფრო მეტიც, ბევრი მათგანი შეიძლება იყოს.
მაგალითად, Google-ის, Yandex-ისა და mail.ru-ს მთავარი გვერდები შეიცავს რამდენიმე ათეულ შეცდომას.
მაგრამ, ისინი არ არღვევენ საიტების ჩვენებას ბრაუზერებში და არ უშლიან ხელს მათ მუშაობაში.
ყველაფერი რაც ზემოთ დავწერე ეხება ჩემს თემებს.

IN რთული თემებიარსებობს:
• WordPress ფუნქციები (მაგალითად, the_category()), რომლებიც აწარმოებენ არასწორი კოდს.
• ვიდეოების გამოტანა ვიდეო ჰოსტინგის საიტებიდან, მაგალითად, YouTube-დან და ბევრი OV არის YouTube კოდში, რომლებზეც გავლენას ვერც თქვენ და ვერც მე ვერ მოვახერხეთ.
• ღილაკები სოციალური ქსელები, რომლებიც დაკავშირებულია ამ ქსელების სკრიპტების გამოყენებით და შეიცავს OV.
• CSS3 და HTML5 წესები, რომლებიც შეცდომებად ითვლება მოძველებული ვალიდაატორების მიერ.
  ამავდროულად, CSS3 და HTML5 ვერსიების ვალიდატორები ძველ წესებს შეცდომად მიიჩნევენ :).
• ზოგჯერ, Internet Explorer ბრაუზერში ან სხვა ბრაუზერების ძველ ვერსიებში სწორი ჩვენების მისაღწევად, თქვენ უნდა გამოიყენოთ ეგრეთ წოდებული ჰაკები - კოდი, რომელიც მხოლოდ კონკრეტულ ბრაუზერს ესმის, რათა დაწეროთ წესები საიტის ჩვენების სპეციალურად ამ ბრაუზერისთვის.

შედეგად, თქვენ შეგიძლიათ მიიღოთ სრულიად მოქმედი კოდი მხოლოდ ძალიან კოდირებით მარტივი თემები, ე.ი. ისეთები, რომლებიც შეიცავს ფუნქციების მინიმალურ რაოდენობას.
ჩემი რომელიმე თემის განლაგების დასრულების შემდეგ, მე ყოველთვის ვამოწმებ მას ვალიდატორთან და ვასწორებ ყველა შეცდომას, რომელიც შეიძლება გამოსწორდეს თემის ფუნქციონირების დაკარგვის გარეშე.
ანუ, თუ არის არჩევანი სამუშაო ფუნქციონალურობასა და ვალიდობას შორის, მე ვირჩევ ფუნქციონალურობას.
თუ თქვენ ქმნით საკუთარ თემებს, გირჩევთ იგივე გააკეთოთ.
ჩემი გადმოსახედიდან (და ასევე განლაგების დიზაინერების უმეტესობის თვალსაზრისით), html/CSS ვალიდაციის განხილვა, როგორც საბოლოო სიმართლე, არასწორია. სავალდებულოა მხოლოდ იმ აგენტების კორექტირება, რომლებიც:
- აარიდეთ ბრაუზერს გვერდის სწორად ჩვენება (დახურული და არასწორად ჩასმული ტეგები).
- შეანელეთ გვერდის ჩატვირთვა (არასწორად დაკავშირებული სკრიპტები).
- შეიძლება გამოსწორდეს თემის ფუნქციონირების დარღვევის გარეშე.
ვიმედოვნებ, რომ ყველა კითხვას ვუპასუხე ვალიდაციის შესახებ.

ვფიქრობ, ყველას, ვინც დაინტერესებულია ვებსაიტების შემუშავებითა და პოპულარიზაციის გზით, ამა თუ იმ გზით წააწყდა კოდის მოქმედების კონცეფციას. ეს ფრაზა გულისხმობს საიტის HTML კოდის დაწერას მსოფლიო ქსელის კონსორციუმის (W3C) მიერ შემუშავებული გარკვეული სტანდარტების შესაბამისად. ამ სტანდარტით დადგენილ წესებთან შესაბამისობა არის ბრაუზერის ჯვარედინი თავსებადობის გარანტია, ანუ შექმნილი გვერდის სწორად ჩვენება ყველა ბრაუზერში, ასევე შეცდომების არარსებობა, რომლებიც გავლენას ახდენენ დატვირთვის სიჩქარეზე და სხვა პარამეტრებზე.

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

რამდენად სუფთა და სტრუქტურირებულია კოდი შედგენილი დეველოპერების მიერ, შეიძლება გამოვლინდეს საიტის მოქმედების შემოწმებით, რომელიც ხორციელდება W3C-ის ოფიციალურ რესურსზე სპეციალური შემოწმების საშუალებით. აქ არის თავისუფლად ხელმისაწვდომი ონლაინ HTML კოდის ვალიდატორი, რომელიც მდებარეობს validator.w3.org-ზე


მისი დახმარებით შეგიძლიათ შეამოწმოთ HTML კოდის ვალიდობა სამი გზით:

• დადასტურება URI-ით - გადამოწმება მისამართით
• Validate by File Upload - ატვირთული ფაილის ანალიზი
• დადასტურება პირდაპირი შეყვანით - კოდის კონკრეტული ნაწილის შემოწმება.

არჩევანი საჭირო მეთოდიხორციელდება შესაბამის ჩანართზე გადასვლით:



ვნახოთ, რა მოხდება, თუ შევამოწმებთ რუნეტზე ცნობილი საიტის ნამდვილობას, მაგალითად Habrahabr-ს. ჩასვით ანალიზის ველში და დააჭირეთ ღილაკს "შემოწმება". რამდენიმე წამის შემდეგ W3C ვალიდატორი მოგვცემს შემდეგ შედეგს:



საკმაოდ კარგი შედეგია, რადგან რესურსების უმეტესობის შემოწმება გამოიწვევს ათობით და თუნდაც ასობით შეცდომას.

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

ნებისმიერ შემთხვევაში, თუ თქვენს საიტზე აღმოჩენილია შეცდომები, არ ინერვიულოთ, რადგან ჯერ ერთი, რეალურად არის ძალიან ცოტა ვებსაიტი, რომელიც სრულად შეესაბამება W3C სტანდარტს და მეორეც, ყველა შეცდომა, რომელიც აღმოაჩინა HTML ვალიდატორმა -code შეიძლება იყოს. შესწორებული.

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

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