آموزش HTML - عناصر سمانتیک

HTML5 چندین عنصر معنایی(semantic) جدید را معرفی کرد که برای ارائه روشی توصیفی و ساختار یافته تر برای سازماندهی محتوای صفحه وب طراحی شده اند.این عناصر جدید HTML5 روشی ساختارمندتر و معنایی تر برای سازماندهی محتوا در یک صفحه وب ارائه می دهند که می تواند دسترسی، بهینه سازی موتور جستجو و تجربه کلی کاربر را بهبود بخشد.

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

html معنایی (semantic) چیست؟

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

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

چند نمونه از تگ های HTML معنایی عبارتند از:

• <article>: نشان دهنده یک محتوای مستقل است، مانند یک مقاله خبری یا پست وبلاگ.
• <section>: نمایانگر بخشی از یک سند یا صفحه وب، مانند فصلی از یک کتاب یا گروهی از مقالات مرتبط است.
• <header>: نمایانگر بخش بالای یک صفحه یا بخش است که معمولاً حاوی نام تجاری، منو و سایر محتوای اولیه است.
• <footer>: نشان دهنده بخش پایین صفحه یا بخش است که معمولاً حاوی اطلاعات کپی رایت، اطلاعات تماس و سایر محتوای پایانی است.
• <nav>: نمایانگر بخشی از صفحه است که حاوی لینک های منو است.
• <main>: نمایانگر محتوای اصلی یک صفحه یا بخش است.
• <figure> و <figcaption>: یک شیء رسانه ای مستقل (مانند یک تصویر، ویدئو یا نمودار) و عنوان مرتبط با آن را نشان می دهد.

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

مزایای استفاده از semantic html

به عنوان مثال، به جای استفاده از تگ <div> برای ایجاد یک بلوک محتوا، نشانه گذاری معنایی از یک برچسب توصیفی تر مانند <article> یا <section> برای نشان دادن هدف محتوا استفاده می کند. این کار باعث می‌شود برای موتورهای جستجو درک محتوای صفحه و فهرست‌بندی مناسب آن آسان‌تر شود و همچنین فناوری‌های کمکی مانند صفحه‌خوان‌ها را برای پیمایش محتوا آسان‌تر کند.

استفاده از نشانه گذاری معنایی نه تنها دسترسی و بهینه سازی یک صفحه وب برای موتورهای جستجو را بهبود می بخشد، بلکه نگهداری و به روز رسانی محتوا را آسان تر می کند، زیرا ساختار و معنای محتوا به وضوح تعریف شده است.

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

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

در اینجا لیستی از تگ های معنایی Semantic HTML آمده است:

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

علاوه بر این تگ‌های HTML معنایی، تگ‌های غیرمعنای HTML مانند <div> و <span> نیز وجود دارند که می‌توان از آنها برای گروه‌بندی و استایل دهی محتوا استفاده کرد، اما به تنهایی هیچ معنایی ارائه نمی‌کنند. با این حال، هنوز هم می‌توان از آن‌ها همراه با تگ‌های HTML معنایی برای ایجاد یک صفحه وب با ساختار و سازماندهی مناسب استفاده کرد. 
 

تگ <article>

تگ <article> یک تگ HTML معنایی است که برای تعریف یک محتوای مستقل استفاده می شود که می تواند به طور مستقل توزیع یا استفاده مجدد شود. یک مقاله می تواند نشان دهنده یک پست وبلاگ، مقاله خبری، پست تالار گفتمان یا هر قسمت دیگری از محتوایی باشد که به عنوان یک واحد کامل وجود دارد.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <article> آورده شده است:

محتوای خودکفایی: تگ <article> برای تعریف بلوکی از محتوا استفاده می‌شود که می‌تواند به‌عنوان یک واحد کامل، با عنوان، نویسنده و سایر ابرداده‌های خاص خودش باشد. این امر توزیع و استفاده مجدد از محتوا را در زمینه های دیگر آسان تر می کند.

ساختار معنایی: با استفاده از تگ <article>، توسعه دهندگان می توانند ساختار معنادار و توصیفی تری برای صفحات وب خود ایجاد کنند که می تواند دسترسی و بهینه سازی موتورهای جستجو را بهبود بخشد.

