تگ های معنایی در HTML5
توی این جلسه از دوره آموزش رایگان HTML به تگ های معنایی میپردازیم. اول به صورت کامل با این مفهوم آشنا میشیم و بعد هرکدوم از این تگ ها مثل header یا nav رو یاد میگیریم. این تگ ها در html اهمیت بالایی دارن پس حتما توی این جلسه با من همراه باشید.
پیشنهاد میشه برای یادگیری بهتر، ابتدا ویدیوی بالا صفحه که قسمتی از دوره آموزش رایگان HTML از وبسایت MEGA JS هست رو مشاهده کنید و بعد به مطالعه متن بپردازید.
تگ های معنایی در HTML5
از این تگ ها که در نسخه html5 به وجود اومدن، میشه به عنوان جایگزین تگ div استفاده کرد. اگه با تگ div آشنایی ندارید میتونید از جلسه بخش بندی سایت در HTML استفاده کنید. هدف اصلی استفاده از این تگ ها، کمک به مرورگر برای شناخت بهتر هر بخش از سایته. در گذشته که ما سایتمون رو با تگ div بخش بندی میکردیم، متوجه شدن کارکرد هر بخش، برامون سخت بود؛ اما الان تگ های مفهومی کار مابرنامه نویس ها و همچنین موتور های جستوجو رو برای متوجه شدن کدها راحت تر کردن.
مزایای تگ های معنایی
- بهبود سئو سایت: رتبه بندی سایت شما در گوگل اهمیت بالایی دارد و باعث افزایش کاربر های سایت میشه، این تگ‌ها به این قضیه کمک زیادی میکنن
- قابل فهم تر شدن کد ها برای برنامه نویس: خیلی پیش میاد که ما بخوایم بعد از مدتی کدهامون رو آپدیت کنیم، تگ های معنایی این کارو برای ما راحت تر میکنن
- کمک به نابینایان: افراد نابینا یا کم بینا با استفاده از نرم افزار های صوتی محتوای صفحه رو درک میکنن و این تگ ها به این عزیزان کمک میکنه تا درک بهتری از سایت داشته باشن.
- پشتیبانی توسط مرورگر ها: تقریبا میشه گفت تمام مرورگر های جدید از تگ های مفهومی پشتیبانی میکنن.
حالا که با مفهوم تگ های معنایی آشنا شدیم بهتره که بریم سراغ اولین تگ از این مجموعه.
تگ header در HTML
این تگ برای ساخت بخش بالایی و سربرگ صفحات استفاده میشه. بالای هر سایتی یه بخش header وجود داره اکثرا داخلش منو و لوگو سایت و… قرار داده میشه. شما این بخش رو میتونید با تگ div هم بسازید اما تگ معنایی header روش اصولی‌تری برای این کاره.
در اینجا یه نمونه از این تگ رو مشاهده میکنید:
<body>
<header>
در اینجا هر محتوایی که میخواید توی سربرگ باشه رو مینویسید
</header>
...ادامه کد ها
</body>
تگ nav
این تگ برای ساخت navigation menu یا منو ناوبری استفاده میشه. به زبون ساده تر این تگ برای نمایش دادن لینک ها شما استفاده میشه. به طور معمول داخل این تگ از چند تگ a استفاده میشه.
نکته: ما میتونیم لینک هامون رو داخل تگ هایی مثل ul یا ol قرار بدیم و به صورت لیست نمایش بدیم، اگر با این تگ ها آشنایی ندارید میتونید از جلسه لیست ها در HTML استفاده کنید.
تگ section و article
این دو تگ تقریبا کارشون شبیه همه، اما تفاوت هایی هم دارن که در اینجا بهشون میپردازیم.
با استفاده از تگ معنایی section میتونید محتواهای مرتبط به هم در یک صفحه رو دسته‌بندی کنید. البته باید توجه داشته باشید که اولویت با تگ های مفهومی دیگه مثل nav و article و aside هست.
تگ article هم تقریبا مثل تگ section عمل میکنه، تنها تفاوتی که تگ article داره اینه که برای محتواها مستقل استفاده میشه، محتواهایی که میتونن به تنهایی و جدا از بقیه بخش ها دیده بشن. مثلا در برنامه اینستاگرام هر پستی که شما میبینید میتونه توی تگ article قرار بگیره؛ چون محتواش مستقل از بقیه توییت هاست ولی مجبوره کنار بقیه قرار بگیره.
تگ aside
این تگ برای بخش های کناری سایت استفاده میشه، همین صفحه از سایت مگا جی اس رو اگر با لپ تاپ یا کامپیوتر باز کنید میبینید که یه بخش کناری برای جدید ترین مقاله ها و دسته بندی ها و… داره که همشون میتونن داخل تگ aside قرار بگیرن. معمولا محتواهایی داخل این بخش قرار میگیرن که شاید به صفحه ما مرتبط نباشم، اما به کل سایت ما مربوط میشن.
تگ footer
هر سایتی یه بخش پایانی داره، این بخش معمولا توی همه صفحات یکسانه و داخلش توضیحات کلی سایت نوشته میشه. به عنوان مثال میتونه لینک های مختلف مثل تماس با ما و درباره ما داخل این بخش قرار بگیره یا راه های ارتباطی و شبکه های اجتماعی نمایش داده بشه. این بخش با داخل تگ معنایی footer قرار میگیره.
توی سایت web-eau.net میتونید ده مورد از این فوتر ها که با css استایل های زیبایی گرفتن رو ببینید و به صورت تصویری با این تگ آشنا بشید، همچنین اگه همین صفحه از سایت مگا جی اس رو به پایین اسکرول کنید میتونید فوتر سایت مارو ببینید.
تگ main
ما بخش کلی صفحه‌مون رو داخل تگ معنایی main قرار میدیم. از این تگ توی هر صفحه فقط یک باز استفاده میشه و محتوایی داخلش قرار میگره که فقط مخصوص به همون صفحه خاص باشه (منحصر به فرد باشه و تکراری نباشه). یعنی تگ هایی مثل header و footer و aside نمیتونن فرزند این تگ باشن.
موتور های جستجو برای پیدا کردن محتوای اصلی صفحه دنبال تگ main میگردن پس استفاده کردن از این تگ الزامیه.
نکته هایی درباره تگ های معنایی
- این تگ ها مانند div هیچ استایل پیش فرضی ندارن.
- استفاده اشتباه از این تگ ها روی سئوی سایت شما تاثیر منفی داره.
- استفاده کردن از این تگ ها کدهاتون رو تمیز تر میکنه و شمارو به برنامه نویس بهتری تبدیل میکنه.
سخن پایانی
حالا که به اینجای جلسه رسیدیم میشه گفت شما با تگ های معنایی در HTML آشنایی کامل دارید و میتونید از اونها استفاده کنید. البته باید توجه داشته باشید که این تگ ها حساسیت بالایی دارن و باید درجای مناسب از اونها استفاده کرد. لطفا هرجایی از این آموزش مشکلی داشید توی کامنت ها سوالتون رو مطرح کنید، همچنین برای مشاهده جلسه بعد میتونید از لینک زیر استفاده کنید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.