Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه ۲) : Syntax و HTML5 doctype و lang

در این مطلب با ادامه راهنمای کدنویسی HTML و CSS در خدمتتون هستم.code guide

در جلسه قبل مقدمه ای در مورد دوره ارائه دادیم و مواردی که در آینده گفته خواهند شد رو بیان کردیم.

موارد مربوط به HTML

Syntax یا قواعد کدنویسی

کدهاتون رو با استفاده از ۲ تا Space یا فضای خالی، تورفتگی یا Indentation بدین و کاری کنید که در همه محیطها و ادیتورها به یک صورت نمایش داده شود. کد زیر رو در نظر بگیرید:



  
    Page title
  
  
    Company
    

Hello, world!

همونطور که میبینید، هر خط نسبت به پدر خود، دو Space تورفتگی داره. از Soft Tab بجای Hard Tab استفاده کنید. میتونید تفاوت Soft Tab و Hard Tab رو در اینجا مطالعه کنید.

همیشه سعی کنید برای قرار دادن مقدار ویژگی‌ها از ” یا Double Quote استفاده کنید و هیچوقت از ‘ یا Single Quote استفاده نکنید. همونطور که در کد بالا میبینید، از این قاعده استفاده کردیم. بطور مثال برای المنت h1 کلاس hello-world رو درون ” قرار دادیم.

در انتهای تگهایی که فرزندی ندارن / رو قرار ندین. مطابق با HTML5 Spec این / یا slash که قرار داده میشه، هیچ اثری نداره و اختیاری هست. پس بهتره که / رو قرار ندیم. مثلا کد زیر رو در نظر بگیرید:

همونطور که میبینید تگ link هیچ فرزندی نداره. پس / انتهای اون بی اثر هست و بهتره که اون رو برداریم. بصورت زیر:

نکته بعدی اینه که بعضی از تگها، Closing Tag یا تگ بسته شونده اختیاری رو دارن و اگر اونا رو هم قرار ندیم، مشکل خاصی بوجود نمیاد. 

یا از این موارد هستن. ولی پیشنهاد شده که همیشه این موارد رو قرار بدین و هیچوقت اونا رو از قلم نندازید.

در مورد HTML5 doctype

کد زیر رو در نظر بگیرید:



  
  

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

Language attribute یا ویژگی مربوط به زبان

نقل قول HTML5 Spec زیر رو در نظر بگیرید:

نویسنده‌ها رو تشویق میکنیم که ویژگی lang رو برای ریشه ای‌ترین تگ یا همون html قرار بدن و با استفاده از اون زبان سند یا صفحه رو مشخص کنند. این مورد به ابزارهای صوتی و Screen Reader‌ها کمک میکنه که این سند چه زبانی داره و از چه تلفظی بهره میبره. همچنین ابزارهای ترجمه هم متوجه میشن که با چه زبانی سروکار دارن و بهتر اونو ترجمه میکنن.

میتونین در اینجا بیشتر در مورد ویژگی lang مطالعه بفرمایید.

همچنین میتونین در اینجا لیست همه زبانهایی که میتونین درون ویژگی lang استفاده کنید و قرار بدین رو مشاهده کنید. بعنوان مثال برای زبان فارسی یا persian باید از fa استفاده کنید.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0