تجربه کاربری بهتر: تگ <article> می تواند به کاربران کمک کند تا هدف و ساختار محتوا را راحت تر درک کنند، که می تواند تعامل و رضایت را بهبود بخشد.

در اینجا مثالی از نحوه استفاده از تگ <article> در HTML آورده شده است:

<article>
  <header>
    <h2>My Blog Post</h2>
    <p>By Jane Doe</p>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat magna quis massa ullamcorper, id luctus purus faucibus. Maecenas at ligula euismod, convallis ipsum ac, ultricies ipsum.</p>
  <p>Etiam vel tortor nunc. Nulla facilisi. Nam viverra convallis nisl, sed vestibulum est tempor in. Sed eleifend tellus nec neque aliquam, non suscipit augue molestie. </p>
  <footer>
    <p>Published on <time datetime="2022-03-28">March 28, 2022</time></p>
  </footer>
</article>

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

تگ <aside>

تگ <aside> یک تگ HTML معنایی است که برای تعریف محتوای مرتبط با محتوای اصلی یک صفحه وب استفاده می‌شود، اما برای معنی یا هدف آن مرکز نیست. Aside می تواند محتوایی مانند لینک های مرتبط، تبلیغات یا اطلاعات تکمیلی را نشان دهد که می تواند درک کاربر را از محتوای اصلی افزایش دهد.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <aside> آورده شده است:

محتوای مرتبط: تگ <aside> برای تعریف محتوایی استفاده می‌شود که با محتوای اصلی صفحه مرتبط است، اما برای معنی یا هدف آن ضروری نیست. این می تواند شامل مواردی مانند تبلیغات، پیوندهای مرتبط یا اطلاعات تکمیلی باشد.

ساختار معنایی: با استفاده از تگ <aside>، توسعه‌دهندگان می‌توانند ساختار معنادار و توصیفی‌تری برای صفحات وب خود ایجاد کنند که می‌تواند دسترسی و بهینه‌سازی موتورهای جستجو را بهبود بخشد.

تجربه کاربری بهتر: تگ <aside> می تواند به کاربران کمک کند تا ارتباط بین محتوای اصلی و محتوای مرتبط را راحت تر درک کنند، که می تواند تعامل و رضایت را بهبود بخشد.

در اینجا مثالی از نحوه استفاده از تگ <aside> در HTML آورده شده است:

<main>
  <h1>My Blog Post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat magna quis massa ullamcorper, id luctus purus faucibus. Maecenas at ligula euismod, convallis ipsum ac, ultricies ipsum.</p>
  <p>Etiam vel tortor nunc. Nulla facilisi. Nam viverra convallis nisl, sed vestibulum est tempor in. Sed eleifend tellus nec neque aliquam, non suscipit augue molestie. </p>
  <aside>
    <h2>Related Links</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </aside>
</main>

در این مثال، تگ <aside> برای تعریف بلوکی از محتوا استفاده می‌شود که به محتوای اصلی صفحه (یک پست وبلاگ) مرتبط است، اما برای معنی یا هدف آن ضروری نیست. محتوای کناری شامل یک عنوان ("پیوندهای مرتبط") و لیستی از پیوندها است که به محتوای اصلی مرتبط هستند. با استفاده از تگ <aside>، توسعه‌دهنده یک ساختار واضح و معنادار برای محتوای مرتبط ایجاد کرده است که هم برای انسان و هم برای ماشین قابل درک است.

 

تگ <details>

تگ <details> یک تگ HTML معنایی است که برای تعریف محتوایی استفاده می‌شود که می‌تواند توسط کاربر بزرگ یا جمع شود و اطلاعات یا جزئیات بیشتری در مورد یک موضوع ارائه دهد. تگ معمولاً در ترکیب با تگ <summary> استفاده می شود که عنوان یا عنوانی را برای محتوا ارائه می دهد.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <details> آورده شده است:

محتوای قابل گسترش: تگ <details> برای تعریف محتوایی استفاده می‌شود که کاربر می‌تواند آن را گسترش یا جمع کند و اطلاعات یا جزئیات بیشتری در مورد یک موضوع ارائه دهد. این می تواند به ویژه برای ارائه اطلاعات پیچیده یا طولانی در قالب قابل مدیریت تر مفید باشد.

ساختار معنایی: با استفاده از تگ <details>، توسعه دهندگان می توانند ساختار معنادار و توصیفی تری برای صفحات وب خود ایجاد کنند که می تواند دسترسی و بهینه سازی موتورهای جستجو را بهبود بخشد.

تجربه کاربری بهتر: تگ <details> می تواند به کاربران کمک کند تا رابطه بین محتوای اصلی و جزئیات اضافی را راحت تر درک کنند، که می تواند تعامل و رضایت را بهبود بخشد.

در اینجا مثالی از نحوه استفاده از تگ <details> در HTML آورده شده است:

<section>
  <h2>Topic Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat magna quis massa ullamcorper, id luctus purus faucibus. Maecenas at ligula euismod, convallis ipsum ac, ultricies ipsum.</p>
  <details>
    <summary>Additional Details</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat magna quis massa ullamcorper, id luctus purus faucibus. Maecenas at ligula euismod, convallis ipsum ac, ultricies ipsum.</p>
  </details>
</section>

در این مثال، تگ <details> برای تعریف جزئیات یا اطلاعات اضافی در مورد یک موضوع استفاده می‌شود که کاربر می‌تواند آن‌ها را بسط یا جمع کند. تگ <summary> یک عنوان برای محتوا ارائه می دهد که کاربر می تواند روی آن کلیک کند تا اطلاعات اضافی را آشکار یا پنهان کند. با استفاده از تگ <details>، توسعه‌دهنده یک ساختار واضح و معنادار برای جزئیات اضافی ایجاد کرده است که هم برای انسان و هم برای ماشین‌ها قابل درک است. 
 

تگ <figcaption>

تگ <figcaption> یک تگ HTML معنایی است که برای ارائه عنوان یا توضیحات برای یک تصویر یا عناصر رسانه ای دیگر مانند یک فایل ویدیویی یا صوتی استفاده می شود. معمولاً در ترکیب با تگ <figure> استفاده می شود که برای گروه بندی رسانه و عنوان آن در کنار هم استفاده می شود.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <figcaption> آورده شده است:

رسانه دارای عنوان: تگ <figcaption> برای ارائه عنوان یا توضیحات برای یک تصویر یا سایر عناصر رسانه استفاده می‌شود و درک مفهوم آن را برای کاربران آسان‌تر می‌کند.

ساختار معنایی: با استفاده از تگ <figcaption> در ترکیب با تگ <figure>، توسعه دهندگان می توانند ساختار معنادار و توصیفی تری برای صفحات وب خود ایجاد کنند که می تواند دسترسی و بهینه سازی موتورهای جستجو را بهبود بخشد.

تجربه کاربری بهتر: تگ <figcaption> می‌تواند به کاربران کمک کند تا ارتباط بین عنصر رسانه و عنوان آن را راحت‌تر درک کنند، که می‌تواند تعامل و رضایت را بهبود بخشد.

در اینجا مثالی از نحوه استفاده از تگ <figcaption> در HTML آورده شده است:

<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>Example image caption</figcaption>
</figure>

در این مثال، تگ <figure> برای گروه بندی یک تصویر و عنوان آن با هم استفاده می شود. تگ <img> منبع و متن جایگزین را برای تصویر مشخص می کند، در حالی که تگ <figcaption> یک عنوان برای تصویر ارائه می دهد. با استفاده از تگ‌های <figure> و <figcaption>، توسعه‌دهنده یک ساختار واضح و معنادار برای تصویر و عنوان آن ایجاد کرده است که برای انسان و ماشین قابل درک است.

شایان ذکر است که تگ <figcaption> همچنین می تواند برای ارائه توضیحات یا عنوان برای عناصر رسانه ای دیگر مانند فیلم ها یا فایل های صوتی استفاده شود. مثلا:

<figure>
  <video src="example.mp4" controls></video>
  <figcaption>Example video caption</figcaption>
</figure>

در این مثال، تگ <video> منبع فایل ویدیویی را مشخص می‌کند و شامل ویژگی کنترل‌ها می‌شود تا به کاربر اجازه پخش، توقف و جستجوی ویدیو را بدهد. تگ <figcaption> یک عنوان برای ویدیو فراهم می کند. 

 

