Semantic HTML Elements

تو این نوشته می‌خوام درباره یک مفهوم مهم یعنی Semantic HTML Elements که اغلب تو مصاحبه‌ها هم ازش سوال میشه، صحبت کنم ولی قبل از اینکه بریم سراغ اصل مطلب، بهتره یکم بریم تو دل زبان‌شناسی!

تو زبان انگلیسی، کلمه Semantic رو درمورد چیزایی به کار میبرن که به معنا مربوط باشن، یعنی یجورایی سروکارشون با معنای اون چیز هست و میخوان اون رو توصیف کنن!

سروکله این کلمه توی برنامه نویسی هم پیدا شده و اشاره به معنایِ یک قطعه کد داره، مثلا یک function توی جاوااسکریپت قراره چیکار کنه؟ یک کلاس CSS ای استایل مربوط به کدوم بخش از صفحه رو مشخص میکنه؟ یا اینکه نقش یک HTML element توی داکیومنت ما چیه؟!

قطعا اسم یک function باید طوری انتخاب شه که توصیف‌کننده کار اون باشه مثلا:

function createFruitList() {
      … 
}

این تابع قراره یه لیستی از میوه‌ها رو بسازه.

اسم یک کلاس CSS ای هم باید طوری انتخاب بشه که مشخص کنه این استایل‌ها، مربوط به کدوم المنت از صفحه هستن مثلا:

.fruit-item { 
     ... 
}

این کلاس، استایل‌های مربوط به هر آیتم میوه رو مشخص میکنه.

درمورد HTML elements هم همین روند صادقه و یک سری element توی HTML وجود دارن که بهشون میگن Semantic HTML Elements، المنت‌هایی با معنی!

اینجا، لیست Semantic HTML Elements رو براتون آوردم:

<article>       //Defines independent, self-contained content
<aside>         //Defines content aside from the page content
<details>       //Defines additional details that the user can view or hide
<figcaption>    //Defines a caption for a <figure> element
<figure>        //Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>        //Defines a footer for a document or section
<header>        //Specifies a header for a document or section
<main>          //Specifies the main content of a document
<mark>          //Defines marked/highlighted text
<nav>           //Defines navigation links
<section>       //Defines a section in a document
<summary>       //Defines a visible heading for a <details> element
<time>          //Defines a date/time

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

مخاطبشون کیه؟!

• دولوپر‌ها
• مرورگرها

دولوپر‌ها و Semantic HTML Elements

سناریوهای مختلفی وجود داره که توی اون‌ها، Semantic elements به کمک دولوپرها میان، برای مثال:

1- فرض کنید شما یک دولوپر تازه وارد در یک شرکت هستین و تسکی بهتون محول شده که ادامه کار یک دولوپر دیگه هست. شما کدهای موجود رو باز می‌کنین و شروع به خوندنشون می‌کنین. اینجاست که Semantic elements به کمکتون میان و با شما حرف میزنن. این شکلی شما به راحتی با خوندن یک قطعه کد میفهمین که هر المنت داره چه چیزی رو نشون میده و محتواش چی هست. مثلا تگ header نشون دهنده یک هدر تو صفحه هست و تگ li نشون دهنده آیتمی از یک لیست هست. اگر کدهای قبلی صرفا با استفاده از المنت‌های generic مثل div و span پیاده سازی شده بود، شما باید کلی وقت صرف این میکردین که ساختار صفحه رو بفهمین یا حتی مجبور شین از دولوپر قبلی توضیحات بیشتری بخواین! درحالیکه از استفاده از Semantic elements خوانایی کد رو بالا میبره و دولوپرها رو از سردرگمی نجات میده و باعث میشه کلی وقت سیو بشه!

2- این سناریو خیلی شبیه به حالت قبله، با این تفاوت که شما قراره روی پروژه‌ای کار کنین که به زبان native خودتون هم نیست! تو این شرایط، استفاده از Semantic elements بهتون کمک می‌کنه که بفهمین تو هر قسمت از صفحه چه محتوایی قرار گرفته، بدون اینکه معنی خود محتوا رو بدونین :)

مرورگرها و Semantic HTML Elements

یکی از کارهایی که مرورگرها انجام میدن این هست که یک HTML document رو می‌گیرن، اون رو parse می‌کنن و یک Document Object Model می‌سازن که همون DOM معروف خودمونه! DOM میاد و یک ساختار شبیه به درخت، از نودهای یک داکیومنت رو بهمون نمایش میده.

یکی دیگه از کارهایی که مرورگرها انجام میدن ساخت Accessibility Object Model یا AOM هست. AOM مثل نسخه Semantic ای از DOM هست! وقتی از Semantic elements برای پیاده‌سازی یک داکیومنت استفاده شده باشه، AOM متفاوت‌ای نسبت به حالتی از این المنت‌ها استفاده نشده باشه، توسط مرورگر تولید میشه. (برای آشنایی بیشتر با DOM اینجا و AOM اینجا کلیک کنید.)

حالا این AOM به چه دردی میخوره؟

به Screen readerها کمک میکنه! Screen reader یک تکنولوژی کمکی هست که افرادی که مشکلات بینایی دارن با استفاده از این تکنولوژی بتونن از کامپیوتر استفاده کنن و حتی وبگردی کنن. screen reader ها از این المنت‌ها به عنوان یک تابلوی راهنما استفاده می‌کنن و این باعث میشه افرادی که مشکلات بینایی دارن درک بهتری از ساختار صفحات وب داشته باشن و بهتر بتونن تو این صفحات navigation انجام بدن.

موتورهای جستجوگر و Semantic HTML Elements

یکی دیگه از جاهایی که اهمیت Semantic elements توش برجسته‌تر میشه، بحث SEO سایت هست. همونطور که گفته شد، استفاده از این المنت‌ها باعث میشه نقش محتوا در صفحه و میزان اهمیتش مشخص بشه. استفاده درست از Semantic elements باعث میشه که میزان مرتبط بودن محتوای یک صفحه با کلمات کلیدی به درستی مشخص بشه و درنتیجه، ranking سایت تو نتایج موتور جستجو بالاتر بره!

** برای اینکه بتونین بهتر و راحت‌تر از این المنت‌ها استفاده کنین، فقط کافیه موقع پیاده‌سازی هر بخش از یک صفحه از خودتون بپرسین: «کدوم المنت بهتر می‌تونه محتوای این قسمت رو توصیف کنه؟»

** استفاده از role attribute میتونه به یک المنت معنی خاصی رو بده مثلا:

<div role=&quotbanner&quot>      
     <span role=&quotheading&quot aria-level=&quot1&quot>Three words</span>      
     <div role=&quotnavigation&quot>
           <a>one word</a>
           <a>one word</a> 
           <a>one word</a>
           <a>one word</a>
      </div>
 </div>

ولی بهتره بجای استفاده از این attribute، تا جای ممکن از Semantic element درست، در جای درست خودش استفاده کنیم:

<header>
      <h1>Three words</h1>
      <nav>
           <a>one word</a>
           <a>one word</a>
           <a>one word</a>
           <a>one word</a>
      </nav>
 </header>

لینک رفرنس‌هایی که ازشون استفاده کردم رو اینجا براتون میذارم، امیدوارم که مفید بوده باشه :)

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

https://web.dev/learn/html/semantic-html

https://developer.chrome.com/docs/devtools/accessibility/reference/#explore-tree

https://www.freecodecamp.org/news/semantic-html5-elements/

https://www.w3schools.com/html/html5_semantic_elements.asp

https://www.w3schools.com/html/html_accessibility.asp

http://web-accessibility.carnegiemuseums.org/foundations/semantic/#:~:text=Structural%2C%20semantic%20HTML%20is%20the,read%20by%20a%20screen%20reader.

https://www.semrush.com/blog/semantic-html5-guide/#:~:text=Semantic%20HTML%20tags%20are%20important,better%20understanding%20of%20your%20content.

https://www.pluralsight.com/guides/semantic-html