تگ های مفهومی

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

این تگ ها را در لیست زیر مشاهده می کنید:

  • header
  • nav
  • section
  • article
  • aside
  • footer
header
article
section
footer

 

نکته: این تگ ها، پیشنهادی است و اجباری به استفاده از تگ های معنایی نیست.

تگ header

به بخش بالایی سایت اصطلاحا header گفته می شود.

معمولا header شامل لوگو، اطلاعات تماس، فهرست و آیکون ها می باشد.

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

<header>
    <h1>سایت PNLdev</h1>
    <nav>
        <span>آموزش HTML</span>
        <span>آموزش CSS</span>
        <span>آموزش JS</span>
        <span>آموزش PHP</span>
    </nav>
</header>

تگ nav

به بخشی که در آن فهرست سایت قرار می گیرد اصطلاحا بخش nav (ناوبری) می گویند.

این بخش می تواند داخل تگ header یا بعد از آن باشد.

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

<nav>
    <a href="/fa/tutorial/html">آموزش HTML</a>
    <a href="/fa/tutorial/css">آموزش CSS</a>
    <a href="/fa/tutorial/js">آموزش JS</a>
    <a href="/fa/tutorial/php">آموزش PHP</a>
</nav>

تگ article

هر بخش سایت را که بتوان به صورت مستقل از سایر بخش ها، ارائه کرد را می توان در تگ article نوشت. مانند:

  • هر محصول در صفحه دسته بندی محصولات
  • هر بلاگ در صفحه دسته بندی بلاگ ها
  • بخش نظرات کاربران
<article>
    <h2>دوربین Canon 90D</h2>
    <p>دوربین canon 90d دارای قابلیت فیلمبرداری و عکاسی است.</p>
    <del>75.000.000</del>
    <ins>74.500.000 تومان</ins>
</article>

تگ section

برای بخش بندی سایت معمولا از تگ section استفاده می کنند.

نکته: به صورت کلی، هر بخشی از سایت که عنوان جداگانه داشته باشد، یک بخش (section) در نظر گرفته می شود.

<section>
    <article>
        <h2>دوربین Canon 90D</h2>
        <p>دوربین canon 90d دارای قابلیت فیلمبرداری و عکاسی است.</p>
        <del>75.000.000</del>
        <ins>74.500.000 تومان</ins>
    </article>

    <article>
        <h2>دوربین Canon 90D</h2>
        <p>دوربین canon 90d دارای قابلیت فیلمبرداری و عکاسی است.</p>
        <del>75.000.000</del>
        <ins>74.500.000 تومان</ins>
    </article>

    <article>
        <h2>دوربین Canon 90D</h2>
        <p>دوربین canon 90d دارای قابلیت فیلمبرداری و عکاسی است.</p>
        <del>75.000.000</del>
        <ins>74.500.000 تومان</ins>
    </article>
</section>

تگ aside

به بخش کناری محتوا اصلی سایت، اصطلاحا بخش aside می گویند.

<aside>
    <ul>
        <li>پیوند اول</li>
        <li>پیوند دوم</li>
        <li>پیوند سوم</li>
        <li>پیوند چهارم</li>
        <li>پیوند پنجم</li>
    </ul>
</aside>

<section>
</section>

تگ footer

به بخش پایینی سایت اصطلاحا footer گفته می شود.

معمولا footer شامل لوگو، اطلاعات تماس، فهرست و آیکون ها، نقشه سایت می باشد.

<footer>
    <p>
        <a href="info@pnldev.com">info@pnldev.com</a><br>
        طراحی و توسعه: احسان اسلامی
    </p>
</footer>

خلاصه درس

  • در این بخش با ساختار پیشنهادی صفحات وب آشنا شدید.
  • همچنین نکاتی درباره تگ های ساختاردهنده HTML یاد گرفتیم.

توسعه دهندگان
احسان اسلامی