گروه آموزش طراحی سایت ۲۹ شهریور ۱۳۹۰ ۶ 11709 بازدید

اگر تاکنون با کدهای html مواجه شده باشید، حتما متوجه شده اید که تگ های div و span به وفور به کار گرفته شده اند. این تگ ها در اچ تی ام ال به صورت عمومی و به منظور نشانه گذاری قسمت های مختلف به کار می روند.

علت اینکه از تگ های div و span با نام تگ های عمومی یاد می کنیم، این است که در طراحی صفحات وب به وسیله ی اچ تی ام ال برای برخی عناصر، تگ های ویژه و مخصوصی وجود دارند؛ مثلا تگ a برای لینک ها، تگ های ul – li و ol – li، برای لیست ها و منوها، تگ img برای تصاویر، تگ p برای پاراگراف ها و … اما برای سایر محتوای سایت که تگ اختصاصی ای وجود ندارد، از تگ های div و span کمک گرفته می شود.

کاربرد تگ div در html

تگ div که مخفف division به معنای بخش، قسمت می باشد، برای نشانه گذاری بخش های مختلف اصلی به کار می روند. مثلا برای نشانه گذاری هدر (header)، نشانه گذاری سایدبار (sidebar)، و یا نشانه گذاری فوتر (footer).

به یاد داشته باشید که معمولا در طراحی صفحات وب، قسمت های اساسی و اصلی را با تگ <div> نشانه گذاری می کنند و برای قسمت های کوچک تر و جزئی تر استفاده از آن توصیه نمی شود.

نکته:

تگ div، به عنوان یک عنصر بلوکی در html شناخته می شود.

برای درک بهتر از نحوه ی استفاده از تگ div، به نمونه کد اچ تی ام ال زیر توجه کنید:

<div id="wrapper">
<div id="content">
</div><!--#content-->
<div id="sidebar">
</div><!--#sidebar-->
<div id="footer">
</div><!--#footer-->
</div><!--#wrapper-->

همانطوری که مشاهده می کنید، در کد html فوق، کل محتوای صفحه ی وب در دست طراحی، به بخش ها (و یا همان divها) ی کلی اعم از پوشاننده ی کلی یا همان wrapper، محتوا یا همان content، سایدبار و فوتر تقسیم بندی شده است.

کاربرد تگ span در html

تگ span برای نشانه گذاری بخش های کوچک تر به کار می رود. مثلا برای نشانه گذاری بخشی از یک نوشته، یک یا چند کلمه از یک جمله، یک عبارت از یک پاراگراف و …

نکته:

تگ span به عنوان یک عنصر خطی در html شناخته می شود.

برای درک بهتر از نحوه ی استفاده از تگ span، به نمونه کد اچ تی ام ال زیر توجه کنید:

<p>Our website name is <span>Onliner</span> that is dedicated to web design.</p>

نام اصلی وب سایت در متن فوق به وسیله ی تگ span محصور شده است تا بلکه نیاز باشد به آن سبک دهی و استایل جداگانه ای شود. مثلا شاید لازم باشد توسط css، رنگ آن متفاوت تعیین شود و یا …

نظرات کاربران (۶)



  1. hamid

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

    • گروه آموزش طراحی سایت

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

  2. موسوی

    مثل همیشه عاااااااااااااااااالی !

  3. مهرناز

    از آموزش شما ممنونم


  4. ممنون
    کامل بود

  5. رضا اهنگر

    عالی بود
    ممنون