semantic بودن HTML

semantic بودنHTML

Semantic در زبان شناسی به مفهوم “مطالعه در زمینه ی معنی” میباشد، در زبانی مانند انگلیسی، دو بخش داریم، گرامر یا Syntax و معنی، اگر به یک جمله ی انگلیسی فکر میکنید در واقع دارید به معنای آن فکر میکنید، به جمله ی زیر توجه کنید :
” یک مرد کامپیوتر را از پنجره به بیرون انداخت”
شما هنگام خواندن این جمله به معنای آن فکر کردید، Semantic بودن به معنی معنا دار بودن و فهمیدن معنای یک چیز است، وقتی که ما درباره ی semantic بودن HTML صحبت میکنیم، منظور ما ارتباط بین برنامه های کامپیوتری است، نه انسان ها.

 

semantic بودن HTML semantic بودن html semantic بودن HTML Semantic Web

semantic بودن HTML

 برای مثال قطعه کد زیر را در نظر بگیرید :

المنت ها و خصوصیات آنها به مرورگر اعلام میکنند که چه چیزی درون آنها است، تگ پاراگراف عموما شامل یک قطعه متن است و تگ img شامل یک عکس و source درون آن است، وقتی که مرورگر با هرکدام از این المنت ها برخورد میکند، مرورگر میداند که چگونه با هرکدام از آنها رفتار کند.

چطور ساختار باعث معنادار شدن میشود ؟

نکته ی مهمی که باید به آن توجه کرد این است که HTML5 برای اولین بار معنایی بودن یا semantic بودن را معرفی نکرد، HTML نسخه ی قبلی هم به تنهایی تا حدودی semantic بود، برای مثال قطعه کد زیر تا حدی میتواند معنای خاصی داشته باشد، هنگامی که شما به قطعه کد زیر نگاه کنید انتظار دارید که با اجرای این کد به دلیل وجود کلماتی مانند img و source یک عکس ببینید :

اگرچه img خیلی مختصر است، اما میتوان فهمید که محتوای این المنت یک عکس است، به همین طریق ساختار باعث معنادار شدن میشود.

زمانی که محتوا را از استایل جدا کردیم را به خاطر می آورید ؟

بعضی از ساختارهایی که درون HTML استفاده میکردیم به مرورگر میگفت که چگونه المنت های درون صفحه را استایل دهی کند اما پس از گذشت زمان، تصمیم گرفتیم که استایل دهی و محتوای صفحه را از هم جدا کنیم. برای مثال، تگ I را با em جابجا کردیم، که معناگرایی بیشتر دارد و همچنین به صورت مستقیم به مرورگر نمیگوید متن درون المنت را چگونه نمایش دهد، دلیل اینکه استفاده از em را به I ترجیح دادیم این است که مرورگر بجای درک استایل المنت، ذات و ماهیت المنت را درک کند.
Semantic بودن HTML5 به همین صورت میباشد، هدف نهایی ساختن یک سیستمی است که بتواند به درک بالایی برسد، یعنی درواقع با ساختار کدهایمان بتوانیم به مرورگر درک عمیقی از آنچه که درون کد است بدهیم.

آیا این شبیه به XML نیست ؟

اگر در گذشته از XML استفاده کرده باشید، با مفاهیم مارک آپ های معنایی یا sematic markup آشنایی دارید، برای مثال، زمانی که یک XML دیتاست  (data-set) طراحی میکنید، المنت ها را متناسب با داده های خود در نظر میگیرید، درواقع المنت و خصوصیات آن، نوع داده ای که درون آن است را بیان میکنند، این مثال را ببینید :

در این مثال باتوجه به داده ای که درون المنت داریم، نوع المنت را خودمان تعیین کردیم، در HTML5 نمیتوانید خودتان المنت های دلخواه مانند مثال بالا طراحی کنید و به راحتی توسط شما گسترش پذیر نیست.

