صفحه نخست » مقالات » برنامه نویسی » آموزش HTML » تگ های معنایی HTML

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

دسته بندی : آموزش HTML سطح مقاله : مقدماتی زمان مطالعه : 3 دقیقه 08 آبان 1399
تگ-های-معنایی-HTML

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

ریشه تگ های معنایی HTML5

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

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

تگ های معنایی HTML5 هدف ( purpose )عنصر را تعریف می کنند. با استفاده از نشانه گذاری معنایی ، به مرورگر کمک می کند meaning (معنای محتوا) را بجای نمایش آن درک کند. با ارائه این سطح شفافیت اضافی ، عناصر معنایی HTML5 همچنین به موتورهای جستجو کمک می کند تا صفحه را بخوانند و اطلاعات مورد نیاز را سریعتر پیدا کنند.

تگ های معنایی HTML5

نشانه گذاری معنایی برای ساختار سند

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

عنصر <header> عنوان سرصفحه شما را مشخص می کند. این همیشه برای کاربران در header  قابل مشاهده است:

<header>
 <h1>JavaScript</h1>
 <h3>What is JavaScript?</h3>
 <p>Today we are going to talk about JavaScript</p>
</header>

<nav> فضای لینک را در وب سایت شما به تصویر می کشد:

<nav>
  <ul>
    <li><a href="https://devix.ir/">Gamified Courses</a></li>
    <li><a href="https://devix.ir/">Tutorials</a></li>
    <li><a href="https://devix.ir/">Space doggo courses</a></li>
    <li><a href="https://devix.ir/">Game Dev Courses</a></li>
  </ul>
</nav>

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

<section>
  <h1>Section Heading</h1>
  <p>The section tag can contain any elements.</p>
  <img src="image.png" alt="section example">
</section>

از عنصر <article> می توان برای تعریف محتوای مقاله در وب سایت شما استفاده کرد:

<article>
  <h1>Fun Fact</h1>
  <p>Fun fact: most of the fun facts on the Internet are not actually fun.</p>
</article>

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

<aside>
  <h4>Lake</h4>
  <p>Oxford lake is a lake in the state.</p>
</aside>

عنصر <footer>  پاورقی وب سایت یا بخشی از مطالب شما را توصیف می کند:

<footer>
  <address>
    Postal Address: Door No.00, Street, City, State, Country.
  </address>
  <p>Copyright © 2018 All rights reserved.</p>
</footer>

سایر تگ های معنایی که معمولاً مورد استفاده قرار می گیرند.

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

<figure>
  <figcaption>Dog</figcaption>
  <img src="image.png" alt="The Bread Dog" width="300" height="300">
</figure>

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

<details> 
   <summary>Some details</summary> 
   <p>Provide more info about the details here.</p>
</details>

محتوای تگ <main> محتوای اصلی یک صفحه است. این می تواند یک مقاله ، پاراگراف منظم یا هر چیز دیگری باشد:

<main id="content" class="group" role="main">

عنصر <mark> متن را برجسته می کند تا بر معنی آن تأکید کند:

<p>The mark tag is <mark>useful</mark> when you need to highlight important information</p>

از عنصر <time> برای تعریف و نمایش زمان و تاریخ در صفحه وب شما استفاده می شود:

<h2>The premiere show starts at <time>21:00</time> today.</h2>

ازتگ <img> برای افزودن تصویر در وب سایت شما استفاده می شود:

<img src="image.png" alt="Space Doggo" width="50" height="50">

عنصر <form> به شما امکان می دهد اطلاعات ورودیرا وارد کنید:

<!-- wp:code -->
<pre class="wp-block-code"><code></code></pre>
<!-- /wp:code -->

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

<table>
  <tr>
    <th>Place</th>
    <th>Animal</th>
  </tr>
  <tr>
    <td>Space</td>
    <td>Dog</td>
  </tr>
</table>

نکات مفید تگ های معنایی HTML

  • HTML معنایی نیز برای دسترسی مهم است ، به خصوص که تعداد دستگاه های هوشمند در حال رشد است. این مسیریابی صفحه را برای فناوری های کمکی نیز ساده می کند.
  • عناصر HTML5 که به شما کمک می کنند با حروف الفبا خارجی کنار بیایید – به عنوان مثال ، نگاهی به تگ های <bdi> و <ruby> بیندازید.
  • همچنین با استفاده ازتگ های معنایی HTML5 ایجاد  یک سبک سازگار با CSS آسان تر می شود ، زیرا به راحتی می توانید تمام عناصر مشابه را انتخاب کنید.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts