تگ های مفهومی در HTML

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

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

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

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

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

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

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

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

به بخشی که در آن فهرست سایت قرار می گیرد اصطلاحا بخش 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>
    <h2>دوربین Canon 90D</h2>
    <p>دوربین canon 90d دارای قابلیت فیلمبرداری و عکاسی است.</p>
    <del>75.000.000</del>
    <ins>74.500.000 تومان</ins>
</article>

برای بخش بندی سایت معمولا از تگ 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>
    <ul>
        <li>پیوند اول</li>
        <li>پیوند دوم</li>
        <li>پیوند سوم</li>
        <li>پیوند چهارم</li>
        <li>پیوند پنجم</li>
    </ul>
</aside>

<section>
</section>