تا اینجا درباره ی معناگرایی حرف زدیم، اما در واقع راه های زیادی برای معنادار کردن یک کد یا یک المنت وجود دارد. برای مثال تگ img به معنای این است که محتوای ما قرار است یک عکس باشد یا در HTML5 المنت هایی مانند header و footer به این معنا هستند محتوایی که قرار است در این المنت ها باشد باید در بالا و پایین صفحه یا یک المنت باشد.
این مسائله چه ارتباطی به HTML5 دارد ؟
در حقیقت HTML5 با المنت های جدیدی که معرفی کرد باعث شد اطلاعات معنادار تری در صفحه ی HTML خود داشته باشیم، المنت های زیادی در HTML5 معرفی شده است اما در اینجا تنها به بعضی از آنها نگاه میکنیم، تگ header با توجه به ساختاری که دارد این مفهوم را میرساند که باید در بالای یک عنصر یا برای مثال بالای یک صفحه قرار بگیرد :

المنت header میتواند چندین المنت را در بگیرد. تگ footer هم به همین شکل است، مرورگر با دیدن این تگ متوجه میشود که محتویات این تگ باید تقریبا در باقی مانده ی صفحه یا در پایین صفحه قرار بگیرد :

تگ nav یک بخش از صفحه را مشخص میکند که عموما شامل لینک های منو میشود :

تگ section عموما یک گروه از آیتم هارا در بر میگیرد، این آیتم ها عموما باهم هستند و در بالای آنها یک تگ header وجود دارد، تگ section یک نوع معنی انتزاعی دارد :

تگ article هم مانند بالا، یک سری آیتم را تعریف میکند که دارای محتوا هستند :

تگ aside که میتواند به عنوان یک نوار در یک مقاله قرار بگیرد :

در اینجا تعدادی از تگ هایی را معرفی کردیم که محتوای معنایی را دربر دارند، بقیه ی تگ ها شامل مدیا، داده هایی که کاربر وارد میکند، میکرو دیتا و … میشود، همانطور که میبینید بعضی از این تگ ها هم در معنی و هم در ساختار 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 بودن HTML ساخت یک وب قابل فهم نه تنها توسط انسان بلکه توسط ماشین، میباشد (نه ماشینی با هوش مصنوعی). با آن تبادل واشتراک اطلاعات خیلی موثرتر خواهد بود.HTML5 مشتی از عناصر درون خطی جدید را ( ازقبیل span، strong، abbr) به خانواده ی HTML معرفی می کند، که در واقع دیگر عنصر درون خطی نامیده نمی شود بلکه معناشناختی در سطح متن نامیده می شود.

معنا شناسی جدید در سطح متن

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

 ‎<div class=”header”>….<div class=”footer”>‎  یا  ‎<div class=”article”>‎.

عناصر انسداد جدید

  • <section>
  • <header>
  • <footer>
  • <nav>
  • <article>
  • <aside>

آموزش Semantic mark

علامت عنصر <mark> اجرای متنی را در یک داکیومنت نشان می دهد که به هدف مرجع و با توجه به ارتباط آن در یک کانتکست دیگر مشخص شده است.

اساسا برای معطوف کردن توجه خواننده به بخشی از متن استفاده می شود که خواننده ممکن است آن بخش را نادیده بگیرد.

در جمله ی بالا من بخشی از متن را های لایت کرده ام زیرا فکر می کنم نکته ی بسیار مهمی است که نباید نادیده گرفته شود.

برای علامت دار کردن بخشی از متن آن را بین <mark></mark> قرار دهید.

در نگارش هر مرورگری <mark></mark>  را برای های لایت متن اجرا نمی کند، برای اطمینان خاطر بیشتر بهتر است عنصر mark را در CSS نیز طراحی کنید.

semantic بودن HTML

Semantic <time>‎

عنصر زمان یا یک ساعت را در ۲۴ ساعت نشان می دهد و یا یک تاریخ مشخص را در تقویم مسیحی (Gregorian calendar) با یک زمان و افست منطقه ی زمانی نشان می دهد.

برای نمونه شما می توانید این کار را انجام دهید تا یک تاریخ مشخص را نشان دهید.

We were celebrating our daugther’s ‎<time datetime=”2004-07-13″>birthday</time> ‎in that seafood restaurant.

ما تولد ‎<time datetime=”2004-07-13″>‎‏ ‏دخترمان را در آن رستوران دریایی جشن می گیریم.

از آنجایی که در مثال زیر زمان در فرمت ۲۴ ساعتی به یوزر نمایش داده شده است، ما ویژگی datetime را برای بیشتر مشخص کردن مقدار زمان نیاز نداریم.

I usually go swimming at ‎<time>20:00</time> ‎every Saturday.

من معمولا در ‎<time>20:00</time>‎‏ ‏هر شنبه به شنا می روم.

جمله ی بالا با استفاده از تکنولوژی طراحی شده که طراحی دوباره ی زمان ها را پشتیبانی می کند، می تواند به این شکل بیان شود.

من معمولا در ساعت ۸ بعد از ظهر هر شنبه به شنا می روم.

یا

من معمولا در ساعت ۲۰:۰۰ هر شنبه به شنا می روم.

از یک طرف اگر مقدار زمان در فرمت ۲۴ ساعته مشخص نشده باشد باید ساعت آن را در ۲۴ ساعت مشخص کنید.

ما از روز شنبه تا دوشنبه از ساعت ‎<time datetime=”08:00″>8am</time>‎‏ تا ساعت ‏‎<time datetime=”18:00″>6pm</time>‎ آزاد هستیم.

برای یک زمان و تاریخ مشخص چگونگی کار در اینجا نشان داده شده است.

شما ممکن است کتاب های خود را در ‎<time datetime=”2011-01-16T06:00Z”>‎‏ ۱۶ ژانویه ی ۲۰۱۱ در ‏‎۶pm</time>‎جمع کنید.

یه طور مشابه شاید لازم باشد یک تاریخ و زمان درست را با منطقه ی زمانی نیز مشخص کنید.

سمینار در ‎<time datetime=”2011-02-22T09:00-4:00″>‎‏ ۲۲ فوریه ی ۲۰۱۱ در ‏‎۹amEDT</time>‎ شروع خواهد شد.

مشخصه ی HTML5 به ما می گوید که اگر تاریخ و زمان دقیق معلوم نیستند از عنصر زمان استفاده نکنیم. به عنوان مثال، من میدونم شما در تابستان گذشته چه کاری انجام دادید. یا او را در حدود ۱۹۸۰ می شناختم.

ممکن است از خود بپرسید با استفاده از عنصر زمان در انتهای روز چه حاصل می شود. بسیار خوب با همه ی این تلاش ها سعی می کنیم محتوای ماشین خود را قابل خواندن کنیم. تصور کنید روزی بتوانیم “February 22, 2011 9am EDT” تنها با یک کلیک را در تقویم خود ذخیره کنیم.

علاوه بر ویژگی datetime عنصر زمان دارای ویژگی های “pubdate”  و  “valueAsDate”می باشد.

 

Attributes

Descriptions

dateTime

مقدار زمان یا تاریخ و یا زمان تاریخ. اگر وجود داشته باشد، تاریخ یا زمان را مشخص می کند. در غیر اینصورت تاریخ یا زمان توسط عناصر محتوا ارائه می شوند.

pubDate

تاریخ انتشار. یک ویژگی Boolean می باشد که به این معناست که لازم نیست مقداری برای آن قرار دهید. اگر مشخص باشد که یعنی تاریخ انتشار یک مقاله (<article>)، اگر عنصر زمان در داخل بلوک مقاله نباشد به این معناست که این تاریخ، تاریخ انتشار کل پرونده می باشد.

نکته: شما باید فقط یک pubdate در یک مقاله و یا یک داکیومنت داشته باشید.

valueAsDate

یک ویژگی readonly می باشد، و آبجکت تاریخ را که مشخص کننده ی تاریخ و زمان خاصا است، گزارش می دهد.

Pubdate می تواند برای ورودی وبلاگ و یا اخبار مقاله به کار رود. برای مقاله ای که در ۲۱ ژانویه ی ۲۰۱۱ منتشر شده، کد آن مانند زیر می باشد.

 

آموزش HTML آموزش طراحی وب

دیدگاه خود را بیان کنید