Semantic بودن HTML5 به چه معناست ؟
Semantic یعنی معنادار بودن
Semantic در زبان شناسی به مفهوم "مطالعه در زمینه ی معنی" میباشد، در زبانی مانند انگلیسی، دو بخش داریم، گرامر یا Syntax و معنی، اگر به یک جمله ی انگلیسی فکر میکنید در واقع دارید به معنای آن فکر میکنید، به جمله ی زیر توجه کنید :
" یک مرد کامپیوتر را از پنجره به بیرون انداخت"
شما هنگام خواندن این جمله به معنای آن فکر کردید، Semantic بودن به معنی معنا دار بودن و فهمیدن معنای یک چیز است، وقتی که ما درباره ی semantic بودن HTML صحبت میکنیم، منظور ما ارتباط بین برنامه های کامپیوتری است، نه انسان ها. برای مثال قطعه کد زیر را در نظر بگیرید :
کد HTML:
<p>The man threw the computer through the window.</p>
<img src="broken_window.png" alt="Broken Window" />
المنت ها و خصوصیات آنها به مرورگر اعلام میکنند که چه چیزی درون آنها است، تگ پاراگراف عموما شامل یک قطعه متن است و تگ img شامل یک عکس و source درون آن است، وقتی که مرورگر با هرکدام از این المنت ها برخورد میکند، مرورگر میداند که چگونه با هرکدام از آنها رفتار کند.چطور ساختار باعث معنادار شدن میشود ؟
نکته ی مهمی که باید به آن توجه کرد این است که HTML5 برای اولین بار معنایی بودن یا semantic بودن را معرفی نکرد، HTML نسخه ی قبلی هم به تنهایی تا حدودی semantic بود، برای مثال قطعه کد زیر تا حدی میتواند معنای خاصی داشته باشد، هنگامی که شما به قطعه کد زیر نگاه کنید انتظار دارید که با اجرای این کد به دلیل وجود کلماتی مانند img و source یک عکس ببینید :
کد HTML:
<img src="broken_window.png" alt="Broken Window" />
اگرچه img خیلی مختصر است، اما میتوان فهمید که محتوای این المنت یک عکس است، به همین طریق ساختار باعث معنادار شدن میشود.زمانی که محتوا را از استایل جدا کردیم را به خاطر می آورید ؟
بعضی از ساختارهایی که درون HTML استفاده میکردیم به مرورگر میگفت که چگونه المنت های درون صفحه را استایل دهی کند اما پس از گذشت زمان، تصمیم گرفتیم که استایل دهی و محتوای صفحه را از هم جدا کنیم. برای مثال، تگ I را با em جابجا کردیم، که معناگرایی بیشتر دارد و همچنین به صورت مستقیم به مرورگر نمیگوید متن درون المنت را چگونه نمایش دهد، دلیل اینکه استفاده از em را به I ترجیح دادیم این است که مرورگر بجای درک استایل المنت، ذات و ماهیت المنت را درک کند.
Semantic بودن HTML5 به همین صورت میباشد، هدف نهایی ساختن یک سیستمی است که بتواند به درک بالایی برسد، یعنی درواقع با ساختار کدهایمان بتوانیم به مرورگر درک عمیقی از آنچه که درون کد است بدهیم.آیا این شبیه به XML نیست ؟
اگر در گذشته از XML استفاده کرده باشید، با مفاهیم مارک آپ های معنایی یا sematic markup آشنایی دارید، برای مثال، زمانی که یک XML دیتاست (data-set) طراحی میکنید، المنت ها را متناسب با داده های خود در نظر میگیرید، درواقع المنت و خصوصیات آن، نوع داده ای که درون آن است را بیان میکنند، این مثال را ببینید :
کد HTML:
<news_story piece_id="12345">
<journalist>Jim Smith</journalist>
<posted>23 November 2012</posted>
</news_story>
در این مثال باتوجه به داده ای که درون المنت داریم، نوع المنت را خودمان تعیین کردیم، در HTML5 نمیتوانید خودتان المنت های دلخواه مانند مثال بالا طراحی کنید و به راحتی توسط شما گسترش پذیر نیست.به هر حال، نوع های مختلفی از معناگرایی داریم !
تا اینجا درباره ی معناگرایی حرف زدیم، اما در واقع راه های زیادی برای معنادار کردن یک کد یا یک المنت وجود دارد. برای مثال تگ img به معنای این است که محتوای ما قرار است یک عکس باشد یا در HTML5 المنت هایی مانند header و footer به این معنا هستند محتوایی که قرار است در این المنت ها باشد باید در بالا و پایین صفحه یا یک المنت باشد.
این مسائله چه ارتباطی به HTML5 دارد ؟
در حقیقت HTML5 با المنت های جدیدی که معرفی کرد باعث شد اطلاعات معنادار تری در صفحه ی HTML خود داشته باشیم، المنت های زیادی در HTML5 معرفی شده است اما در اینجا تنها به بعضی از آنها نگاه میکنیم، تگ header با توجه به ساختاری که دارد این مفهوم را میرساند که باید در بالای یک عنصر یا برای مثال بالای یک صفحه قرار بگیرد :
کد HTML:
<header>
<h1>Man in Window Outburst</h1>
</header>
المنت header میتواند چندین المنت را در بگیرد. تگ footer هم به همین شکل است، مرورگر با دیدن این تگ متوجه میشود که محتویات این تگ باید تقریبا در باقی مانده ی صفحه یا در پایین صفحه قرار بگیرد :
کد HTML:
<footer>
<p>The information on this website is nothing but lies.</p>
</footer>
تگ nav یک بخش از صفحه را مشخص میکند که عموما شامل لینک های منو میشود :
کد HTML:
<nav>
<ul>
<li><a href="news.php">News</a></li>
<li><a href="weather.php">Weather</a></li>
<li><a href="entertainment.php">Entertainment</a></li>
</ul>
</nav>
تگ section عموما یک گروه از آیتم هارا در بر میگیرد، این آیتم ها عموما باهم هستند و در بالای آنها یک تگ header وجود دارد، تگ section یک نوع معنی انتزاعی دارد :
کد HTML:
<section id="overview">
<h2>What happened</h2>
<p>Police officers apprehended the man at 3.30pm...</p>
<img src="images/arrest.jpg" alt="The Arrest"/>
</section>
تگ article هم مانند بالا، یک سری آیتم را تعریف میکند که دارای محتوا هستند :
کد HTML:
<article>
<h2>The Law</h2>
<p>The law on throwing items through windows is very clear...</p>
</article>
تگ aside که میتواند به عنوان یک نوار در یک مقاله قرار بگیرد :
کد HTML:
<article>
<h2>The Law</h2>
<p>The law on throwing items through windows is very clear...</p>
<aside>In 1998 four people were arrested for throwing a server machine...</aside>
</article>
در اینجا تعدادی از تگ هایی را معرفی کردیم که محتوای معنایی را دربر دارند، بقیه ی تگ ها شامل مدیا، داده هایی که کاربر وارد میکند، میکرو دیتا و ... میشود، همانطور که میبینید بعضی از این تگ ها هم در معنی و هم در ساختار semantic هستند.
به تگ هایی که قبلا استفاده میکردید فکر کنید، تگ هایی که هنوز هم ممکن است از آنها استفاده کنید، برای مثال تگ div. تگ div عموما یک تکه از صفحه میباشد، با دیدن تگ div هیچ حدسی نمیتوانیم بزنیم که محتوای صفحه چی میباشد یا ساختار تگ دارای چه معنی و مفهومی میباشد، به عبارت دیگر این تگ اصلا semantic نیست، به همین دلیل با آمدن HTML5 محتوای صفحه ی HTML ای که طراحی میکنید دارای معنا و مفهوم ساختاری میباشد.آیا شما همین الان هم به صفحه ی HTML خود معنا میدهید ؟
در حقیقت تعدادی زیادی از برنامه نویس ها در هنگام نوشتن کدهای HTML به تگ های خود معنا میدهند و عموما این کار را از طریق اسم Class ها و ID هایی که میدهند میشود فهمید، برای مثال یک تگ div میسازند و به آن Class یا ID با اسامی همچون header , footer و ... میدهند و از این طریق سعی میکنند به تگ های div خود معنا ببخشند، اما هنگامی که از HTML5 استفاده میکنید این کار توسط تگ هایی که مینویسید انجام میشود و دیگر نیازی نیست برای فهمیدن معنای هر تگ از نام Class یا ID آن تگ استفاده کنید، اگر تا الان از این روش استفاده میکردید نگران نباشید زیرا در گذشته این روش محبوبیت داشت اما امروزه از تگ های معنادار HTML5 استفاده کنید.چرا کدهایمان را معنادار بنویسیم ؟
فرض میکنیم که شما تمام این مفاهیم را درک کرده اید، ممکن است از خود سوال کنید که چرا باید از HTML5 استفاده کنم زمانی که نسخه های قدیمی تر مثل HTML4 هم به خوبی کار مرا راه می اندازد، خب، هدف ما در جهان همیشه این بوده است که به سمت معنا و مفهوم بیشتری پیش برویم و همینطور که در HTML5 میبینید تگ های HTML5 باعث میشوند بتوانیم با دیدن آنها محتوای احتمالی را حدس بزنیم، این ساختار معنایی باعث میشود برنامه های دیگر بتوانند راحت از محتوای ما استفاده کنند.
ساختارهای معنی دار باعث میشوند محتوای آنها به راحتی قابل جست و جو باشد، صفحات وب تنها توسط مرورگر دیده نمیشوند، بلکه ممکن است توسط ربات های موتورهای جست و جو دیده شوند، از آنجایی که ساختار تگ های HTML5 معنادار است محتوای سایت شما میتواند خیلی راحت تر در اختیار موتورهای جست و جو قرار گیرد. تیم برنرزلی (Tim Berners-Lee)، خلق کننده ی WWW، اولین اجرا کننده ی ارتباط بین کلاینت و سرور توسط HTTP و همچنین مدیر کنسرسیوم جهانی وب رویای همیشگی برای معنادار کردن صفحه های وب داشت، اینکه کامپیوترها بتوانند تمام داده ها را به صورت آنلاین پردازش و آنالیز کنند و از طریق semantic کردن میتوان به بخشی از این رویا واقعیت بخشید.نتیجه گیری
دنیای وب دارد به سمت معنادار شدن و semantic شدن پیش میرود، بنابراین سعی کنید وبسایت های خود را semantic بسازید تا بتوانید در این جهت جهانی حرکت کنید.
