تگ Span چیست و چه کاربردی دارد

span

span

HTML چیست ؟

همانطور که همه می دانیم طراحان اولیه صفحات وب ، HTML را طوری طراحی کردند که به صورت معنایی ، بتواند هر آنچه که بصورت مکتوب ( ‌مثلا کتاب ) وجود داشت را در وب بر روی صفحه نمایش کاربران به آنها نشان بدهند . به همین دلیل  برای طراحی صفحات وب  html خلق کردند که قابلیت های بسیار زیادی را داشت و به همان دلایلی که گفته شد یکسری موارد محدود کننده در آن وجود داشت . از سوی دیگر بخاطر دید کوچک ونیاز کمرنگی که از آن انتظار می رفت موارد بسیار محدودی در آن دیده شده بود و رفته رفته با تغییر نسخه های مختلف HTML و سپس بعد از ایجاد XHTML آن مفهوم ابتدایی به ابزاری قدرتمند برای طراحی صفحات وب تبدیل شد .

مرورگرهای مختلف همیشه سعی کرده اند تا زبان های برنامه نویسی تحت وب ( مثل ASP و PHP و … ) را به بهترین شکل به HTML تبدیل کنند و درنهایت تنها چیزی که کاربر مشاهده می کند یک HTML است . یکی از دلایلی که مرورگرهای مختلف صفحات را به شکل متفاوتی نشان می دهند، تفسیر متفاوت آنها از تگ های موجود است مثلا ممکن است یکی از آنها asp:table را به table و دیگری آن را به div تبدیل کند ( گرچه مثالی که زده شد اصلا حقیقت ندارد و همه مرورگرها asp:table را به table تبدیل می کنند، ایم مثال صرفا برای درک بهرت خواننده مطلب آورده شد ) دلایل دیگری هم وجود دارد که در این مبحث جایی برای مطرح کردن آنها نیست .

تگ های HTML

تگ های HTML

SPAN چیست ؟

همانطور که در بالا گفته شد HTML ابزار مختلفی برای طراحی یک صفحه وب را در اختیار یک طراح قرار می‌دهد . از آن جمله می توان به تگ های P , strong , br , div , table و span اشاره کرد. هر کدام از این تگ ها کاربرد مخصوص به خود را دارند و باید در جای صحیح خود استفاده شوند . مثلا اگر شما یک پاراگراف جدید را شروع میک نید موظفید که از تگ p استفاده کنید (‌گرچه کسی شما را به این کار مجبور نمی کند ) اما دانستن این نکته ضروری است که استفاده صحیح از تگ های html در طراحی سایت ها به میزان قابل توجهی در ranking وب سایت شما تاثیر گذار خواهد بود .

span یک تگ html است که هنوز در xhtml هم کاربرد دارد و منسوخ نشده . خود من در سایتهای مختلف کاربردهای متفاوت و شگفت انگیزی از span را دیده ام که در بعضی موارد در شگفت مانده ام . حتی در یک مورد کسی از span بجای div استفاده کرده بود !!! و همین عامل بود که باعث شد من این مطلب را بنویسم و جای صحیح استفاده از این تگ را یاد آور شوم .

span در معنای لغوی به معنای محدوده و مکانی به اندازه یک وجب است که در html هم با همین معنا استفاده می شود . وقتی که شما می خواهید در بین یک خط یک بخش از نوشته یا یک بخش از صفحه را از سایر بخش ها متمایز کنید باید از این تگ استفاده کنید . به این معنی که فرض کنید یک متن دارید و می خواهید در بین آن خط یک کلمه را آبی رنگ نمایش دهید . و یا می خواهید پس زمینه آن کلمه را با رنگ دیگری ( بخاطر high light کردن ) مشخص کنید باید از این تگ استفاده نمایید.

توجه داشته باشید که یکی از مزایای span آن است که بعث شکستگی خطوط نمی شود و هر جا که استفاده شود بخش موجود در خوش را مثل یک گروه از سایر بخش ها جدا می کند و شما می توانید تغییرات مورد نظرتان را بر روی گروهی که ایجاد کرده اید اعمال کنید . برای روشن شدن اینکه مجاز به استفاده از چه خصوصیاتی هستید موارد زیر را از سایت w3c می آورم

نحوه استفاده از span به شکل زیر است . ( توجه : فواصل قبل از تگها را بخاطر محدودیت وردپرس ایجاد کردم )

< p> My mother has  < span class=”blue”>light blue< / span > eyes. < / p>

خصوصیات مجاز

id, class, title, style, dir, lang, xml:lang

event های مجاز

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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

Internet Explorer , Mozilla FireFox , Google Chrome , Opera , Safari

در نهایت به طراحان وب توصیه می کنم که از تگ های html در مکان صحیح آن استفاده کنند و مطمئن باشید که برای هر منظوری که دارید قبلا یک ابزار مناسب و کارآمد طراحی شده . با طراحی صحیح به بالارفتن ranking سایت و نیز به cross browser شدن آن کمک می‌کنید.

لینکهای مرتبط

   سایت W3c

3 Responses to تگ Span چیست و چه کاربردی دارد

  1. نويد says:

    سلام ، خواستم تذكر بدهم كه مرورگر هيچ وقت تگي را تبديل نمي كند ( asp:table به table ) بلكه تگ هاي مربوط به هر زبان برنامه نويسي سمت سرور تبديل شده و html خالص به مرورگر فرستاده ميشود . منتهي اين مرورگر است كه تصميم مي گيرد چگونه مثلا يك div را نمايش دهد.

  2. مهدی says:

    سلام
    به نکته مهم و جالبی اشاره کردید. Semantic html و یا همان کاربرد درست و دقیق تگ‌ها در جای صحیح خود بحثی است که کمتر به آن رسیده شده است. من به شخصه توسعه دهندگان قابلی را می‌شناسم که به هیچ وجه این اصول را رعایت نمی‌کنند و دلیل آن هم اغلب ندانستن این موضوع است.
    در وبلاگم و البته فعلاْ تنها در یک پست (قسمت‌های بعدی در دست احداث است!!!) به بحث semantic html می‌پردازم. خوشحال می‌شم نظرتون رو اعلام کنید.
    Semantic HTML

  3. مقاله فوق العاده ای بود.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: