اصول و استاندارد های کدنویسی در html (بخش سوم)

با عرض سلام خدمت تمامی کاربران یک لرن

در این پست اصول و استاندارد های کدنویسی در html (بخش سوم) را برای شما آماده کرده ایم که امیدواریم برای شما مفید باشد و در بهبود وضعیت کدنویسی , شما را یاری کند

برای مشاهده قسمت اول کدنویسی استاندارد در html و همچنین قسمت دوم کدنویسی استاندارد در html میتوانید در سایت جستجو کنید !

 اصول و استاندارد های کدنویسی در html (بخش سوم)

دندانه گذاری

شاید این عنوان برای شما کمی عجیب باشد و بپرسید دندانه گذاری یعنی چه ؟ برای پاسخ به این سوال بهترین جواب نوشتن مرتب کدهاست به طوریکه هر تگی در هر محلی که ایجاد شده است در همان محل بسته شود

شاید فهم این مبحث فقط با مثال ممکن باشد پس به مثال های زیر دقت کنید

مثال صحیح :

<div>
	<ul>
    	<li>this is list item</li>
        <li>this is list item</li>
        <li>this is list item</li>
    </ul>
</div>

مشاهده میکنید که در کد بالا تگ ul در همان جایی که ایجاد شده در چند خط بعد بسته شده است , تگ div نیز به همین صورت میباشد

مثال غلط :

<div>
<ul>
    <li>this is list item</li>
    <li>this is list item</li>
    <li>this is list item</li>
    	</ul>
</div>

اما در مثال غلط مشاهده میکنید که دندانه گذاری رعایت نشده است .

مثال غلط :

<div>
<ul>
<li>this is list item</li>
<li>this is list item</li>
<li>this is list item</li>
</ul>
</div>

مثال بالا نیز غیر استاندارد میباشد زیر شما دندانه گذاری را رعایت نکرده اید بهترین کار برای اینجا دندانه استفاده از کلید tab میباشد

نحوه ی استفاده از تگ های inline و block

ابتدا سوالی که پیش می آید تگ های بلاک چیست و تگ های این لاین چیست ؟

تگ های block به تگ هایی میگوییم که خط قبل از خود را میشکنند و به خط بعد میروند ولی تگ های inline به تگ هایی میگوییم که در همان خط  مذکور ادامه می یابند و به خطر جدید نمی روند

مثال از تگ های بلاک : div , p , ul , hr, form , ol , …
مثال از تگ های این لاین : input , textarea , button , img , a , …

اما چه ربطی به استاندارد نویسی دارد ؟ بله نکته همینجاست اگر شما تگ های block را داخل تگ های inline به کار ببرید کاری کاملا اشتباه مرتکب شده اید اما اگر تگ های inline را داخل block به کار ببرید از نظر استاندارد نویسی کدنویسی شما قابل قبول است .

مثال صحیح :

<div>
<a href="#">link</a>
</div>

مثال غلط :

<a href="#"><p>paragraph</p></a>

استفاده از alt در تگ img

شما باید از شناسه alt در تگ img استفاده کنید اگر از اتریبیوت alt استفاده نکنید تگ های img شما استاندارد نخواهد بود و استفاده از alt فواید زیر را دارد

1- در صورت لود نشدن تصاویر , متن alt به جای تصاویر نمایش داده خواهد شد

2- برای بهینه سازی تصاویر وب شما میباشد

3- تنها راه شناخت تصاویر شما توسط موتور های جستجو همین شناسه alt میباشد

پس در تصاویر از شناسه alt استفاده کنید

مثال صحیح :

<img src="" alt="alt" />

مثال غلط :

<img src="" />

در اینجا اصول و استاندارد های کدنویسی در html (بخش سوم) به پایان رسید منتظر قسمت های بعدی باشید

لطفا در صورت تمایل دیدگاه خود را درباره این نوشته ارسال کنید

فرادرس

برچسب ها : ، ، ، ، ، ، ، ،