چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت
چگونگی برنامه نویسی و کد نویسی معنایی در وبسایت : همانطور که میدانید 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 تحت عنوان یک دکمه ننوشته شده است .
ولی در تصویر دومی وقتی بر روی دکمه کلیک میکنیم یک اتفاقی رخ خواهد داد چون ذات یک دکمه برای کلیک ساخته شده است و به محض اینکه شما بر روی آن کلیک کنید کاری را انجام خواهد داد .
یک مثال بهتر :
<font size="6"><b>This is the page title</b></font>
وقتی شما بجای استفاده از تگ h1 برای تایتل وبسایتتان از این روش یا روش های دیگر بغیر از استفاده از تگ مخصوص خودش استفاده میکنید . به این معناست که کامپیوتر نمیتواند درک کند که تایتل شما کجا است و اصلا صفحه تایتل دارد یا خیر .
یک مثال بهتر و حرفه ای تر از وب معنایی :
وقتی شما در یک پاراگراف تاریخ تاسیس شرکت خودتان را نوشته اید به اینصورت :
<p>شرکت من در تاریخ 9/9/1396 ساخته شده است</p>
این نوع نوشتار معنایی نیست و بهتر است به این صورت بنویسید :
<p>شرکت من در تاریخ <time datetime="2012-12-08">8 December 2012</time>ساخته شده است </p>
فرق بین نوشتار اولی و دومی این است که تاریخ تاسیس را در تگ time با اتریبیوت date time به معنای تاریخ گذاشتیم . (بسیار منطقی و با معنا)
نتیجه گیری
سعی کنید شما نیز وبسایت ها تمرین هایی که برای یادگیری انجام میدهید را به صورت معنایی بنویسید چون هر چه به سمت جلو پیش میرویم ماشین ها و الگوریتم های بزرگی که بسیار بسیار هوشمند هم هستند روی کار می آیند و شما نیز باید با استاندارد های آنها هماهنگ باشید .
پس از نوشتار معنایی وب استفاده کنید و سعی کنید کار هایتان را به معنا دار کردن سوق دهید . چون هم در فهم کامپیوتر و سئو و رتبه ها و اعتبار هایی که باید بدست بیاورید تاثیر زیادی دارد .
برچسب:سئو, طراحی معنایی وبسایت, نوشتار معنایی وب, وب سمنتیک, وب معنایی