تگ <figure>
 

تگ <figure> یک تگ HTML معنایی است که برای گروه بندی یک عنصر رسانه و عنوان یا توضیحات مرتبط با آن، معمولاً از تگ <figcaption> استفاده می شود. برای ایجاد یک رابطه معنایی بین رسانه و توضیحات آن استفاده می‌شود و تفسیر و ارائه محتوا به کاربران را برای خوانندگان صفحه و سایر فناوری‌های کمکی آسان‌تر می‌کند.

در اینجا برخی از ویژگی های کلیدی و مزایای استفاده از تگ <figure> آورده شده است:

محتوای گروه‌بندی‌شده: تگ <figure> برای گروه‌بندی یک عنصر رسانه، مانند تصویر یا ویدیو، و عنوان یا توضیحات مرتبط با آن با استفاده از تگ <figcaption> استفاده می‌شود. این یک رابطه واضح بین دو عنصر ایجاد می کند و درک متن و معنای آنها را برای کاربران آسان تر می کند.

ساختار معنایی: با استفاده از تگ <figure>، توسعه دهندگان می توانند ساختاری معنادار و توصیفی تر برای صفحات وب خود ایجاد کنند که می تواند دسترسی و بهینه سازی موتورهای جستجو را بهبود بخشد.

تجربه کاربری بهتر: تگ <figure> می تواند به کاربران کمک کند تا ارتباط بین عنصر رسانه و توضیحات آن را آسان تر درک کنند، که می تواند تعامل و رضایت را بهبود بخشد.

در اینجا مثالی از نحوه استفاده از تگ <figure> در HTML آورده شده است:

<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>Example image caption</figcaption>
</figure>

در این مثال، تگ <figure> برای گروه بندی یک تصویر و عنوان آن با هم استفاده می شود. تگ <img> منبع و متن جایگزین را برای تصویر مشخص می کند، در حالی که تگ <figcaption> یک عنوان برای تصویر ارائه می دهد. با استفاده از تگ <figure>، توسعه دهنده یک ساختار واضح و معنادار برای تصویر و عنوان آن ایجاد کرده است که هم برای انسان و هم برای ماشین قابل درک است.

شایان ذکر است که تگ <figure> همچنین می تواند برای گروه بندی عناصر رسانه ای دیگر مانند فیلم ها یا فایل های صوتی و همچنین انواع دیگری از محتواهایی که نیاز به شرح یا توضیح دارند استفاده شود. مثلا:

<figure>
  <video src="example.mp4" controls></video>
  <figcaption>Example video caption</figcaption>
</figure>

در این مثال، تگ <video> منبع فایل ویدیویی را مشخص می‌کند و شامل ویژگی کنترل‌ها می‌شود تا به کاربر اجازه پخش، توقف و جستجوی ویدیو را بدهد. تگ <figcaption> یک عنوان برای ویدیو فراهم می کند.

 

تگ <footer>

تگ <footer> یک تگ HTML معنایی است که برای تعریف بخش پاورقی برای یک سند یا صفحه وب استفاده می شود. معمولاً حاوی اطلاعاتی مانند اعلان کپی رایت، پیوندهایی به اسناد یا صفحات مرتبط و اطلاعات تماس برای وب‌سایت یا نویسنده است.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <footer> آورده شده است:

ساختار واضح: تگ <footer> ساختار واضحی را برای بخش پاورقی یک صفحه وب ایجاد می کند و درک هدف و محتوای آن را برای کاربران و موتورهای جستجو آسان تر می کند.

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

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

در اینجا مثالی از نحوه استفاده از تگ <footer> در HTML آورده شده است:

<footer>
  <p>&copy; 2023 My Website, Inc. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="about.html">About Us</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="terms.html">Terms of Service</a></li>
    </ul>
  </nav>
</footer>

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

شایان ذکر است که تگ <footer> همچنین می تواند در ترکیب با سایر تگ های HTML معنایی مانند <header>، <main> و <article> برای ایجاد یک صفحه وب با ساختار مناسب و در دسترس استفاده شود.

 

تگ <header>

تگ <header> یک تگ HTML معنایی است که برای تعریف قسمت سرصفحه یک سند یا صفحه وب استفاده می شود. معمولاً حاوی اطلاعاتی مانند آرم وب سایت، منوی پیمایش و سایر اطلاعات کلیدی مرتبط با صفحه است.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <header> آورده شده است:

