HTML معنایی چیست و چه اهمیتی دارد؟

HTML یک زبان نشانه گذاری فرامتن است و با داشتن بیش از صند عنصر html، ستون فقرات صفحات وب در اینترنت است. برخی از عنصرهایHTML به مرورگرها فقط نحوه نمایش عناصر را اعلام می‌کنند و برخی عناصر HTML علاوه بر نحوه نمایش، نقش عنصر را اعلام می‌کنند که به آن‌های اچ تی ام ال معنایی یا Semantic html می‌گویند. عناصر معنایی html صفحات وب را بامعناتر و سازگارتر می‌سازند و به مرورگرها و موتورهای جستجو این امکان را می‌دهند تا درک بهتری از عناصر استفاده شده در یک صفحه وب داشته باشند.

با ظهور HTML5 تغییرات خوبی در این زبان نشانه گذاری اتفاق افتاده است که به برنامه نویسان وب و طراحان سایت این امکان را می‌دهد که کدهای با معناتری را بنویسند. علیرغم اینکه سالها از انتشار HTML5 گذشته است هنوز بسیاری از برنامه نویسان از اهمیت HTML معنایی آگاه نیستند و همچنان از رویکرد قدیمی و بدون معنا برای کدنویسی در صفحات وب استفاده می‌کنند.

در این مقاله مفهوم HTML معنایی و عناصر معنایی را توضیح خواهیم داد و به معرفی تگ‌های معنایی HTML خواهیم پرداخت. در مورد اهمیت استفاده از تگ‌های معنایی HTML در سئوی سایت نیز صحبت خواهیم کرد. تا انتهای این مقاله همراه ما باشید.

HTML معنایی چیست؟

Semantic html یا نشانه گذاری معنایی عبارتست از استفاده از تگ‌های HTML که معناشناسی (Semantic) محتوای موجود در عنصر را منتقل می‌کنند. با اضافه کردن تگ‌های معنایی یا سمانتیک HTML به صفحات سایت، شما اطلاعات بیشتری درباره نقش و اهمیت بخش‌های مختلف یک صفحه در سایت را به موتورهای جستجو و مرورگرها ارائه می‌دهید.

تگ‌های عمومی نظیر <div> و <span> تگ‌هایی هستند که اطلاعاتی درباره نوع محتوایی که در بردارند ارائه نمی‌دهند. در تصویر زیر یک مثال از تفاوت عناصر معنایی و عناصر بدون معنا ذکر شده است:

تگ‌های معنایی HTML کدامند؟

تگ‌های HTML معنایی، تگ‌هایی هستند که معنای محتوای درونشان را تعریف می‌کنند. برای مثال تگ هایی نظیر <article> و <footer> و <header> تگ‌های معنایی هستند. این تگ‌ها خیلی واضح معنای محتوای درونشان را توصیف می‌کنند.

در نقطه مقابل تگ‌های غیر معنایی HTML قرار دارند. تگ‌هایی نظیر <div> و <span> مثال‌های واضحی از تگ‌های غیرمعنایی هستند. این تگ‌ها به عنوان نگه‌دارنده محتوا عمل می‌کنند و هیچ توضیحی درباره نوع محتوا و نقش محتوای داخلشان ارائه نمی‌دهند.

چرا تگ‌های HTML معنایی مهم هستند؟

تگ‌های HTML معنایی بررسی و خواندن کدهای HTML را برای برنامه نویس‌ها آسانتر می‌کنند. علاوه بر این دلایل دیگری برای اهمیت تگ‌های HTML معنایی وجود دارد:

۱- دسترسی پذیری (Accessibility)

برای کاربران معمولی تشخیص بخش‌های مختلف صفحات وب نظیر هدر، فوتر و محتوای اصلی به سادگی قابل تشخیص است. با این وجود، برای کاربران نابینا و افرادی داری معلولیت‌های چشمی تشخیص بخش‌های مختلف صفحه آسان نیست. این افراد برای دسترسی به محتوای درون صفحات سایت نیاز به ابزارهای صفحه خوان (Screen Reader) دارند.

استفاده صحیح از تگ‌های معنایی HTML به این افراد کمک می‌کند که محتوای شما را بهتر درک کنند.

مثلا به جای استفاده از کد زیر برای طراحی یک دکمه

<div>آینجا کلیک کنید</div>

از کد زیر استفاده کنید:

<button>اینجا کلیک کنید</button>

