چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت

چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت : همانطور که میدانید HTML یک زبان مارک آپ هست که دو تا چیز اصلی در آن وجود دارد : Content , markup به ترتیب محتوا و مارک آپ در فارسی .

When a site’s markup is “semantic,” it means the tags appropriately describe the content.

ترجمه : وقتی مارک آپ یک وبسایت به صورت سمنتیک (معنایی) باشد به این معنی است که تگ ها برای توضیح کانتنت و نقش و هدف آن مناسب انتخاب شده است .

چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت
چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت

چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت

شما برای گذاشتن یک بند یا همان پاراگراف از تگ p استفاده میکنید که این تگ مخفف paragraph است .پس این منطقی است که یک بند یا پاراگراف را داخل یک تگ p بگذارید . چرا؟ چون این تگ منطقش پاراگراف است .

کانتنت یا همان محتوای وبسایت شاید شامل نوع های زیادی باشد مثل : ویدیو یا عکس یا نوشته یا هرچیز دیگری … پس در html5 ما تگ های مخصوصی برای این ها نیز داریم . پس باید هر کدام از نوع محتوا را در تگ مخصوص خودش بگذاریم . (به صورت منطقی و با اصول و معنا).

شاید هنوز هم برایتان سوال باشد که چرا باید از سمنتیک وب یا همان وب معنایی استفاده کنیم؟قبل از اینکه وب پیج ها هر چیزی را در اسکرین نشان دهند (منظور قدیم که اینقدر وب پیشرفت نکرده بود) موتور جستجو گر و رندر فقط فایل html را میخواند و مفهمید که باید چکار انجام دهد …

ولی الان نه !! برای هر محتوایی تگی خاص وجود دارد و هر تگ استایل هاو رفتار های دیفالت و پیشفرض خودش را دارد . پس استفاده از آن در جای نا درست میتواند مشکل ساز باشد .مارک آپ سمنتیک و وب معنایی وبسایت را ثابت و قابل استفاده نگه میدارد .

به این دو تصویر نگاه کنید .

چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت
نوشتن غیر معنایی
چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت
نوشتن معنایی

اگر به دو تصویر بالا دقت کرده باشید میفهمید که در تصویر اولی هم خوانایی متن پایین است و هم معنایی نیست . چرا ؟ چون متن Chocolate chip cookies باید داخل تگ h1 باشد چون تایتل نوشته است . و متن پایینش در یک تگ p چون پاراگراف است .

و به ingredients اگر نگاه کنید ظاهرا در تگ h2 است و زیر مجموعه هایش در تگ ol , li هستند .چرا؟ چون ingredients یکی از زیرمجموعه های موضوعی هست که تایتلش Chocolate chip cookies است و منطقی است که زیر مجموعه هایش را با تگ h2 بزنیم .

ولی اگر یک موضوع جدا از Chocolate chip cookies بود ما از تگ h1 برای تایتلش استفاده میکردیم . (منطقی است نیست؟؟)یک مثال بهتر برای درک این موضوع :

چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت
غیر معنایی
چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت
معنایی

در تصویر اول ما همه چیز را با div و span زده ایم .ولی در تصویر دومی ما برای دکمه از button و برای ورودی هایمان از input استفاده کردیم .(استایل های داده شده به هر دو یکی است)

ولی وقتی بر روی دکمه در تصویر اولی کلیک میکنیم اتفاقی رخ نخواهد داد چون فانکشنی برای div تحت عنوان یک دکمه ننوشته شده است .

ولی در تصویر دومی وقتی بر روی دکمه کلیک میکنیم یک اتفاقی رخ خواهد داد چون ذات یک دکمه برای کلیک ساخته شده است و به محض اینکه شما بر روی آن کلیک کنید کاری را انجام خواهد داد .

یک مثال بهتر :

وقتی شما بجای استفاده از تگ h1 برای تایتل وبسایتتان از این روش یا روش های دیگر بغیر از استفاده از تگ مخصوص خودش استفاده میکنید . به این معناست که کامپیوتر نمیتواند درک کند که تایتل شما کجا است و اصلا صفحه تایتل دارد یا خیر .

یک مثال بهتر و حرفه ای تر از وب معنایی :

وقتی شما در یک پاراگراف تاریخ تاسیس شرکت خودتان را نوشته اید به اینصورت :

این نوع نوشتار معنایی نیست و بهتر است به این صورت بنویسید :

فرق بین نوشتار اولی و دومی این است که تاریخ تاسیس را در تگ time  با اتریبیوت date time به معنای تاریخ گذاشتیم . (بسیار منطقی و با معنا)

نتیجه گیری

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

پس از نوشتار معنایی وب استفاده کنید و سعی کنید کار هایتان را به معنا دار کردن سوق دهید . چون هم در فهم کامپیوتر و سئو و رتبه ها و اعتبار هایی که باید بدست بیاورید تاثیر زیادی دارد .

مقالات مربوط به طراحی وب

دوره آموزشی HTML

علی

سلام من علی هستم یکی از نویسنده های کدفرند و به وب و دنیای اینترنت شدیدا علاقه دارم .

همه مطالب این نویسنده

تاکنون هیچ نظری ثبت نشده است