آشنایی با مفهوم Semantic در HTML

Semantic و HTML

عبارت Semantic در لغت یعنی "معنایی" و Semantics یعنی "علم معنی شناسی" اما منظور از HTML Semantic یعنی کدهای صفحات وب و ساختار آن باید طوری نوشته شوند که تا حد امکان برای دستگاه ها (Machines) مختلف قابل فهم و استفاده باشند، به طور مثال سورس یک مقاله وب باید طوری کدنویسی شود که در پردازش توسط یک دستگاه، قسمت های مختلف آن (از جمله عنوان، محتوا، نویسنده و...) از یکدیگر متمایز و خود مقاله نیز از سایر قسمت های یک سایت اینترنتی قابل تفکیک باشد، از آنجایی که در نسخه های ابتدایی HTML، هدف، بیشتر ارائه محتوایی قابل استفاده جهت کاربران حقیقی (انسان) بود، لذا تمرکز اصلی عمدتا بر روی ظاهر صفحات وب معطوف می شد و اینکه این ظاهر با چه سبک کدنویسی بدست بیاید اهمیت چندانی نداشت، به طور مثال کاربر حقیقی می توانست از توضیحات متنی، رنگ و اندازه فونت ها یا طرح بندی صفحه، قسمت های مختلف محتوا مانند مطلب اصلی، عنوان، نویسنده و... را تفکیک کند، اما این خصوصیات برای یک دستگاه (به طور مثال یک ربات کاوشگر وب) حداقل به راحتی قابل درک و پردازش نبود، با این حال ذات پیدایش HTML با مبحث Semantic هیچگاه بیگانه نبوده، به طور مثال تگ h1 را در نظر بگیرید، این تگ اگرچه محتوای داخل خود را معمولا به شکل برجسته تری برای مخاطب نمایش می دهد (و این مفهوم را القا می کند که این عبارت به عنوان تیتر و دارای اهمیت است)، برای دستگاه ها (غیر انسان) نیز به وجود محتوایی با ارزش به عنوان تیتر یک صفحه وب اشاره دارد، چرا که به فرض یک ربات وب می تواند با کلید واژه h1 محتوای درون این تگ را استخراج کرده و به عنوان سرتیتر استفاده نماید، همچنین است در خصوص تگ هایی مانند strong، با این حال قاعدتا آنطور که صفحات وب برای انسان ها قابل فهم بوده برای دستگاههای ساخت بشر قابل تشخیص نبودند، اگرچه به دلیل کاربردهای اولیه و ساده وب، این مشکل در ابتدا چندان هم مشکل نبود اما رفته رفته با پیشرفت وب و معرفی ایده هایی مانند Web 2.0  و لزوم تعامل بین سیستم های مختلف مبتنی بر وب که به صورت خودکار عمل می کردند، توسعه دهندگان وب را یک گام به جلو سوق داد تا با معرفی CSS بخش ظاهری (طراحی) را از کدنویسی HTML جدا کنند، لذا در این برهه که اکنون نیز کم و بیش به همان منوال ادامه دارد، تصمیم بر این شد که ویژگی های مربوط به ظاهر تگ ها تا حد امکان توسط کلاس های CSS تعریف شود، برنامه نویسان وب نیز عموما بر حسب عادت یا سلیقه برای کلاس های مختلف CSS عناوین مورد نظر خود را انتخاب می کردند، از جمله برای بخش سرصفحه به فرض از کلاسی با نام header یا برای قسمت نویسنده مطالب از کلاس فرضی author، برای بخش کپی رایت و انتهای صفحات از کلاس های copyright، footer و... استفاده می کردند، برای مثال به تگ زیر توجه کنید:

<div class="footer">فوتر سایت</div>

اما با توجه به اینکه این عبارات تماما دلخواه کاربران و سلیقه ای بود نمی توانست استانداردی فراگیر برای بحث Semantic باشد و نقص را به طور کامل برطرف نماید (تگ هایی مانند div و span به این دلیل غیر معنایی یا non-Semantic هستند)، لذا در نسخه 5 HTML تگ های بیشتری برای راحتی کار دستگاهای خودکار ارائه شد تا به راحتی بتوانند بخش های مختلف یک صفحه وب را از هم تفکیک کرده و هر قسمت که مورد نیاز آنها باشد را استخراج نمایند، ظاهرا نامگذاری این تگ ها با همکاری شرکت گوگل بوده که در حدود یک میلیارد صفحه وب را مورد کنکاش قرار داده تا سلیقه کاربران در نامگذاری تگ های قسمت های مخلتف را با کلاس های CSS بدست آورد.
علاوه بر توضیحات گفته شده، HTML Semantice رعایت استاندارد کدنویسی را نیز در دل خود جای داده، به عبارتی صفحه وبی به لحاظ استاندارد مورد قبول است که هر تگ در جایگاه خاص خودش استفاده شده باشد، به طور مثال از نظر کدنویسی استاندارد، نمی توانید تگ p را درون تگ h1 جای دهید زیرا تگ h1 نمی تواند یک پاراگراف را درخود جای دهد و صرفا اشاره به تیتر دارد، لذا به طور معمول صفحه وبی که اصول Semantic را رعایت کرده باشد، در سنجش استاندارد کدنویسی نیز امتیاز بهتری کسب خواهد کرد.

لزوم استفاده از Semantic در HTML

همان طور که اشاره شد، HTML هیچگاه از مفهوم Semantic دور نبوده و از ابتدا تگ های آن برای پردازش توسط ماشین نیز در نظر گرفته شده، به طور مثال تگ form همیشه یک فرم را در خود دارد یا تگ img همیشه نشانگر یک تصویر است، این تگ ها می توانند برای یک ماشین خودکار کلیدواژه ای باشند که با آن بتواند به راحتی محتوا را استخراج و دسته بندی کند که در واقع هدف نهایی بحث Semantic در وب است یعنی ارائه محتوایی قابل فهم برای ماشین ها، اگرچه HTML در نسخه های ابتدایی خود (تا نسخه 4) تگ های معنایی بدین منظور ارائه نمود، اما رفته رفته مشخص شد که این تگ ها نمی توانند به نیازهای امروزی آنطور که باید و به اندازه کافی پاسخ دهند، رشد شبکه های اجتماعی مبتنی بر تکنولوژی Web 2.0 که عمدتا کاربران در آنها به اشتراک گذاری آدرس های اینترنتی می پرداختند، نیاز موتورهای جستجو به پردازش دقیقتر اطلاعات صفحات وب و ارائه نتیجه مطلوب تر به کاربران، لزوم نوشتن کدهایی با ساختار بهتر جهت تسهیل تعامل توسعه دهنده گان وب به طور مثال در پروژه های گروهی و...  همه لزوم معرفی تگ های بیشتر جهت ساختاربندی مفهومی تر محتوای وب را یادآور می شد، به طور مثال تگ table را در نظر بیگرید، این تگ با هدف نمایش محتوای قابل ارائه در جدول مانند آمار و اطلاعات طبقه بندی شده در HTML معرفی شد، اما به مرور برخی از طراحان وب از جدول برای فرمت بندی صفحات وب استفاده کردند که اشتباه و با هدف Semantic آن در تضاد بود، این دو یا چندکارکردی شدن تگ ها کار پردازش و تصمیم گیری را برای سیستم های خودکار دچار مشکل می کرد، به فرض اگر برنامه نویسی تصمیم می گرفت که رباتی جهت کاوش وب طراحی کرده و صرفا اطلاعات آماری را تهیه کند، ممکن بود با پردازش تگ table به عنوان مبنا، اطلاعات نادرستی دریافت کند که در نهایت برنامه او را با خطاهای مختلفی مواجه می کرد، در مجموع اگرچه استفاده از تگ های Semantic اجباری نیست، اما با توجه به اینکه آینده وب به سمت معنایی شدن پیش می رود، بهتر است برای به روز بودن، رعایت استاندارد کدنویسی و قابل استفاده شدن محتوای سایت در برنامه های مختلف، تا حد امکان از اصول آن پیروی کنیم.

Semantic در HTML نسخه 5

HTML در نسخه 5 خود تگ های جدیدی برای مبحث Semantic معرفی کرده که استفاده از آنها در صفحات وب امروزی بخصوص در زمینه بهینه سازی برای موتورهای جستجو (SEO)  اهمیت زیادی دارد، در ادامه به اختصار این تگ های HTML 5 Semantic را توضیح می دهیم.

تگ section

برای ایجاد بخش های مجزا در سند HTML کاربرد دارد، به طور مثال برای ارائه مطالب گروه بندی شده که معمولا یک عنوان خاص و مرتبط با یک ریشه واحد (thematic) دارند، خود تگ section می تواند به صورت تو در تو (nested) مورد استفاده قرار گیرد، به عبارتی یک بخش می تواند زیرمجموعه های دیگری نیز با section های بیشتر داشته باشد، هر section می تواند یک یا چند تگ هدر (h1 تا h6) داشته باشد، اگر درون section به طور مثال در ابتدا تگ h2 باشد، تگ های h بعدی باید از h3 یا h های کوچکتر باشند (هرچه عدد h بزرگتر باشد، در واقع اولویت آن کمتر و کوچکتر است!) و نمی تواند h2 یا h1 بعد از خود داشته باشد، در بیان ساده تر هر section می تواند تگ های h خود را داشته باشد اما به صورت منحصر بفرد (از هرکدام فقط یک تگ) و سلسه مراتب (hierarchy) تگ ها نیز باید رعایت شود، دقت کنید که بالاترین h هر section در واقع عنوان آن را مشخص می کند، تگ section الزاما باید در تگ body صفحه استفاده شود، تگ section می تواند تگ های معنایی دیگری مانند header و footer را به صورت مستقل در خود جای دهد، مثال:

<section>
<h1>تیتر</h1>
<p>متن مورد نظر</p>
</section>

<section>
<h1>برنامه نویسی وب</h1>
<p>آموزش برنامه نویسی وب</p>
<section>
<h1>HTML</h1>
<p>آموزش HTML</p>
<img src="html.jpg" alt="html">
</section>
</section>

نکته: تفاوت section و div در این است که div حالت عمومیت دارد و هرجا که نتوانیم از section (یا سایر تگ های معنایی) استفاده کنیم، div می تواند جایگزین آن شده و با استفاده از پارامترهایی مانند class و تعریف استایل CSS، فرمت بندی صفحات وب را با آن انجام دهیم، به عبارتی section برای تعیین محتوای گروه بندی شده قسمتی از صفحه وب (به طور مثال قسمت مربوط به یک مقاله) است و معمولا نمی توان با هدف پیاده سازی ساختار کل صفحه از آن استفاده کرد، اما div برای طراحی قسمت هایی که حالت Semantic خاصی ارائه نمی کنند، انتخاب مناسبی است و معمولا طراحان وب بخش های کلی و بالادستی صفحه را با div فرمت بندی کرده و قسمت های محتوایی و درونی را با تگ های معنایی مانند section برای دستگاه ها قابل پردازش و فهم می کنند، لذا این دو تگ می توانند در کنار هم و به صورت ترکیبی استفاده شوند.

تگ article

برای ایجاد یک مطلب مجزا در سند HTML کاربرد دارد، این مطلب کاملا از سایر بخش های صفحه مستقل و جامع بوده و خود می تواند شامل تگ های section و article زیرمجموعه باشد، به طور مثال فرض کنید در بخش مقالات، بخش علمی، مقاله ای در خصوص برنامه نویسی داشته باشید که خود بخش های مجزایی مانند برنامه نویسی وب، برنامه نویسی موبایل و... داشته باشد، همچنین هر مطلب می تواند شامل بخش نویسنده، اطلاعات نگارش، یادداشت های کاربران و... باشد، لذا همان طور که ملاحظه می کنید استفاده به جا و درست از تگ های div، section و article نیاز به دقت بالایی دارد و ممکن است این موارد را با هم اشتباه بگیریم، اما اگر خوب توجه کنیم همه چیز بستگی به ساختار و نوع محتوایی دارد که ارائه می کنیم، تگ div در جایی استفاده می شود که هیچ محتوای قسمت بندی شده دارای مفهوم خاصی وجود نداشته باشد، به طور مثال اینکه صفحه شما چند سایدبار یا چند قسمت کلی برای نمایش محتوا داشته باشد می تواند با div مشخص گردد، تگ section یک گام از div فراتر می رود و آن حالت عمومیت را ندارد، به طور مثال در قسمتی که محتوا ارائه می شود، بخش محتوای مربوط به اخبار سایت با بخش محتوای مربوط به اخبار محصولات جدید می تواند در دو section مجزا نمایش داده شوند، تگ article نوع خاصتری از section است و به طور مثال بخش اخبار کالاهای جدید می تواند معرفی یک محصول را در خود جای دهد، ضمن اینکه خود article می تواند به صورت تو در تو تگ های section دیگر داشته باشد و همین طور تگ section می تواند تگ های article زیرمجموعه داشته باشد، مهم این است کارکرد هر قسمت را متناسب با محتوای آن مشخص کنیم، توجه کنید که همه این موارد قراردادی هستند و توسط خود شما به عنوان خالق یا برنامه نویس صفحه مشخص می شوند، اما قطعا اگر تگ ها را به جا استفاده کنید تاثیر مثبتی بر میزان کاربر پسند (user–friendly) بودن سایت و کسب رتبه بهتر در موتورهای جستجو دارد، مثال:

