نوشتن تگ های html به صورت semantic دقیقا یعنی چی ؟؟

نوشتن تگ های html به صورت semantic دقیقا یعنی چی و به چه دردی میخوره؟

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

نوع اول در مثال زیر:

<div class='header'>
<div class='section'>
     <div class='article'>
         <div class='figure'>
                 <img>
                 <div class='figcaption'></div>
        </div>
     </div>
</div>
<div class='footer'></div>

در صورتی که ما در html5 تگ های داریم مثلا مخصوص نوشتن کدهای header و یا footer و...

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

<header></header>
<section>
   <article>
       <figure>
           <img>
           <figcaption></figcaption>
       </figure>
  </article>
</section>
<footer></footer>

همونطور که در کدبالا میبینید هر بخش صفحه، المنت مخصوص خودشو داره و یجورایی بخش های مختلف صفحه دسته بندی شده است در حالی که مثال بالا که ما از المنت div برای نوشتنش استفاده کردیم رو خودمون با کلاسها دسته بندیش کردیم و یطورایی با نام کلاس ها المنت ها از هم متمایز شدن.

البته استفاده از المنت های بالا منجر به استایل دهی نمیشه، یعنی مثلا استفاده ازتگ header به معنای این نیست که استایل اون هم خودبه خود به محتوا اعمال میشه وهم چنان باید در css به اونا استایل داد.

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

برای اشنایی بیشتر المنت های sematic رو کاملش میکنیم که میتونید ازشون استفاده کنید:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

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

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