7 اشتباه رایج برنامه‌نویسان در نوشتن کد HTML و CSS

فناوری های جدید به افراد اجازه طراحی پروژه های پیچیده و جذاب را می دهند. اما وقتی صحبت از HTML و CSS می شود بسیاری از تازه کارها هنوز هم اشتباهات مشابهی در نوشتن کد HTML و CSS مرتکب می شوند.

بهم ریختگی CSS

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

نکته اول در نوشتن CSS این است: همیشه کدتان را سازماندهی کنید. اینکار باعث حفظ زمان و تسهیل روند کاری می شود. چطور بایستی اینکار را کرد؟ پیشنهاد میکنم که CSS خود را مطابق ساختار کد HTML که با آن کار می کنید سازمان دهید. مثلا:

  • header
  • body
  • sidebar
  • footer

اشتباه در قراردهی بلاک عناصر

یک اشتباه رایج در ساختمان وبسایت های HTML، به سازماندهی کد آن مربوط می شود. مثلا، یک عنصر HTML را می توان به صورت Block یا Inline نمایش داد. و مشکل هم از همینجا شروع می شود. بسیاری از کاربران، عناصر block را داخل عناصر inline قرار می دهند.

برای اجتناب از این اشتباه، به خاطر داشته باشید:

  • عناصر block، ساختار سندتان را ایجاد می کنند. مثل پاراگراف ها و divها
  • عناصر inline به blockها تعلق دارند، مثلا تگ ها.

عناصر inline همیشه در blockها جای می گیرند اما عکس این قضیه صدق نمی کند. هیچگاه نبایستی عناصر block را در اجزای inline جای دهید.

ننوشتن DOCTYPE

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

برای اجتناب از این مشکل، بایستی گام های زیر را بردارید.

  1. از DOCTYPE استفاده کنید، فرقی ندارد که از چه نسخه HTML بهره می برید.
  2. همیشه این عبارت را در اولین خط از کدتان قرار دهید.
  3. مراقب باشید DOCTYPE را به همین صورت تایپ کنید، حروف کوچک باعث ایجاد خطا می شود.
  4. از ابزارهای آنلاین تایید اعتبار کد HTML برای یافتن حفره های ممکن استفاده کنید.

نادیده گرفتن متن ALT

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

  1. متن ALT چیزی که در تصویرتان وجود دارد را توصیف می کند.
  2. تگ های IMG حتما بایستی این خصوصیت را داشته باشند.
  3. کاربران و بیشتر صفحه خوان ها از این ALTها برای درک محتوای تصویر استفاده می کنند.
  4. وقتیکه به درستی از این ALTها استفاده شود، متون ALT به اسپایدربات ها اجازه ایندکس بهتر محتوایتان را می دهند.

اشتباه در انتخاب کدبندی نویسه

همانطوری هم که از نامش برمی‌آید، اشتباه رایج بعدی در هنگام انتخاب کدبندی نویسه رخ می دهد. خلاصه داستان این است که هیچ اهمیتی ندارد که وبسایتتان برای چه منظوری ساخته شده، هر صفحه وب بایستی مجموعه کاراکتری تعریف شده ای داشته باشد. نکته در این است که این مجموعه ها به مرورگرها می گویند که صفحه شما از چه نوع کاراکترهایی در صفحه تان استفاده کرده اید.

واضح است که مجموعه کاراکتری بسته به زبان وبسایت متغیر است. یعنی اینکه صفحات انگلیسی با صفحات به زبان چینی از مجموعه های نویسه‌ای کاملا متفاوتی استفاده می کنند. با توجه به این مسایل، شما نمی توانید کدبندی کاراکتری را پشت گوش بیاندازید. اینکار به مرورگرها و دستگاه های کمکی می گوید که چه نوع داده ای بایستی خوانده و نمایش داده شود.

نادیده گرفتن تگ های ساده

همیشه به یاد داشته باشید که تمام محتوای تگ head (مثلا title، meta، style) بایستی داخل تگ‌ها head باشند.

  • <head>
  • <head/>

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

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

مطالب مرتبط

لینک‌های Absolute، لینک‌های Relative و لینک‌های ID

لینک‌ها یا هایپرلینک‌ها ابتدایی‌ترین شکل از مرور محسوب می شوند. بدون آنها وب به شکلی متفاوت از آنچیزی که اکنون می‌شناسیمش می‌بود. لینک های Absolute لینک های Absolute لینک هایی هستند که یک مقصد مشخص دارند. ساخت یک لینک absolute را می توان با یک تگ anchor یا تگ a شکل داد. این تگ ها […]

ID و کلاس در CSS و تفاوتشان

کلاس ها در CSS و HTML مهمترین بخش CSS، اختصاص صحیح HTML به کلاس مخصوصش در CSS می باشد. شما هر تکه کد CSS را به عنصری در html مرتبط می کنید مگر اینکه آن عنصر به خصوصیات استایل دهی دیگری مرتبط باشد. کلاس ها را می توان برای ساخت ساختاری از زیرکلاس ها استفاده […]

نام دامنه چیست؟

نام دامنه بخشی از آدرس آنلاین شماست و بازدیدکنندگان‌تان از آن آدرس برای یافتن شما استفاده می کنند. برای مثال نام دامنه راکت وردپرس wproket.ir است. نام دامنه شما نیز بایستی منحصر به فرد باشد. وقتیکه آن نام را ثبت کردید، هیچ شخص دیگری نمی تواند همان نام را ثبت کند، البته در صورتی که […]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *