به نام ایزد دانا
در این پست آموزشی در مورد تگ های معنایی یا Semantic Tags که در HTML5 اضافه شدند صحبت خواهیم کرد.
اینکه چرا به این تگ ها، تگ های معنایی میگیم و چرا اضافه شدن و هدف از اون ها چی بود.
امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.
اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید
Telegram, Twitter, Facebook & ... By : @ARiyou2000<br/>
با تشکر از همه شما دوستان، آریو جهان
دیگه بریم سر اصل مطلب
اول بیایید برسی کنیم تگ های غیرمعنایی چی هستند.
اغلب تگ های HTML به منظور جای دادن محتوا در خود تعریف می شوند و به مرورگر می گویند محتوای صفحات وب را چطور نمایش دهند. این تگ ها، نوع محتوای داخل خود را مشخص نمی کنند و نمی گویند هر محتوا چه نقشی (Role) در صفحات وب سایت دارد.
تگ های کلاسیک div و span غیر معنایی (non-semantic) می باشند و هیچ گونه اطلاعاتی راجع به نوع محتوای درون خود و نقش آن محتوا در صفحه وب را ارائه نمی دهند.
در اچ‌تی‌ام‌ال 5 معنایی (Semantic HTML5) تگ هایی وجود دارد که برای مرورگر مشخص می کند که هر محتوایی که در این تگ ها وجود دارد از چه نوعی هستند و چه نقشی در صفحه وب سایت دارد. تگ های معنایی html5 (Semantic Tags) صراحتا برای بات ها و خزنده های گوگل و بینگ مشخص می کند که کدام محتوای واقع در صفحه از اهمیت بیشتری برخوردار است، کدامیک برای navigation می باشد، کدامیک جانبی هستند و غیره…
بنابراین با افزودن تگ های معنایی HTML5 به صفحات وب سایت خود، اطلاعات اضافی به محتوای سایت اضافه خواهد شد که به موتورهای جستجوی گوگل و بینگ امکان تشخیص نوع محتوا و نیز درجه اهمیت و اولویت محتواهای صفحات وب را می دهد.
تگ های معنایی HTML5 مانند تگ های تصویر فوق، بطور مشخص نوع محتوای خود و نیز نقش آن را به مرورگر اعلام می کنند.
برای کاربرانی که از نعمت بینایی بهره مند می باشند، تشخیص بخش های مختلف یک وب سایت (مانند منو، هدر، محتوای اصلی و فوتر) ساده می باشد و قادرند در یک نگاه تمام المان ها را تشخیص دهند اما فرض کنید کاربری نابینا وارد یک وب سایت شود.
خزنده های موتور جستجوی گوگل و بینگ اگر نابینا نباشند حتما دچار ضعف در بینایی می باشند!
بنابراین بات های موتورهای جستجو به کمک شما نیازمند می باشند. اگر شما بعنوان مدیر وب سایت (و یا طراح وب سایت) برای GoogleBot مشخص کنید که کدام یک از المان ها هدر می باشد، کدام فوتر و بهمین ترتیب سایر المان های یک صفحه وب، این موتورهای جستجو از شما سپاسگزار خواهند بود!
از همه مهم تر اینست که به بات گوگل درجه اهمیت و اولویت محتوای بخش های مختلف یک صفحه وب را اعلام کنید.
تگ های معنایی زیادی در html5 وجود دارد که می توان از بین آنها <section> و <nav> و <footer> را نام برد اما المان های دیگری مانند <blockquote> و <em> نیز قابل تعریف و استفاده هستند.
بعنوان مثال، تگ های زیر می توانند بجای تگ <div> تعریف شوند تا نقش و نوع محتوای درون هر یک از آنها مشخص باشد:
یکی دیگر از مزایای این تگ ها درک بهتر موضوع و دسترسی راحت تر در CSS و... است.
از طرفی این تگ ها کدنویسی را کاهش داده و با یک پارچه کردن قسمت های اصلی کد، درک کد و ایجاد تغییرات یا ارتقا برنامه و تغییر در CSS برنامه توسط برنامه نویس دیگر را نیز راحت تر می کند.
پیش از این تگ <header> توسط برنامه نویسان به شکل زیر تعریف میشد:
<div id="header">
حال تصور کنید که برنامه نویسی دیگر از این رویه معمول پیروی نمی کرد و به جای I id="header" I مقدار زیر را وارد می نمود
I id="top" I
در این صورت بخش بزرگی با مشکل و اتلاف وثت در درک این نام گذاری رو به رو میشد.
نام گذاری های معمول تا پیش از این مطابق شکل زیر بود.
خب فکر می کنم تا همین جای کار کافی و قابل قبول بوده باشه. بنابر این این مبحث هم به تعریف قابل قبولی رسید.
در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.
نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.
شب و روزگار بر شما خوش.
بدرود.
ARiyou Jahan 12/01/2019 10:34 ب.ظ
