برنامه نویسی

در آغوش ساختار HTML و معناشناسی

در این مقاله ، ما به آن شیرجه می زنیم معنایی HTML – گامی مهم در جهت نوشتن کد پاک کننده ، در دسترس تر و کد SEO دوستانه. با تکیه بر مفاهیم بنیادی که در مقاله قبلی من HTML BASICICS: راهنمای مبتدی است ، من با استفاده از عناصر معنایی که هدف هر بخش را روشن می کند ، دوباره کد اولیه خود را مجدداً مورد بررسی و به روز کردم.

عناصر معنایی چیست؟

معنایی HTML به معنای استفاده از برچسب هایی است که هدف آنها را به وضوح برای مرورگر و توسعه دهندگان توصیف می کند. این باعث افزایش دسترسی ، سئو و وضوح کد می شود.
عناصر معنایی مشترک شامل موارد زیر است:

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

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

مزایای HTML معنایی

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

  2. بهینه سازی سئو
    موتورهای جستجوگر و محتوای آن را با دقت بیشتری تجزیه می کنند ، و به طور بالقوه رتبه بندی جستجوی سایت خود را بهبود می بخشند.

  3. حفظ قابلیت
    یک پایگاه کد به خوبی ساختار یافته باعث می شود که توسعه دهندگان خواندن ، درک و به روزرسانی کد را آسان تر کنند.

تبدیل HTML اساسی به HTML معنایی

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


 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
  </span>My Semantic HTML Page<span class="nt"/>
<span class="nt"/>
<span class="nt"/>
  <span class="nt"><header/></span>
    <span class="nt"/>My Website<span class="nt"/>
    <span class="nt"><nav/></span>
      <span class="nt"><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"/></span>
      <span class="nt"><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>About<span class="nt"/></span>
      <span class="nt"><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Contact<span class="nt"/></span>
    <span class="nt"/>
  <span class="nt"/>

  <span class="nt"><main/></span>
    <span class="nt"><section/></span>
      <span class="nt"><h2/></span>Introduction<span class="nt"/>
      <span class="nt"/>This section introduces the website content.<span class="nt"/>
      <span class="nt"/>
        <span class="nt"><li/></span>Coding<span class="nt"/>
        <span class="nt"><li/></span>Design<span class="nt"/>
        <span class="nt"><li/></span>Gaming<span class="nt"/>
      <span class="nt"/>
    <span class="nt"/>

    <span class="nt"><article/></span>
      <span class="nt"><h2/></span>Featured Article<span class="nt"/>
      <span class="nt"/>This article provides deeper insights into web development.<span class="nt"/>
    <span class="nt"/>
  <span class="nt"/>

  <span class="nt"><footer/></span>
    <span class="nt"/><span class="ni">©</span> 2025 My Website<span class="nt"/>
  <span class="nt"/>
<span class="nt"/>
<span class="nt"/>
</span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>حالت تمام صفحه را وارد کنید
    

از حالت تمام صفحه خارج شوید

چه چیزی تغییر کرده است:

  1. هدر و ناوبری
    عنوان صفحه و پیوندهای ناوبری اکنون در داخل بسته بندی شده است

    برچسب ، با

  2. محتوای اصلی
    در

    TAG محتوای اصلی را محاصره می کند ، بیشتر به:

    • بوها
      برای محتوای مقدماتی.
    • در
      برای نوشتن برجسته
  3. پاورقی:
    محتوای پاورقی اکنون در یک ساخته شده است

    برچسب برای وضوح و جریان مناسب سند.

تمرینات دستی

  1. صفحه را گسترش دهید
    اضافه کردن دیگری

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

  2. تنظیم مجدد عناصر
    آزمایش با حرکت

    یا

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

منابع اضافی

با تبدیل HTML اساسی ما به یک ساختار معنایی ، ما در حال ساختن یک پروژه وب هستیم که در دسترسبا وابسته به سئو وت نگهداری آسانبشر این رویکرد هر دو بهترین شیوه های توسعه وب و کل تجربه کاربر را برای هر برنامه وب مدرن تقویت می کند.

با ادامه سفر خود به سمت ساختن یک بازی کاملاً تعاملی با استفاده از این اصول اصلی ، با ما همراه باشید!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا