آموزش استفاده از تگ div و span در HTML

دو تگ div و span در HTML از پرکاربردترین تگ‌ها به شمار می‌روند. این دو تگ از جمله تگ‌هایی هستند که صرفا برای قالب‌بندی کاربرد دارند و از نظر موتورهای جستجو و مرورگرهای وب مفهوم خاصی ندارند.

به عبارت دیگر متخصصان طراحی سایت برای اینکه بتوانند شکل و طرح مورد نظر خود را در صفحات وب پیاده‌سازی کنند و در عین حال مفهوم محتوا را هم تغییر ندهند، ممکن است بخواهند از این تگ‌ها بیشتر از سایر تگ‌ها استفاده کنند.

html5

۱- تگ div

تگ div برای ایجاد ناحیه‌های block یا جعبه‌ای کاربرد دارد. ناحیه‌های block، بخش‌هایی از صفحه هستند که به صورت کامل عرض صفحه را پر می‌کنند و اگر متنی داخل آن‌ها نوشته شود با متن‌های قبلی و بعدی در یک خط قرار نمی‌گیرد. بسیاری از تگ‌های HTML مثل پاراگراف‌ها( p ) و جدول‌ها( table ) و عنوان‌ها( h1-h6 ) این ویژگی را دارا می‌باشند ولی اغلب آن‌ها دارای مفهوم نیز هستند و ممکن است روی عملکرد سئو سایت اثرگذار باشند.

مثال استفاده از تگ div

با تعیین شناسه( id ) یا کلاس( class ) و کمک گرفتن از CSS، می‌توان شکل ظاهری این بخش‌های صفحه را تغییر داد:

علت اینکه تگ div به صورت block دیده می‌شود این است که در CSS پیش‌فرض مرورگرها، صفت display برای آن با «block» مقدار‌دهی شده است. هنگام طراحی سایت واکنش‌گرا یا در شرایط دیگر، ممکن است بخواهید این ویژگی را نیز تغییر دهید:

۲- تگ span

تگ span از نظر کاربرد و عملکرد شباهت‌های زیادی با div دارد. با این تفاوت که در CSS مرورگر، مقدار صفت display برای آن با «inline» مقداردهی شده است.

یکی از کاربردهای اصلی span هنگامی است که می‌خواهید یک کلمه یا چند کلمه از میان متن را انتخاب کنید و شکل نمایش آن را تغییر دهید:

همان طور که در مورد تگ div نیز گفته شد، ممکن است بخواهید به شکل زیر، مقدار صفت display را برای span تغییر دهید:

نکات سئو مربوط به استفاده از تگ‌های div‌ و span

استفاده‌ی نابجا و بیش از اندازه از هر یک از تگ‌های HTML باعث افزایش حجم سایت و مهم‌تر از آن، افزایش بار پردازشی برای نمایش سایت می‌شود که مستقیما اثر منفی روی سئو سایت برجای می‌گذارد.

در هنگام طراحی سایت لازم است تا مقدار استفاده از تگ‌های HTML را به کمترین حد ممکن برسانید و اگر بخشی از صفحه علاوه بر شکل گرافیکی، دارای مفهوم نیز هست، از تگ مناسب همان مفهوم برای قالب‌بندی استفاده شود.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