Дизайнерите прекарват часове в усъвършенстване на занаята си, за да усъвършенстват внимателно най-малките детайли в дизайна на уебсайта, който излиза от техните пера. Качеството на кода обаче много често остава много ниско. Имате ли нужда от доказателство? Разгледайте галериите с безплатни CSS шаблони. 90% от шаблоните няма да преминат проверка. Освен това по-голямата част от грешките са много примитивни и много лесни за коригиране. В този урок ще разгледаме типичните грешки в HTML кода, които пречат на проверката да завърши успешно.
Защо да проверявам кода?
Ако сайтът изглежда страхотно в браузъра, тогава защо да проверявате кода?Типичен въпрос, задаван преди преглед на кода. Но сайтът не се ограничава само до това, което е видимо за потребителя. HTML страниците са проектирани да представят данни, а не графични ефекти. Данните трябва да могат да се четат от цялата огромна общност от хора, които използват Интернет. И читателите могат да използват много различни технологии, за да получат информацията, представена на вашия сайт - например, те могат да използват гласова програма и просто да слушат какво е написано на вашата страница.
HTML страница, която е без грешки, обикновено ще се показва правилно в повечето браузъри и също така ще бъде съвместима с бъдещите технологии. Тук си струва да споменем търсачките, чиято работа е много важна за целите на SEO. Никой не иска да им създава пречки, а чистият и правилен код е много по-лесен за възприемане от ботовете за търсене.
Това също е въпрос на професионализъм. Неправилният HTML код е много подобен на граматическите грешки в текста на уебсайт. И въпреки че клиентът може да не забележи грешки в кода, това не променя същността на проблема. Никой не харесва граматическите грешки в дизайна, но по някакъв начин оставянето на HTML код с грешки не се счита за същото срамно действие.
Често срещани грешки
По-долу са грешките, които бяха уловени в шаблоните от първата страница на известната галерия с CSS шаблони. Много уебсайтове изглеждат страхотно, дори страхотно, но често качеството на кода не съответства на качеството на дизайна. Въпреки че повечето от тези грешки могат да бъдат коригирани много бързо и лесно.
Най-лошата грешка е да не се използва Doctype! Без етикет Doctypeозначава, че браузърът ще "познае" какъв език е използван за създаване на документа. За да коригирате грешката, трябва да посочите типа документ на вашата страница.
Елементът не е затворен
Ако отворите таг някъде във вашия HTML документ, трябва да го затворите на подходящото място. Забравянето по този въпрос не само води до грешки при проверка на кода, но може да причини и сериозни проблеми с шаблона. Фигурата показва ситуация, при която авторът е забравил да затвори етикета
Пропуска знака / в самозатварящи се елементи
Повечето HTML елементи имат отделни затварящи тагове, например:
Специалните знаци не са преобразувани
Непреобразувани знаци в URL
Съгласно предходната точка специалните знаци, особено амперсандът, трябва да бъдат кодирани в URL низове. Връзките към уебсайтове, създадени с помощта на PHP, често съдържат променливи, използващи символа & и трябва да бъдат написани с помощта на HTML и код.
Блокирайте елементи във вградени елементи
Едно от основните правила на HTML е блоковите елементи НИКОГА да не се съдържат във вградени елементи.
Популярен пример за грешка е използването на връзка в заглавието:
банани
е блоков елемент, така че трябва да обвива връзка (вграден елемент): банани
.
Липсва алтернативен атрибут на изображението
Всяко изображение в HTML документ трябва да има alt атрибут, описващ съдържанието на изображението. Дори ако изображението е с цел проектиране, то трябва да има атрибут alt, но в този случай той трябва да бъде оставен празен, например alt="" . В друг случай трябва да предоставите описание на съдържанието на изображението.
Използване на атрибути като ширина и височина
Това вероятно е недостатъкът на широкото използване на WYSIWYG редактори, които са склонни да вмъкват излишен HTML код. Атрибутите за ширина и височина са дефинирани в преходните стандарти за типове документи, но ако сте се заели да следвате стриктно стандартите, вероятно знаете, че всички атрибути, отговорни за представянето на елементите на страниците, трябва да бъдат прехвърлени в CSS стиловия лист, за да отделят съдържанието и дизайн.
Името или ID на класа започва с номер
Име на клас, ID или име на атрибут не може да започва с число. Те могат да включват числа, но не и в началото на думата.
Какво е положението с проверката на CSS кода?
За разлика от HTML, CSS се използва за визуално представяне на страница. Така че въпросът е „Ако страницата изглежда добре, тогава защо да проверяваме кода?“ в случая звучи по-убедително. Лошият CSS код няма същото въздействие върху уеб страниците като лошия HTML код. Струва си обаче да се провери, за да се открият печатни грешки и грешки в кода. Ако използвате нови свойства на CSS3, те ще доведат до неуспешна проверка на вашия документ, тъй като все още не са включени в спецификацията, но ако сте уверени, че всичко е правилно, тогава такива грешки могат да бъдат игнорирани.
Близо до ректора 19 септември 2012 г. в 11:16 чГрешки, които трябва да избягвате при писане на HTML код
Всеки, който работи с HTML всеки ден, трябва да бъде много внимателен, тъй като спазването на всички правила на HTML не е толкова лесно. Това е много важно, тъй като HTML валидаторът намира всички грешки, дори незначителни, и вие получавате кода на страницата с грешки. Днес ще се опитаме да обърнем внимание на най-често срещаните от тях. Сигурен съм, че предложените препоръки ще бъдат много полезни за мнозина и особено за начинаещи разработчици. Така че, добре дошли под
Неправилно влагане на HTML тагове
Много е важно да затворите правилно всички HTML тагове. Те трябва да се затворят в обратния ред на отварянето им. Повечето начинаещи не обръщат достатъчно внимание на това. Ако етикетите са затворени в грешен ред, ще получите грешки при проверката и някои стилове може да не се използват. Бъдете внимателни!
Грешка
ПривилноИзползване на блокови елементи във вградени елементи
Всеки, който е използвал HTML дори малко на практика, знае, че даден елемент може да бъде показан или като блок, или като линия. Блоковите елементи, включително параграфите и секциите, трябва да съдържат вградени елементи. Това е логична структура на документа, така че се уверете, че вашият код я следва.