ساختار واضح: تگ <header> ساختار واضحی را برای بخش سرصفحه یک صفحه وب ایجاد می کند و درک هدف و محتوای آن را برای کاربران و موتورهای جستجو آسان تر می کند.

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

استایل ثابت: با استفاده از تگ <header>، توسعه‌دهندگان می‌توانند یک استایل ثابت برای بخش سرصفحه در صفحات مختلف وب‌سایت خود ایجاد کنند تا کاربران بتوانند به راحتی بتوانند اطلاعات مورد نیاز خود را پیدا کنند.

در اینجا مثالی از نحوه استفاده از تگ <header> در HTML آورده شده است:

<header>
  <img src="logo.png" alt="My Website Logo">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="services.html">Our Services</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </nav>
</header>

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

شایان ذکر است که تگ <header> همچنین می تواند در ترکیب با سایر تگ های HTML معنایی مانند <footer>، <main> و <article> برای ایجاد یک صفحه وب با ساختار مناسب و قابل دسترس استفاده شود.

 

تگ <main>

تگ <main> یک تگ HTML معنایی است که برای تعریف بخش محتوای اصلی یک صفحه وب استفاده می شود. معمولاً برای محصور کردن محتوای اصلی یک صفحه، مانند مقالات، پست‌های وبلاگ یا سایر اطلاعات مرتبط استفاده می‌شود.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <main> آورده شده است:

ساختار واضح: تگ <main> ساختار واضحی را برای بخش محتوای اصلی یک صفحه وب ایجاد می‌کند و درک هدف و محتوای آن را برای کاربران و موتورهای جستجو آسان‌تر می‌کند.

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

یک استایل ثابت: با استفاده از تگ <main>، توسعه دهندگان می توانند یک استایل ثابت برای بخش محتوای اصلی در صفحات مختلف وب سایت خود ایجاد کنند، تا کاربران بتوانند به راحتی بتوانند اطلاعات مورد نیاز خود را پیدا کنند.

در اینجا مثالی از نحوه استفاده از تگ <main> در HTML آورده شده است:

<main>
  <article>
    <h2>Introduction to HTML</h2>
    <p>HTML is the foundation of every website. In this article, we'll cover the basics of HTML and how to get started building your own web pages.</p>
  </article>
  <article>
    <h2>Introduction to CSS</h2>
    <p>CSS is used to style and layout web pages. In this article, we'll cover the basics of CSS and how to use it to make your web pages look great.</p>
  </article>
</main>

در این مثال، تگ <main> برای تعریف بخش محتوای اصلی یک صفحه وب استفاده می شود. محتویات تگ <main> شامل دو تگ <article> است که حاوی اطلاعاتی در مورد HTML و CSS است. با استفاده از تگ <main>، توسعه‌دهنده یک ساختار واضح و سازگار برای بخش محتوای اصلی ایجاد کرده است که به راحتی توسط کاربران قابل درک و پیمایش است.

شایان ذکر است که تگ <main> افزودنی نسبتاً جدیدی به HTML است و به همین دلیل، ممکن است توسط همه مرورگرهای وب پشتیبانی نشود. با این حال، استفاده از آن می تواند به بهبود دسترسی و ساختار صفحات وب شما کمک کند.

 

تگ <mark>

تگ <mark> یک تگ HTML معنایی است که برای برجسته کردن و تمایز بصری متنی که دارای معنا یا اهمیت خاصی در یک سند یا صفحه وب است استفاده می شود. معمولاً برای تأکید بر یک کلمه یا عبارت خاص در یک بلوک از متن استفاده می شود.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <mark> آورده شده است:

خوانایی بهبود یافته: با استفاده از تگ <mark>، توسعه دهندگان می توانند خوانایی صفحات وب خود را با برجسته کردن کلمات یا عبارات مهم در یک بلوک متن بهبود بخشند. این می تواند به کاربران کمک کند تا به سرعت اطلاعات یا مفاهیم کلیدی را شناسایی کنند.

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

استایل ثابت: با استفاده از تگ <mark>، توسعه دهندگان می توانند یک استایل ثابت برای متن هایلایت شده در صفحات مختلف وب سایت خود ایجاد کنند، که تشخیص و درک معنای پشت متن برجسته شده را برای کاربران آسان تر می کند.

در اینجا مثالی از نحوه استفاده از تگ <mark> در HTML آورده شده است:

<p>The <mark>HTML</mark> language is used to create web pages, while <mark>CSS</mark> is used to style and layout those pages.</p>

در این مثال، تگ <mark> برای برجسته کردن کلمات "HTML" و "CSS" در یک بلوک از متن استفاده می شود. با انجام این کار، توسعه‌دهنده به صورت بصری این اصطلاحات مهم را از متن اطراف متمایز کرده است و شناسایی و درک آن‌ها را برای کاربران آسان‌تر می‌کند.

شایان ذکر است که تگ <mark> باید به مقدار کم و فقط برای برجسته کردن متنی که واقعاً مهم یا معنی دار است استفاده شود. استفاده بیش از حد از تگ می تواند متن برجسته شده را به هم ریخته یا منحرف کند و در واقع از خوانایی صفحه بکاهد.

 

تگ <nav>

تگ <nav> یک عنصر HTML معنایی است که برای تعریف بخشی از یک صفحه وب که حاوی پیوندهای ناوبری است استفاده می شود. معمولاً برای ایجاد منوها یا انواع دیگر نوارهای ناوبری استفاده می شود که به کاربران امکان می دهد به بخش های مختلف یک وب سایت حرکت کنند.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <nav> آورده شده است:

واضح تر کردن ساختار: با استفاده از تگ <nav>، توسعه دهندگان می توانند ساختار واضحی را برای بخش پیمایش یک صفحه وب ایجاد کنند که درک هدف و محتوای آن را برای کاربران و موتورهای جستجو آسان تر می کند.

دسترسی بهبودیافته: تگ <nav> می تواند با ارائه ساختاری واضح و ثابت برای پیوندهای ناوبری، به بهبود دسترسی به وب سایت کمک کند. این می‌تواند برای کاربران دارای معلولیت، مانند صفحه‌خوان‌ها، حرکت در سایت را آسان‌تر کند.

استایل ثابت: با استفاده از تگ <nav>، توسعه‌دهندگان می‌توانند یک استایل ثابت برای پیوندهای پیمایش در صفحات مختلف وب‌سایت خود ایجاد کنند و کاربران بتوانند اطلاعات مورد نیاز خود را پیدا کرده و به سمت آن حرکت کنند.

در اینجا مثالی از نحوه استفاده از تگ <nav> در HTML آورده شده است:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

در این مثال، تگ <nav> برای تعریف یک بخش ناوبری از یک صفحه وب استفاده می شود که حاوی لیستی از پیوندها به بخش های مختلف سایت است. تگ <ul> برای ایجاد یک لیست نامرتب از پیوندها استفاده می شود که هر پیوند در یک تگ <a> محصور می شود. با استفاده از تگ <nav>، توسعه‌دهنده یک ساختار واضح و سازگار برای بخش ناوبری ایجاد کرده است، که کاربران می‌توانند اطلاعات مورد نیاز خود را پیدا کرده و به سمت آن حرکت کنند.

شایان ذکر است که تگ <nav> فقط باید برای تعریف بخش های اصلی پیمایش یک وب سایت، مانند منوی اصلی یا نوار ناوبری اولیه استفاده شود. سایر انواع پیمایش، مانند پیوندهای صفحه بندی یا پیوندهای محتوای مرتبط، باید با استفاده از عناصر HTML مناسب علامت گذاری شوند.

 

تگ <section>

تگ <section> یک عنصر HTML معنایی است که برای تعریف بخشی از یک صفحه وب که محتوای مرتبط را در کنار هم قرار می دهد، استفاده می شود. اغلب برای تقسیم یک صفحه به بخش‌های مجزا، مانند فصل‌های یک کتاب، یا گروه‌بندی محتوایی که موضوع یا هدف مشترکی دارند، استفاده می‌شود.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <section> آورده شده است:

ساختار بهبود یافته: با استفاده از تگ <section>، توسعه‌دهندگان می‌توانند طرح‌بندی ساختاریافته‌تر و سازمان‌یافته‌تری برای صفحات وب خود ایجاد کنند. این می‌تواند به آسان‌تر هضم کردن محتوا برای کاربران و بهبود تجربه کلی کاربر کمک کند.

دسترسی بهتر: تگ <section> می تواند با ارائه ساختاری واضح و مختصر برای محتوای مرتبط به بهبود دسترسی به یک صفحه وب کمک کند. این می‌تواند برای کاربران دارای معلولیت، مانند صفحه‌خوان‌ها، پیمایش صفحه و درک محتوای آن را آسان‌تر کند.

سئوی بهبود یافته: تگ <section> همچنین می تواند با ارائه ساختاری واضح و مختصر برای محتوا، به بهبود بهینه سازی موتور جستجو (SEO) یک صفحه وب کمک کند. موتورهای جستجو می توانند از این اطلاعات برای درک بهتر ساختار و سازماندهی صفحه استفاده کنند که می تواند رتبه آن را در نتایج جستجو بهبود بخشد.

در اینجا مثالی از نحوه استفاده از تگ <section> در HTML آورده شده است:

<section>
  <h2>Section Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, mauris vel feugiat aliquam, velit mauris laoreet mi, a pulvinar purus tellus auctor metus. </p>
  <p>Proin dictum, magna in sollicitudin convallis, felis ante vestibulum odio, eu consequat risus quam ac nisi. </p>
</section>

در این مثال، تگ <section> برای تعریف بخشی از یک صفحه وب که حاوی محتوای مرتبط است استفاده می شود. این بخش با عنوان <h2> شروع می شود که عنوان واضح و مختصری را برای بخش ارائه می دهد. به دنبال آن دو پاراگراف از متن وجود دارد که دارای یک موضوع یا هدف مشترک هستند. با استفاده از تگ <section>، توسعه‌دهنده یک طرح‌بندی ساختاریافته‌تر و سازمان‌یافته‌تر برای صفحه ایجاد کرده است که می‌تواند به بهبود خوانایی، دسترسی و سئو آن کمک کند.

شایان ذکر است که تگ <section> باید برای گروه بندی محتوای مرتبط با هم استفاده شود. هر <section> همچنین باید دارای یک عنوان واضح و مختصر باشد که محتوای بخش را توصیف کند. این به بهبود سازماندهی و ساختار کلی صفحه وب کمک می‌کند و باعث می‌شود که کاربران بتوانند مسیریابی و درک کنند.

 

تگ <summary>

تگ <summary> یک عنصر HTML معنایی است که برای تعریف خلاصه، عنوان یا عنوان برای محتوای عنصر <details> استفاده می‌شود. عنصر <details> برای ایجاد بخش جمع‌شدنی از محتوا در یک صفحه وب استفاده می‌شود که کاربر می‌تواند آن را گسترش یا جمع کند.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <summary> آورده شده است:

دسترسی بهبود یافته: تگ <summary> با ارائه یک عنوان یا خلاصه ای واضح و مختصر برای محتوای عنصر <details> به بهبود دسترسی به یک صفحه وب کمک می کند. این می‌تواند درک محتوا و پیمایش صفحه را برای کاربران دارای معلولیت، مانند صفحه‌خوان‌ها، آسان‌تر کند.

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

سئوی بهبود یافته: تگ <summary> همچنین می‌تواند به بهبود بهینه‌سازی موتور جستجو (SEO) یک صفحه وب با ارائه یک خلاصه و مختصر یا سرفصل برای محتوای عنصر <details> کمک کند. این می تواند درک محتوا و ساختار صفحه را برای موتورهای جستجو آسان تر کند.

در اینجا مثالی از نحوه استفاده از تگ <summary> در HTML آورده شده است:

<details>
  <summary>Click to expand</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, mauris vel feugiat aliquam, velit mauris laoreet mi, a pulvinar purus tellus auctor metus. </p>
  <p>Proin dictum, magna in sollicitudin convallis, felis ante vestibulum odio, eu consequat risus quam ac nisi. </p>
</details>

در این مثال، تگ <details> برای تعریف یک بخش قابل جمع شدن از محتوا در صفحه استفاده می شود. تگ <summary> برای ارائه خلاصه یا عنوان برای محتوای عنصر <details> استفاده می شود. هنگامی که کاربر روی خلاصه کلیک می کند، محتوای عنصر <details> بسته به وضعیت فعلی آن بزرگ یا جمع می شود.

توجه به این نکته مهم است که تگ <summary> همیشه باید همراه با تگ <details> استفاده شود و باید یک خلاصه یا سرفصل واضح و مختصر برای محتوای عنصر <details> ارائه دهد. این به بهبود دسترسی، تجربه کاربری و سئوی صفحه وب کمک می کند.

 

تگ <time>

تگ <time> یک عنصر HTML معنایی است که برای نمایش یک تاریخ و/یا زمان خاص استفاده می شود. می توان از آن برای نشانه گذاری تاریخ ها، زمان ها و مدت زمان ها در قالبی استاندارد و قابل خواندن توسط ماشین استفاده کرد. این می تواند به بهبود دسترسی، سئو و قابلیت استفاده یک صفحه وب کمک کند.

در اینجا برخی از ویژگی ها و مزایای کلیدی استفاده از تگ <time> آورده شده است:

دسترسی بهبودیافته: با استفاده از تگ <time> برای نشانه‌گذاری تاریخ‌ها، زمان‌ها و مدت زمان، توسعه‌دهندگان وب می‌توانند قالبی استاندارد و قابل خواندن توسط ماشین ارائه دهند که با فناوری‌های کمکی مانند صفحه‌خوان‌ها به راحتی قابل درک باشد. این می تواند به دسترسی بیشتر محتوا برای کاربران دارای معلولیت کمک کند.

سئوی بهتر: تگ <time> همچنین می‌تواند به بهبود بهینه‌سازی موتور جستجو (SEO) یک صفحه وب با ارائه داده‌های ساختاریافته که موتورهای جستجو می‌توانند از آن برای درک محتوای صفحه استفاده کنند، کمک کند. این کار باعث می شود موتورهای جستجو نتایج مرتبط را برای کاربران آسان تر نشان دهند.

قابلیت استفاده بهبود یافته: تگ <time> می تواند با ارائه یک قالب استاندارد و قابل خواندن توسط ماشین که کاربران به راحتی آن را درک کنند، به بهبود قابلیت استفاده یک صفحه وب کمک کند. این می تواند به کاهش سردرگمی کمک کند و یافتن اطلاعات مورد نظر کاربران را آسان تر کند.

در اینجا مثالی از نحوه استفاده از تگ <time> در HTML آورده شده است:

<p>The first episode aired on <time datetime="2022-03-15">March 15th, 2022</time>.</p>

در این مثال، تگ <time> برای علامت گذاری یک تاریخ خاص در قالب استاندارد شده استفاده می شود. ویژگی datetime برای تعیین تاریخ در قالب ISO استفاده می شود که فرمت بین المللی شناخته شده برای نمایش تاریخ و زمان است. محتوای متنی تگ <time> برای نمایش تاریخ در قالبی قابل خواندن برای انسان استفاده می شود.

همانطور که در مثال های زیر نشان داده شده است، می توان از تگ <time> برای نشانه گذاری مدت زمان و زمان استفاده کرد:

<p>The theater lasted for <time datetime="PT2H30M">2 hours and 30 minutes</time>.</p>

<p>The store opens at <time datetime="10:00">10:00 AM</time> and closes at <time datetime="18:00">6:00 PM</time>.</p>

در این مثال‌ها، از تگ <time> برای علامت‌گذاری مدت یک تئاتر و زمان افتتاح و بسته شدن یک فروشگاه استفاده می‌شود. ویژگی datetime برای مشخص کردن مدت زمان یا زمان در یک قالب استاندارد استفاده می شود.

مهم است که توجه داشته باشید که تگ <time> باید فقط برای نشانه گذاری تاریخ ها، زمان ها و مدت زمان خاص استفاده شود. نباید برای نشانه گذاری اطلاعات عمومی که به تاریخ یا زمان خاصی مرتبط نیستند استفاده شود. علاوه بر این، ویژگی datetime همیشه باید برای تعیین تاریخ یا زمان در قالب ISO برای حداکثر سازگاری با فن‌آوری‌های کمکی و موتورهای جستجو استفاده شود.