დიზაინერები საათებს ხარჯავენ თავიანთი ხელნაკეთობების დახვეწაში, რათა ყურადღებით დააზუსტონ ვებსაიტების დიზაინის უმცირესი დეტალები, რომლებიც გამოდის მათი კალმებიდან. თუმცა, კოდის ხარისხი ძალიან ხშირად რჩება ძალიან დაბალი. გჭირდებათ მტკიცებულება? შეამოწმეთ უფასო CSS შაბლონების გალერეები. შაბლონების 90% ვერ გაივლის შემოწმებას. უფრო მეტიც, შეცდომების უმეტესობა ძალიან პრიმიტიულია და ძალიან ადვილი გამოსასწორებელია. ამ გაკვეთილზე განვიხილავთ HTML კოდში არსებულ ტიპურ შეცდომებს, რომლებიც ხელს უშლის ვერიფიკაციის წარმატებით დასრულებას.
რატომ შეამოწმეთ კოდი?
თუ საიტი მშვენივრად გამოიყურება ბრაუზერში, მაშინ რატომ შეამოწმეთ კოდი?კოდის განხილვამდე დასმული ტიპიური შეკითხვა. მაგრამ საიტი არ შემოიფარგლება მხოლოდ მომხმარებლისთვის ხილულით. HTML გვერდები შექმნილია მონაცემების წარმოსაჩენად და არა გრაფიკული ეფექტებისთვის. მონაცემები წაკითხული უნდა იყოს ინტერნეტით მოსარგებლე ადამიანების მთელი საზოგადოებისთვის. და მკითხველს შეუძლია გამოიყენოს ძალიან განსხვავებული ტექნოლოგიები თქვენს საიტზე წარმოდგენილი ინფორმაციის მისაღებად - მაგალითად, მათ შეუძლიათ გამოიყენონ ხმოვანი პროგრამა და უბრალოდ მოუსმინონ რა წერია თქვენს გვერდზე.
HTML გვერდი, რომელიც არ არის შეცდომის გარეშე, ზოგადად სწორად გამოჩნდება ბრაუზერების უმეტესობაში და ასევე შეესაბამება მომავალ ტექნოლოგიებს. აქვე აღსანიშნავია საძიებო სისტემები, რომელთა ფუნქციონირება ძალიან მნიშვნელოვანია SEO მიზნებისთვის. არავის სურს მათთვის დაბრკოლებების შექმნა და სუფთა და სწორი კოდი საძიებო ბოტების მიერ ბევრად უფრო ადვილი აღქმაა.
ეს ასევე პროფესიონალიზმის საკითხია. არასწორი HTML კოდი ძალიან ჰგავს ვებსაიტზე ტექსტში არსებულ გრამატიკულ შეცდომებს. და მიუხედავად იმისა, რომ კლიენტმა შეიძლება ვერ შეამჩნიოს შეცდომები კოდში, ეს არ ცვლის საკითხის არსს. არავის მოსწონს გრამატიკული შეცდომები დიზაინში, მაგრამ რატომღაც შეცდომებით HTML კოდის დატოვება არ ითვლება იგივე სამარცხვინო მოქმედებად.
საერთო შეცდომები
ქვემოთ მოცემულია შეცდომები, რომლებიც დაფიქსირდა შაბლონებში ცნობილი CSS შაბლონების გალერეის პირველი გვერდიდან. ბევრი ვებსაიტი შესანიშნავად გამოიყურება, თუნდაც შესანიშნავად, მაგრამ ხშირად კოდის ხარისხი არ ემთხვევა დიზაინის ხარისხს. მიუხედავად იმისა, რომ ამ შეცდომების უმეტესობა შეიძლება გამოსწორდეს ძალიან სწრაფად და მარტივად.
ყველაზე ცუდი შეცდომა ის არის, რომ არ გამოიყენოთ დოქტიპი! არანაირი ტეგი დოქტიპინიშნავს, რომ ბრაუზერი „გამოიცნობს“ რა ენას გამოიყენებდა დოკუმენტის შესაქმნელად. შეცდომის გამოსასწორებლად, თქვენ უნდა მიუთითოთ თქვენი გვერდის დოკუმენტის ტიპი.
ელემენტი არ არის დახურული
თუ თქვენ გახსნით ტეგს სადმე თქვენს HTML დოკუმენტში, თქვენ უნდა დახუროთ ის შესაბამის ადგილას. ამ საკითხში დავიწყება არა მხოლოდ იწვევს შეცდომებს კოდის შემოწმებისას, არამედ შეიძლება გამოიწვიოს სერიოზული პრობლემები შაბლონთან დაკავშირებით. ფიგურაში ნაჩვენებია სიტუაცია, როდესაც ავტორს დაავიწყდა ტეგის დახურვა
გამოტოვებს / სიმბოლოს თვითდახურვის ელემენტებში
HTML ელემენტების უმეტესობას აქვს ცალკეული დახურვის ტეგები, მაგალითად:
სპეციალური სიმბოლოები არ არის გარდაქმნილი
URL-ში შეუქცევადი სიმბოლოები
წინა პუნქტის მიხედვით, სპეციალური სიმბოლოები, განსაკუთრებით ამპერსანდი, უნდა იყოს კოდირებული URL სტრიქონებში. PHP-ის გამოყენებით აშენებული ვებსაიტების ბმულები ხშირად შეიცავს ცვლადებს & სიმბოლოს გამოყენებით და უნდა დაიწეროს HTML და კოდის გამოყენებით.
ელემენტების დაბლოკვა inline ელემენტების შიგნით
HTML-ის ერთ-ერთი ძირითადი წესი არის ის, რომ ბლოკის ელემენტები არასოდეს უნდა იყოს შეტანილი შიდა ელემენტებში.
შეცდომის პოპულარული მაგალითია სათაურის ბმულის გამოყენება:
ბანანი
არის ბლოკის ელემენტი, ამიტომ ის უნდა შემოიფაროს ბმულზე (inline ელემენტი): ბანანი
.
გამოსახულების alt ატრიბუტი აკლია
HTML დოკუმენტის ყველა სურათს უნდა ჰქონდეს alt ატრიბუტი, რომელიც აღწერს სურათის შინაარსს. მაშინაც კი, თუ გამოსახულება დიზაინის მიზნებისთვისაა, მას უნდა ჰქონდეს alt ატრიბუტი, მაგრამ ამ შემთხვევაში უნდა დარჩეს ცარიელი, მაგალითად, alt="" . სხვა შემთხვევაში, თქვენ უნდა მიუთითოთ სურათის შინაარსის აღწერა.
ატრიბუტების გამოყენება, როგორიცაა სიგანე და სიმაღლე
ეს, ალბათ, არის WYSIWYG რედაქტორების ფართო გამოყენების მინუსი, რომლებიც მიდრეკილნი არიან ზედმეტი HTML კოდის ჩასმა. სიგანე და სიმაღლის ატრიბუტები განსაზღვრულია გარდამავალი დოკუმენტის ტიპის სტანდარტებში, მაგრამ თუ თქვენ აპირებთ მკაცრად დაიცვან სტანდარტები, ალბათ იცით, რომ ყველა ატრიბუტი, რომელიც პასუხისმგებელია გვერდებზე ელემენტების პრეზენტაციაზე, უნდა გადავიდეს CSS სტილის ფურცელზე შინაარსის განცალკევებისთვის. და დიზაინი.
კლასის სახელი ან ID იწყება ნომრით
კლასის სახელი, ID ან ატრიბუტის სახელი არ შეიძლება დაიწყოს რიცხვით. ისინი შეიძლება შეიცავდეს რიცხვებს, მაგრამ არა სიტყვის დასაწყისში.
რა სიტუაციაა CSS კოდის შემოწმებისას?
HTML-ისგან განსხვავებით, CSS გამოიყენება გვერდის ვიზუალურად წარმოსაჩენად. ასე რომ, კითხვა არის "თუ გვერდი კარგად გამოიყურება, მაშინ რატომ შეამოწმეთ კოდი?" ამ შემთხვევაში უფრო დამაჯერებლად ჟღერს. ცუდი CSS კოდს არ აქვს იგივე გავლენა ვებ გვერდებზე, როგორც ცუდი HTML კოდი. თუმცა, ღირს შემოწმება, რომ აღმოაჩინოს ბეჭდური შეცდომები და შეცდომები კოდში. თუ იყენებთ ახალ CSS3 თვისებებს, ისინი გახდებიან თქვენი დოკუმენტის ვალიდაცია, რადგან ისინი ჯერ არ არის შეტანილი სპეციფიკაციაში, მაგრამ თუ დარწმუნებული ხართ, რომ ყველაფერი სწორია, მაშინ ასეთი შეცდომები შეიძლება იგნორირებული იყოს.
რექტორთან ახლოს 2012 წლის 19 სექტემბერი, 11:16 საათიშეცდომები, რომლებიც თავიდან უნდა იქნას აცილებული HTML კოდის დაწერისას
ვინც ყოველდღე მუშაობს HTML-თან, უნდა იყოს ძალიან ფრთხილად, რადგან HTML-ის ყველა წესის დაცვა არც ისე ადვილია. ეს ძალიან მნიშვნელოვანია, რადგან HTML ვალიდატორი პოულობს ყველა შეცდომას, თუნდაც უმნიშვნელოს, და თქვენ იღებთ შეცდომით გვერდის კოდს. დღეს ჩვენ შევეცდებით ყურადღება მივაქციოთ მათგან ყველაზე გავრცელებულს. დარწმუნებული ვარ, რომ შემოთავაზებული რეკომენდაციები ძალიან სასარგებლო იქნება ბევრისთვის და განსაკუთრებით დამწყები დეველოპერებისთვის. ასე რომ, მოგესალმებით ქვეშ
HTML ტეგების არასწორი ჩადგმა
ძალიან მნიშვნელოვანია ყველა HTML ტეგის სწორად დახურვა. ისინი უნდა დაიხუროს საპირისპირო თანმიმდევრობით, თუ როგორ გაიხსნა. დამწყებთათვის უმეტესობა ამას საკმარის ყურადღებას არ აქცევს. თუ ტეგები დახურულია არასწორი თანმიმდევრობით, თქვენ მიიღებთ ვალიდაციის შეცდომებს და ზოგიერთი სტილი შეიძლება არ იყოს გამოყენებული. Ფრთხილად იყავი!
შეცდომა
პრივილნობლოკის ელემენტების გამოყენება შიდა ელემენტების შიგნით
ყველამ, ვინც პრაქტიკაში ცოტათი მაინც გამოიყენა HTML, იცის, რომ ელემენტი შეიძლება იყოს ნაჩვენები როგორც ბლოკი, ასევე ხაზი. ბლოკის ელემენტები, მათ შორის აბზაცები და სექციები, უნდა შეიცავდეს ხაზოვან ელემენტებს. ეს არის დოკუმენტის ლოგიკური სტრუქტურა, ამიტომ დარწმუნდით, რომ თქვენი კოდი მიჰყვება მას.