9 تگ جایگزین به جای تگ div

نویسنده پوریا ستایش پوریا ستایش
1399/04/10
0
209
زمان مطالعه 7 دقیقه
9 تگ جایگزین به جای تگ div

شاید کد های Html شما هم شبیه همین تصویرِ div تو در تو باشه، این مطلب به شما کمک میکنه که کدهای Html خودتون رو زیباتر کنید که هم به خوندنش کمک میکنه و هم مستند سازی داخل کدهاتون بهتر میشه.

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

نوشتن کد های html مفهومی این امکان رو به شما میده که اگر خواستید قسمتی به کدهاتون اضافه کنید خواندنش راحت تر باشه یا اینکه اگر مشکلی پیش اومد راحتتر دیباگ کنید و همچنین میتونه به سئوی سایت شما کمک کنه.

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

تگ Main

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

نکته ای که در مورد تگ Main وجود داره اینه که باید در هر صفحه ی Html فقط یک بار نوشته شود همچنین نباید داخل تگ های Header و Footer و Aside و Section و Navbar استفاده شود. (در ادامه با این تگ ها بیشتر آشنا می شویم.)

در قسمت زیر مثالی از تگ main نوشته شده است:

    <main>
        <h1>بررسی تگ های اچ تی ام ال</h1>
        <p>در این مطلب 9 تا از تگ های جایگزین div بررسی می شود.</p>
    </main>

تگ Section

تگ section برای گروه های محتوایی مستقل به کار برده می شود تگ های section میتوانند در صفحه چندین بار استفاده شوند همچنین هر تگ Section ممکن است دارای تگ های Header و Footer باشد. نکته ای که در مورد تگ Section وجود دارد این است که بهتر است یکی از تگ های Heading که بین H1 تا H6 هستند را درون آنها قرار داد.

مثالی در مورد کارکرد تگ Section  :

    <main>

        <section id="review">
            <h1>در مورد تگ سکشن</h1>
            <p>توضیحاتی در مورد تگ سکشن</p>
        </section>

        <section id="history">
            <h1>تاریخچه اچ تی ام ال</h1>
            <p>توضیحاتی در مورد تاریخچه اچ تی ام ال</p>
        </section>

    </main>

تگ Article

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

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

    <main>
        <article>
            <p>
                مقاله ای در مورد تگ های مفهومی اچ تی ام ال
            </p>
        </article>
    </main>

تگ Aside

تگ aside به طور کلی برای مشخص کردن یک محتوایی که مربوط به یک محتوای دیگر است استفاده می شود و معمولا این اتفاق در تگ Section یا Article رخ می دهد. تگ aside به صورت معمول به عنوان ساید بار یا Sidebar استفاده می شود.

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

مثالی در مورد کارکرد تگ Aside :

    <main>
        <article>
            <p>
                مقاله ای در مورد تگ های مفهومی اچ تی ام ال
            </p>
            <aside id="timeline">
                <p>در مورد اچ تی ام ال 5</p>
                <p>در مورد اچ تی ام ال 4</p>
            </aside>
        </article>
    </main>

تگ BlockQoute

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

معمولا تگ blockqoute به همراه تگ cite استفاده می شود . تگ cite به منبع این نقل قول اشاره میکند. (تگ cite را با ویژگی cite خود تگ blockqoute اشتباه نگیرید ، ویژگی cite فقط url میپذیرد).

در این قسمت مثالی از تگ blockqoute را میبینیم :

    <main>
        <blockquote>
            Don’t compare yourself with anyone in this world…if you do so, you are insulting yourself.
        </blockquote>
        <cite>Bill Gates</cite>
    </main>

تگ Nav

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

مثالی از تگ Nav :

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    
    <main>
        <h1>درباره ی سایت درنام</h1>
        <p>مقالات آموزشی سایت درنام</p>
    </main>

تگ Header

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

داخل تگ Header معمولا از تگ های Heading، لوگو، آیکن یا اطلاعات نویسنده (برای تگ Article) استفاده می شود.

نکته ای که باید به آن توجه کنیم این است که در یک صفحه ی Html میتونیم چندین تگ Header داشته باشیم ولی نمیتوانیم تگ Header را داخل تگ Footer  و تگ Address استفاده کنیم همچنین استفاده از تگ header داخل تگ header دیگر ممنوع است.

مثالی از تگ Header :

    <main>
        <article>
            <header>
                <h1>تگ هدر به چه معناست؟</h1>
                <p>تویسنده : شخص</p>
            </header>
            <p>توضیحاتی در مورد تگ هدر</p>
        </article>
    </main>

تگ Footer

تگ footer بخش پایینی تگ article یا تگ section یا کلا هر صفحه ی Html را مشخص میکند.معمولا در تگ footer اطلاعات تماس و کپی رایت قرار میگیرد همچنین میتونه شامل خلاصه ای از قسمت " درباره ی ما" سایت باشد.

مثالی از تگ Footer :

    <main>
        <h1>something</h1>
    </main>

    <footer>
        <p>تمامی حقوق محفوظ است</p>
        <p>ارتباط با ما از طریق فرم تماس با ما</p>
        <a href="https://dornam.com/contact-us">تماس با ما</a>
    </footer>

تگ Figure

تگ figure محتوای مستقلی را نمایش میدهد که میتونه شامل تصویر یا نمودار باشد. تگ figure با محتوای اصلی صفحه در ارتباط است ولی به این مفهوم نیست که محتوای اصلی صفحه به آن وابسته است. این تگ مفهوم مستقل دارد و اگر حذف شود نباید تاثیری بر روی محتوای اصلی صفحه داشته باشد.

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

استفاده از تگ figcaption اختیاری است که در زیر برای تگ img عنوانی را در نظر گرفته ایم :

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>در مورد ساختار اچ تی ام ال</figcaption>
</figure>

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