طراحان و کدنویسان چه تازه کار باشند چه حرفه ای همیشه ممکن هست که در نوشتن کد دچار اشتباه بشوند، این اشتباهات ممکن است یه خاطر عدم تمرین کردن و یادگیری اصولی از ابتدا باشد، یا اینکه هنگام نوشتن عجله در کار باشد. در این پست قصد معرفی رایج ترین اشتباهات در هنگام نوشتن کد HTML و CSS را داریم.

اشتباهات HTML

فراموش کردن بستن یک تگ

این اشتباه خیلی معمول است مخصوصا برای تازه کارها، خیلی از تگها نیاز دارند که بسته شوند تا درست کار کنند، مثل div, strong و لینکها. یکسری از تگها هم نیاز دارند که یک slash در انتهای آنها گذاشته شود، مثل تگ img.

<div>Text inside the div.</div> <img src="images/imagename.jpg" /> DOCTYPE اشتباه

HTML نیاز دارد که سند خود را با یک DOCTYPE درست شروع کنید.

قرار دادن نادرست تگها در کنار هم

این نکته خیلی مهمی است که تگها را در جای درست خودشان باز کنید و ببندید. برای مثال وقتی یک div را باز میکنید باید حتما بعد از اینکه تگ دیگری می تواند بسته شود ، بسته شود برای مثال این کد اشتباه است :

<div><strong>text</div></strong>

با حروف یزرگ نوشتن تگها

این کار عادت نادرستی است و حتما باید تگها با حروف کوچک نوشته شوند، برای مثال :

<div></div>

فراموش کردن باز یا بسته کردن quotes

این اشتباه زیاد پیش می آید و ممکن است باعث شود کد شما به درستی کار نکند، حتما هنگام باز کردن یک quote آنرا ببندید :

<img src="images/headerimage.jpg" />

استفاده کردن از inline استایل

این کار هم یک عادت نادرست است. inline استایل ها درست کار میکنند اگر استفاده کنید ولی بعدها باعث عذاب شما خواهند شد ! آیتمهای شما باید توسط فایل CSS خارجی شما استایل داشته باشند که در آینده هنگام ویرایش و تغییر دادن استایلها دچار عذاب نشوید. (اطلاعات بیشتر) یک مثال از inline استایل :

<a style="color:#000;text-decoration: none"href="link.html">link name</a>

encoding نکردن کاراکترهای خاص

کاراکترهایی مثل © و & باید توسط کد صحیح HTML شان نشان داده شوند. در این لیست می توانید کد این کاراکترها را پیدا کنید.

استفاده کردن بیش از حد از Id ها و class ها

class ها برای آیتم هایی استفاده می شوند که بیش از یک بار در کد شما مورد استفاده قرار می گیرند. مثل یک لینک که چندین بار در سایت شما مورد استفاده قرار می گیرد و دارای استایل یکسانی می باشد. Id ها برای آیتم هایی که تنها یک بار مورد استفاده قرار می گیرند تعریف می شوند مثل header div. این دو مورد معمولا بیشتر از حد نیاز مورد استفاده قرار می گیرند و ممکن است در آینده هنگام ویرایش و تغییر کد شما را گیج کنند، بهتر است در حد نیاز از آنها استفاده کنید.

اشتباهات CSS

فراموش کردن بستن براکت ها و استایلها

هر آیتمی در CSS با یک براکت } باز و بسته { می شود. هر استایلی که تعریف می کنید باید با یک ; بسته شود. برای مثال :

#divname {

width: 40px;

height: 30px;

}معمولا روشهای متفاوتی برای نوشتن کد CSS وجود دارد که بسته به طراح و برنامه نویس دارد بعضیها همه کدها را در یک خط می نویسند و بعضی ها مثل مثال بالا هر استایلی را در یک خط جداگانه می نویسند.

استفاده نکردن از Global Styles

خیلی از آیتمها مثل پاراگراف، هدرها و لینکها استایل یکسانی در کل سایت دارند بنابراین بهتر است برای آنها یک استایل همگانی تعریف شود، این کار هم باعث جلوگیری از اشتباههای ناخواسته می شود و هم کد شما را سبک تر می کند.

استفاده نکردن از اسمهای مناسب برای Id ها و Class ها

همیشه بهتر هست که برای این موارد نامهای مناسبی انتخاب کنید که در آینده اگر نیاز به ویرایش و تغییر داشت بتوانید راحت بفهمید که این موارد برای چه هستند. برای مثال نامگذاری به صورت home-left-column به مراتب بهتر از left هست.

استفاده نکردن از کدهای کوتاه

کدهای کوتاه یکی دیگر از روشها برای مرتب و کم حجم کردن کد شما است. برای مثال به جای استفاده از padding-top ، padding-right و … می توانید از روش زیر استفاده کنید :

padding: 5px 10px 0 10px

;استفاده نکردن از کدهای کوتاه برای رنگ

اعداد هگزایی که مثل ffffff و یا ۰۰۰۰۰۰ تکرار می شوند را میتوان به صورت ۰۰۰ و fff نوشت.

استفاده نادرست از positioning

Positioning یکی از مواردی است که برای کسانی که تازه کار هستند خیلی سخت ممکن است به نظر برسد. انتخابهای شما static , relative , absolute و fixed هستند. static حالت پیش فرض است و موقعیت آیتم در حالت نرمال صفحه است. relative قرار دادن آیتم به صورت وابسته به خودش است به این معنی که شما می توانید آنرا نسبت به موقعیت نرمالش در صفحه به سمت بالا، پایین، چپ و راست حرکت دهید. absolute به شما این امکان را می دهد که آیتم خود را در هر جای صفحه قرار دهید و این حالت بیشترین اشتباه در موردش می شود. مقادیری که برای آیتم absolute در نظر می گیرید به صورت relative و یا absolute نسبت به آیتم پدر خود می باشد و اگر وجود نداشته باشد به تگ html بر میگردد. حالت fixed وابسته به موقعیت پنجره مرورگر است یعنی اگر پنجره مرورگر را تغییر دهید این آیتم تغییری نمی کند. یادگیری درست این موارد به شما کمک بزرگی در چیدمان صفحه خواهد کرد.

اعتبارسنجی

در پایان همیشه کد HTML و CSS خود را اعتبارسنجی کنید تا اشتباهات احتمالی را تصحیح کنید. وب سایت شما ممکن است در حالت عادی درست نمایش داده شود ولی استفاده کردن از اعتبارسنج شما را در شناسایی اشکالات وب سایت شما کمک می کند