نه تنها استفاده از تگ <button> بصورت خودکار باعث اعمال استایل‌های پیش فرض مناسبی خواهد شد، این تگ دارای دسترسی پذیری توسط صفحه کلید است. دسترسی پذیری توسط صفحه کلید یعنی اینکه کاربران می‌توانند با استفاده از کلید TAB بین دکمه‌های مختلف حرکت کنند و انتخابشان را با استفاده از کلیدهای Space، Return یا Enter فعال کنند.

۲- بهبود سئوی سایت

تگ‌های معنایی HTML برای سئو یا بهینه سازی موتورهای جستجو مهم هستند. دلیل اهمیت تگ‌های معنایی HTML در سئو مشخص کردن نقش محتوای درون هر تگ برای موتورهای جستجو است. اطلاعات معنایی ارائه شده توسط این تگ‌ها به خزندگان موتورهای جستجو نظیر ربات گوگل این امکان را می‌دهد که درک بهتری از محتوای صفحات سایت داشته باشند. استفاده از تگ‌های معنایی باعث می‌شود شانس محتوای درون سایت شما برای نمایش در نتایج جستجوهای گوگل افزایش پیدا کند.

مطالعه بیشتر: سئو چیست و چه اهمیتی دارد؟

۳- عملکرد بهتر در موبایل

HTML معنایی مسلماً از نظر اندازه فایل سبک‌تر از کد غیر معنایی است و راحت‌تر ریسپانسیو می‌شود.

انواع تگ‌های HTML معنایی

تگ‌های معنایی html برای توصیف بخش‌های مختلف یک صفحه اینترنتی به کار می‌روند و به دو دسته تقسیم می‌شوند:

• تگ‌های معنایی html برای ساختار صفحه
• تگ‌های معنایی html برای متن

تگ‌های html معنایی برای ساختار صفحه

بسیاری از تگ‌های html چیدمان و ساختار صفحه را مشخص می‌کنند. این تگ‌ها ابتدا در html4 معرفی شدند و در html5 بروزرسانی شدند.

لیست کامل تگ‌های HTML معنایی برای ساختار صفحه به شرح زیر است:

• <header>: تگ هدر برای تعریف اطلاعات مقدماتی یک صفحه یا یک بخش استفاده ‌می‌شود. تگ هدر میتواند شامل چند هدینگ، لوگو، آیکون و اطلاعات نویسنده باشد. امکان داشتن چندین تگ header در صفحه وجود دارد. با اینحال نمیتوان تگ‌های هدر را درون هم قرار داد و یا از تگ هدر در تگ فوتر استفاده کرد.
• <nav>: از تگ nav برای لینک‌های ناوبری استفاده می‌شود. این تگ می‌تواند درون تگ header استفاده شود. تگ ناوبری ثانویه امکان استفاده در سایر بخش‌های صفحه را دارد.
• <main>: تگ main دربرگیرنده محتوای اصلی صفحه است. از این تگ تنها یک عدد در هر صفحه باید وجود داشته باشد.
• <article>: تگ <article> برای محتوایی از سایت استفاده می‌شود که بصورت مستقل از سایت و صفحه وجود دارد. این تگ لزوما به معنایی پست وبلاگی نیست. از این تگ برای نشانه‌گذاری بخش‌های خودکفا از صفحه استفاده می‌شود که امکان انتشار و استفاده بصورت مستقل را دارند. مثلا هریک از مقالات مرتبط قرار گرفته در قسمت پایین همین صفحه، در یک تگ <article> قرار دارند. محصولات مرتبط با یک محصول در یک صفحه فروشگاهی را هم می‌توان در این تگ قرار داد. مثالهای دیگر استفاده از این تگ را می‌توان کامنت‌های کاربران، مقالات خبری، پست‌های موجود در تالارهای گفتگو را ذکر کرد.
• <section>: استفاده از تگ <section> برای گروه بندی مطالب استفاده می‌شود.
• <aside>: تگ <aside> محتوای دارای اهمیت کمتر را توصیف میکند و غالبا در سایدبار یا نوار کناری صفحات استفاده می‌شود.
• <footer>: از تگ <footer> در انتهای صفحه و برای قسمت فوتر سایت استفاده می‌شود. این قسمت عموما حاوی اطلاعات تماس و عناصر ناوبری، نقشه سایت، لینک‌های بازگشت به بالای صفحه و اسناد مرتبط است.
• <figure>: تگ <figure> برای نمایش عکس، نمودار و تصاویر استفاده می‌شود.
• <figcaption>: برای نمایش کپشن یک عکس یا نمودار استفاده می‌شود و امکان استفاده از آن بعنوان اولین یا آخرین فرزند یک تگ <figure> وجود دارد.

تگ‌های html معنایی برای متن

تگ‌های html سمانتیک برای متن علاوه بر فرمت قالب بندی، کارکرد معنایی متن مورد نظر را مشخص می‌کنند.

• <h1>: تگ h1 عنوان اصلی صفحه را مشخص می‌کند و اصولا از این تگ باید فقط یک عدد در هر صفحه اینترنتی وجود داشته باشد.
• <h2>-<h6>: از تگ‌های <h2>-<h6> برای نشانه گذار سلسله مراتبی محتوای یک صفحه استفاده می‌شود. امکان استفاده از چندین تگ همسان در یک صفحه وجود دارد.
• <p>: تگ پاراگراف بیانگر یک پاراگراف متنی است.
• <a>: تگ (anchor) یا <a> برای مشخص کردن یک لینک در صفحه استفاده می‌شود.
• <ol>: تگ لیست شماره دار یا <ol> مشخص کننده یک لیست از موارد بصورت شماره دار است و هریک از موارد درون تگ <li> یا (list item) قرار دارند.
• <ul>: لیست بدون شماره (unordered list) یا <ul> مشخص کننده لیستی از موارد است که دارای ترتیب مشخصی نیستند. مشابه تگ <ol> هریک از موارد لیست درون تگ <li> قرار دارند.
• <q> و <blockquote>: از این دو تگ برای نقل قول استفاده می‌شود. از تگ <blockquote> برای نقل قولهای چند خطی و طولانی استفاده کنید و از تگ <q> برای نقل قول های درون خطی و توکار (inline) استفاده کنید.
• <em>: تگ <em> مخفف emphasis است و برای تاکید روی یک متن استفاده می‌شود.
• <strong>: تگ برای تاکید شدیدتر (strong emphasis) استفاده می‌شود.
• <code>: از این تگ برای کدهای کامپیوتری استفاده می‌شود.

نکات استفاده از HTML معنایی

در این قسمت برخی از نکات استفاده صحیح از عناصر معنایی html را ذکر خواهیم کرد.

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

اگرچه مرورگرها از عناصر معنایی برای اعمال استایل‌های متفاوت استفاده می‌کنند، اما شما نباید برای رسیدن به یک ظاهر خاص از این عناصر استفاده کنید. مثلا استفاده از تگ <a> باعث آبی شدن متن و کشیده شدن یک خط زیر متن خواهد شد. استفاده از این تگ تنها برای اعمال استایل به یک متن که لینک نیست اشتباه است.

در زیر برخی از متداولترین اشتباهات استفاده از عناصر معنایی ذکر شده است:

• استفاده از هدینگ‌های <h1> – <h6> برای متنی که عنوان نیست و تنها با هدف بزرگتر کردن سایز متن ، اشتباه است.
• استفاده از تگ <blockquote> فقط با هدف هل دادن متن به جلو و ایجاد فاصله از دیگر اشتباهات رایج استفاده از عناصر معنایی است.
• استفاده از تگ <strong> و <em> تنها با هدف برجسته تر کردن متن و یا ایتالیک کردن متنی که نیاز به تاکید ندارد، اشتباه است.

بهتر است برای ایجاد استایل‌های مدنظرتان از CSS استفاده کنید.

رعایت سلسله مراتب در استفاده از هدینگ‌ها

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

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

عناصر html را با در نظر گرفتن معنایشان درون هم قرار دهید.

در هنگام کدنویسی و طراحی سایت، هدفتان فقط رسیدن به چیدمان مدنظر نباشد و از عناصر معنایی html بدرستی استفاده کنید. در تصویر زیر نحوه استفاده درست از عناصر معنایی html نمایش داده شده است:

تگ‌های html استفاده شده در سمت راست تصویر درست نیست، زیرا بیانگر این است که این صفحه دارای ۴ بخش موضوعی مختلف است. در حالیکه در واقع این صفحه دارای یک موضوع اصلی است و ۴ زیر موضوع دارد.

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

جمع بندی

در این مقاله در مورد html معنایی توضیح دادیم و مزایای استفاده از این عناصر را در طراحی وب ذکر کردیم. استفاده از عناصر معنایی خوانایی کد شما را بهتر خواهد کرد و سایر برنامه نویس‌ها درک بهتری از کدنوشته شده توسط شما خواهند داشت. همچنین افراد دارای معلولیت‌های چشمی نیز بهتر توانست با محصول شما تعامل داشته باشند.