<article>
<h1>نام کالا</h1>
<p>این <strong>محصول</strong> دارای کیفیت و قیمت مناسب است...</p>
</article>

<section>
<h1>مقالات بخش آموزش</h1>
<article>
<h2>مبحث توابع در برنامه نویسی</h2>
<p>توابع در برنامه نویسی مانند ماشین هایی هستند که مواد خام را به عنوان ورودی گرفته و یک یا چند محصول به عنوان خروجی تولید می کنند...</p>
</article>   
</section>

تگ header

برای تعیین سرتیترها در سند HTML کاربرد دارد، header تگ عمومی است و می توان از آن در هر قسمت از صفحه که باید یک سرتیتر یا مجموعه ای از عناصر مرتبط با سرصفحه (مانند تگ های h، لوگوی صفحه، فرم جستجو و...) قرار گیرند، استفاده کرد،  در واقع این تگ راهنمای خوبی است که می توان با آن مشخص کرد هر قسمت به چه نحوی ساختاربندی شده، به فرض سرصفحه از سایر بخش های یک سایت مشخص می شود یا عنوان و توضیحات یک مقاله از محتوای آن متمایز می گردد، مثال:

<header>
<h1>تیتر اصلی صفحه</h1>
<img src="site-logo.png" alt="logo">
</header>

<section>
<header>
<h1>مقالات بخش آموزش</h1>
<img src="learn-logo.jpg" alt="learn-logo">
</header>   
</section>

تگ footer

برای تعیین پا صفحه یا زیر نویس در سند HTML کاربرد دارد، footer نیز مانند header تگ عمومی است و می توان از آن در هر قسمت از صفحه که باید یک پاصفحه یا مجموعه ای از عناصر مرتبط با پاصفحه (مانند اطلاعات مربوط به نرم افزار سایت، حقوق مولف، قوانین سایت و...) قرار گیرند، استفاده کرد، همان طور که پیش از این دیدیم، تگ های Semantic می توانند به دفعات و به صورت تو در تو استفاده شوند که البته باید با یک هدف و منطق مشخص باشد، مثال:

<footer>
<div class="copyright">&copy; 2017 https://webgoo.ir</div>
</footer>

<section>
<header>
<h1>مقالات بخش آموزش</h1>
<img src="learn-logo.jpg" alt="learn-logo">
</header>  
<footer>
<div class="author">منبع: webgoo.ir</div>
</footer> 
</section>

تگ main

مشخص کننده اصلی ترین محتوا در سند HTML است، معمولا هر صفحه وب جدای از بخش هایی مانند سرصفحه، منو ها، بخش های کناری، پاصفحه و... یک قسمت اصلی دارد که هدف اصلی کاربر نیز می باشد، به طور مثال کاربری که عنوان مزتبط با یک مقاله را در وب جستجو می کند، پس از رسیدن به سایتتان ممکن است زمان لازم برای بررسی کل جزئیات سایت را نداشته باشد، در اینجاست که می توان به فرض با ایجاد لینک هدایت به مطلب اصلی، ضمن رعایت اصول Semantic، رابط کاربری بهتری طراحی کرد، باید دقت کنیم بر خلاف سایر تگ های مشابه، درهر صفحه وب تنها استفاده از یک تگ main مجاز است، همچنین تگ main نمی تواند زیرمجموعه (فرزند) تگ هایی مانند article ،aside ،footer ،header ،nav باشد، مثال:

<header>
<h1>تیتر اصلی صفحه</h1>
<img src="site-logo.png" alt="logo">
</header>
<nav>
<ul>
<li><a href="/home">صفحه نخست</a></li>
<li><a href="/about">درباره ما</a></li>
<li><a href="/contact">اطلاعات تماس</a></li>
<li><a href="/learn">آموزش آنلاین</a></li>
</ul>
</nav> 
<main>
<section>
<h1>مقالات بخش آموزش</h1>
<article>
<h2>مبحث توابع در برنامه نویسی</h2>
<p>توابع در برنامه نویسی مانند ماشین هایی هستند که مواد خام را به عنوان ورودی گرفته و یک یا چند محصول به عنوان خروجی تولید می کنند...</p>
</article>   
</section>
</main>
<footer>
<div class="copyright">&copy; 2017 https://webgoo.ir</div>
</footer>

تگ nav

برای ایجاد مجموعه لینک های راهنمای سایت (navigation bar) در سند HTML کاربرد دارد، لینک هایی که در این قسمت قرار می گیرند معمولا شامل بخش های اصلی یک سایت هستند که در تمام یا اکثر صفحات باید در دسترس کاربر باشند، مانند لینک صفحه نخست، درباره ما، تماس با ما، بخش های اصلی و...، این مجموعه لینک ها می توانند به فراخور نیاز و سلیقه در هر قسمت از صفحه وب و به دفعات قرار گیرند، مثال:

<nav>
<ul>
<li><a href="/home">صفحه نخست</a></li>
<li><a href="/about">درباره ما</a></li>
<li><a href="/contact">اطلاعات تماس</a></li>
<li><a href="/learn">آموزش آنلاین</a></li>
</ul>
</nav>

تگ aside

برای ایجاد یک قسمت مجزای مستقل ولی مرتبط با محتوای اصلی در سند HTML کاربرد دارد، واژه aside در لغت به معنی "جداگانه، بکنار و..." است، در واقع تگ aside شامل مواردی مرتبط با محتوای اصلی خود اما به صورت جداگانه است، به فرض یک مقاله می تواند نکات برجسته خود را در تگ aside به صورت یادآوری داشته باشد، یا در یک مطلب آموزشی در خصوص کامپیوتر، می توان روش های فرعی جایگزین روش اصلی را در تگ aside به صورت نکات اضافی درج کرد، مثال:

<article>
<p>برای نصب ویندوز باید وارد تنظیمات بایوس شوید و در قسمت بوت، گزینه اول را بر روی دی وی دی رام تنظیم نمائید.</p>
<aside>نصب ویندوز از طریق حافظه های جانبی مانند فلش مموری نیز امکانپذیر است.</aside>
</article>

تگ figure

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

<figure>
<img src="http://yoursite.com/image/html.png" alt="HTML Semantic">
</figure>
<p>نمونه متن</p>
<figure>
<img src="http://yoursite.com/image/html.jpg" alt="HTML Semantic">
<figcaption>HTML Semantic</figcaption>
</figure>

تگ time

برای مشخص کردن زمان یا تاریخ و زمان در سند HTML کاربرد دارد، با استفاده از این تگ می توان تاریخ و زمان قابل پردازش توسط ماشین را در کدهای HTML قرار داد، این تگ به صورت معمول شامل زمان و با خاصیت datetime برای نمایش تاریخ و زمان استاندارد استفاده می شود، مثال:

<p>ساعات کاری این فروشگاه از<time>08:00</time>صبح الی<time>22:00</time>شب می باشد.</p>

<p>این فروشگاه در تاریخ<time datetime="2017-03-11T19:00">بیست و یکم اسفند ساعت 19</time>افتتاح خواهد شد.</p>

همان طور که ملاحظه می کنید، وقتی از ویژگی datetime استفاده می کنیم، متن درون تگ های time می تواند دلخواه باشد (نه الزاما یک زمان یا تاریخ استاندارد)، همچنین فرمت تاریخ برای ویژگی datetime باید یکی از نمونه حالت های زیر باشد:

1000-10-10T10:00

1000-10-10 10:00

تگ details و summary

تگ details برای ایجاد توضیحات اضافه در سند HTML کاربرد دارد، با این تگ می توان برای مثال در یک مقاله توضیحات اضافی قرار داد که در حالت عادی مخفی و با کلیک کاربر نمایش داده می شوند، تگ details با تگ دیگری به نام summary (به معنی خلاصه یا مختصر) تکمیل می شود که خلاصه ای قابل رویت برای کاربر نمایش می دهد، کاربر با کلیک بر روی آن می تواند توضیحات اضافی را مشاهده کند، مثال:

<details>
<summary>جزئیات بیشتر</summary>
این اطلاعات در صورتی نمایش داده می شود که بر روی عبارت "جزئیات بیشتر" کلیک کنیم
</details>

برای برجسته (highlight) کردن قسمتی از متن با پس زمینه ای به رنگ متمایز در سند HTML کاربرد دارد، از جمله کاربردهای این تگ می توان به برجسته کردن متن جستجو شده در بین نتایج اشاره کرد، مثال:

<p>این فروشگاه در تاریخ<mark>بیست و یکم اسفند ساعت 19</mark>افتتاح خواهد شد.</p>

تگ های HTML به موارد گفته شده محدود نمی شوند، می توانید لیست کاملی از این تگ ها (Semantic و non-Semantic) را در آدرس زیر مشاهده کنید:

https://developer.mozilla.org/en/docs/Web/HTML/Element