تگ های بلاکی در صفحات HTML

قبل از پیدایش CSS و تگ های بلاکی، طراحی قالب سایت (Layout) توسط تگ table انجام می شد. مهمترین ایراد تگ table آن است که ابتدا کل محتوا را در مرورگر لود کرده و سپس نمایش می دهد که این امر در صورتیکه حجم صفحه زیاد باشد، موجب دیر لود شدن سایت می گردد. با افزوده شدن تگ های بلاکی، طراحی قالب سایت توسط این تگ ها انجام شد که هم استفاده از آنها راحت تر بود و هم سرعت لود صفحات بهبود پیدا کرد.

تگ div

پر استفاده ترین تگ در طراحی یک صفحه وب می باشد و از آن برای بخش بندی قسمت مختلف یک صفحه استفاده می شود. قالب کلی سایت توسط این تگ طراحی شده و با استفاده از css می توان ظاهر بصری صفحات را نیز زیبا کرد. تگ div چیزی به جز یک کادر نیست. کادری که اگر به آن استایلی (توسط css) اعمال نشود، نه محدوده و نه خود تگ قابل مشاهده نخواهد بود. نحوه نمایش این تگ بصورت بلاکی بوده و در صورتیکه حتی عرض آن کل صفحه را نپوشانده باشد، اجازه نمی دهد عنصر دیگری در مجاورت آن قرار گیرد.

نحوه استفاده از این تگ به شکل زیر است.

<div>
    محتوا
</div>

البته مبحث این تگ بسیار گسترده می باشد اما برای حل تمرین های مختلف نیاز به دانش css می باشد به همین دلیل تمرین های مربوط به این تگ را می توانید در بخش آموزش css مشاهده نمایید.

تگ span

فرض کنید قصد دارید در یک پاراگراف به یک کلمه خاص، استایل (مانند رنگ، فونت و ...) اعمال کنید تکلیف چیست؟

اگر کلمه مورد نظر را درون یک <p> قرار دهید، ساختار پاراگرافی بهم می ریزد، اگر درون div قرار دهید، کلمه مورد نظر در یک سطر مجزا (چون نحوه نمایش دیو بصورت بلاکی می باشد) و قبل و بعد آن نیز در سطری مجزا خواهند بود.

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

<div>
    <p>
    طراحی وب سایت های اینترنتی یکی از مشاغل و تخصص های مهم در حوزه <span>کامپیوتر</span>
    می باشد که با یادگیری آن می توانید علاوه بر کسب درآمد خوب، موقعیت شغلی
    مناسبی را نیز برای خود فراهم کنید و حتی پا را فراتر گذاشته و اقدام به
    ساخت یک وبسایت خلاقانه برای پیاده سازی ایده های خود نمایید.
    </p>
</div>