بین آنچه که در کد HTML می نویسیم و آنچه که در مرورگر نمایش داده می شود تفاوت هایی وجود دارد.
تا الان دیدیم که تگ ها توسط مرورگر فقط خوانده می شوند تا بداند چه محتوایی درون آنها وجود دارد اما آن تگ ها را هرگز نمایش نمی دهد.
همینطور مشاهده کردیم که چگونه توضیحات یا Comment را در کد بنویسیم تا فقط توسط توسعه دهنده وب قابل خواندن باشد و مرورگر آنها را نادیده گرفته و نمایش ندهد.
نوع دیگری که توسط مرورگر نادیده گرفته می شود فضاهای خالی یا همان Whitespace هستند که شامل موارد زیر می باشند:
- خط جدید
- خط خالی
- فرورفتگی
خط جدید
خط جدید و خط خالی (که نتیجه خط جدید می تواند باشد) توسط مرورگر نادیده گرفته می شود و از نظر مرورگر همه آنها تنها به عنوان یک تک فاصله محسوب می شوند.
<p>
متن آزمایشی متن آزمایشی،
متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی
متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی.
</p>
همانطور که در خروجی زیر مشاهده می کنیم همه خطوط جدید و خالی به عنوان یک تک فاصله در نظر گرفته می شوند:
متن آزمایشی متن آزمایشی، متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی.
حال هرکجا که نیاز بود خط جدید بوجود بیاوریم می توانیم از عنصر <br> استفاده کنیم:
<p>
متن آزمایشی متن آزمایشی <br><br>متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی <br>متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی.</p>
و همانطور که در خروجی دیده می شود خطوط جدید ظاهر شده اند:
متن آزمایشی متن آزمایشی
متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی
متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی متن آزمایشی.
فرورفتگی
برای ایجاد فرورفتگی در کد HTML می توان از کلید tab استفاده کرد که البته گاهی مقدار تورفتگی که این کلید ایجاد می کند تبدیل به دو تا تک فاصله می شود.
پس اگر به این وسیله قبل از کلمه ای فاصله ایجاد کنیم آن فاصله توسط مرورگر نادیده گرفته می شود و به جای آن یک تک فاصله بوجود خواهد آمد.
<p>
متن آزمایشی متن آزمایشی
متن آزمایشی متن آزمایشی.
</p>
در خروجی این فاصله ها از بین خواهند رفت.
چگونه HTML بنویسیم
حال که می دانیم ایجاد خط جدید و استفاده از تورفتگی تاثیری بر خروجی که مرورگر نمایش می دهد نخواهد داشت بهتر است از این دو مورد برای اینکه کد HTML خواناتری داشته باشیم استفاده کنیم.
برای نحوه نوشتن HTML هیچ قانونی وجود ندارد اما بهتر است طوری کد HTML را بنویسیم که خواندن آن برای خودمان راحتر باشد که در زمان ساخت یک صفحه وب کار ما را آسان تر کند.
اولین توصیه اینکه همیشه عناصر بلاک را در خط جدید بنویسیم و برای تگ آغاز و پایان یک خط مستقل داشته باشیم:
<article>
<p>
متن آزمایشی متن آزمایشی.
</p>
</article>
به عنوان دومین توصیه سعی کنیم همیشه تودرتو بودن عناصر را با استفاده از تورفتگی نمایش دهیم.
همیشه به ازای هر نسل یک تورفتگی ایجاد کنیم.
به این صورت روابط بین عناصر اینکه کدام عنصر فرزند کدام یک و یا نوادگان یک عنصر کدام هستند با یک نگاه به کد فهمیده می شود و این امر ما را در ساخت و توسعه یک وب سایت خیلی کمک می کند.
در مثال بالا پیدا کردن رابطه بین عنصر پاراگراف و مقاله در نگاه اول دشوار است.
<article>
<h1></h1>
<p>
<strong></strong>
<em></em>
<a href=""></a>
</p>
<img src="" alt="">
<p></p>
</article>
در مثال بالا هر دو توصیه رعایت شده است.
این نکات ترکیبی از سلیقه شخصی و همینطور تیمی است که شما در آن فعالیت دارید. یک تیم طراحی سایت باید با هم به یک سری توافقات برسند تا همه کدها استایلی یکسان داشته باشند.
به عنوان سلیقه شخصی من معمولا عناصر خطی را در یک خط HTML می نویسم و برای هر عنصر بلاک خط جدید ایجاد می کنم. اما آن هم نه هر عنصر بلاکی بلکه فقط عناصری که فرزند دارند. اما شاید این روش از نظر خیلی ها خوانایی کمی داشته باشد و بهتر باشد تا به ازای هر عنصر یک خط جدید ایجاد کنیم.
<article>
<h1></h1>
<p>Lorem ipsum dolor <strong>test test</strong> sit amet, consectetur adipisicing elit. <em></em>, maiores! <a href="">test</a></p>
<img src="" alt="">
<p></p>
</article>
مفید بود