آموزش استفاده از تگ‌های خاص HTML: تگ‌های کاربردی برای طراحی وب‌سایت

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

تگ < details > و < summary >: نمایش اطلاعات قابل گسترش

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

نمونه کد:

< details >
    < summary > بیشتر بدانید < / summary >
    < p > این بخش شامل اطلاعات اضافی است که کاربر می‌تواند آن را مشاهده کند. < / p >
< / details >

کاربرد:

• نمایش FAQ (سوالات متداول).

• مخفی کردن جزئیات اضافی در صفحات.

تگ < mark >: برجسته کردن متن

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

نمونه کد:

< p > این یک متن است که < mark > قسمتی از آن برجسته شده است < / mark > .< / p >

کاربرد:

• تاکید بر کلمات کلیدی.

• نمایش نتایج جستجو.

تگ < time >: نمایش زمان یا تاریخ

تگ < time > برای نمایش زمان یا تاریخ به شکلی معنایی استفاده می‌شود. این تگ به موتورهای جستجو و مرورگرها کمک می‌کند تاریخ‌ها را بهتر درک کنند.

نمونه کد:

< p > آخرین به‌روزرسانی: < time datetime="2024-11-22" > ۲۲ نوامبر ۲۰۲۴ < / time > < / p >

کاربرد:

• نمایش تاریخ‌های انتشار.

• مشخص کردن زمان رویدادها.

تگ < progress >: نمایش پیشرفت یک فعالیت

تگ < progress > برای نمایش میزان پیشرفت یک فرآیند استفاده می‌شود. این تگ یک نوار پیشرفت ساده نمایش می‌دهد.

نمونه کد:

< progress value="70" max="100" > 70% < / progress >

کاربرد:

• نمایش وضعیت بارگذاری.

• نشان دادن پیشرفت یک پروژه.

تگ < meter >: نمایش مقدار در یک محدوده

تگ < meter > برای نمایش مقدار در یک محدوده خاص استفاده می‌شود.

نمونه کد:

< p > باتری: < meter value="0.6" min="0" max="1" > ۶۰% < / meter > < / p >

کاربرد:

• نمایش سطح باتری.

• نمایش امتیاز یا درصد.

تگ < figure > و < figcaption >: نمایش تصاویر با توضیحات

تگ < figure > برای گروه‌بندی محتوای تصویری و متنی استفاده می‌شود. توضیحات مربوط به تصویر با تگ < figcaption > نمایش داده می‌شود.

نمونه کد:

< figure >
    < img src="image.jpg" alt="تصویری از طبیعت" >
    < figcaption > این تصویر طبیعت زیبا را نشان می‌دهد. < / figcaption >
< / figure >

کاربرد:

• نمایش تصاویر با توضیحات مرتبط.

• گالری‌های تصویری.

تگ < code >: نمایش کد برنامه‌نویسی

تگ < code > برای نمایش کد برنامه‌نویسی به کار می‌رود.

نمونه کد:

< p >برای ایجاد یک تگ HTML از < code > <tag> < / code > استفاده کنید. < / p >

کاربرد:

• نمایش کدهای نمونه در مقالات آموزشی.

• مستندسازی برنامه‌ها.

تگ < kbd >: نمایش ورودی از صفحه‌کلید

تگ < kbd > برای نمایش ورودی‌هایی که کاربران از صفحه‌کلید وارد می‌کنند استفاده می‌شود.

نمونه کد:

< p > برای کپی کردن، کلید < kbd > Ctrl + C < / kbd > را فشار دهید. < / p >

کاربرد:

• آموزش میانبرهای صفحه‌کلید.

• مستندات فنی.

تگ < blockquote >: نقل قول طولانی

تگ < blockquote > برای نمایش نقل‌قول‌های طولانی همراه با ذکر منبع استفاده می‌شود.

نمونه کد:

< blockquote cite="https://example.com" >
    این یک نقل قول است که از یک منبع معتبر آورده شده است.
< / blockquote >

کاربرد:

• نقل قول از منابع معتبر.

• نمایش نظرات یا جملات معروف.

تگ < template >: الگوی محتوایی بدون نمایش

تگ < template > برای ذخیره محتوایی که در ابتدا نمایش داده نمی‌شود، استفاده می‌شود. این محتوا می‌تواند با جاوااسکریپت در صفحه استفاده شود.

نمونه کد:

< template id="myTemplate" >
    < p > این یک محتوای پنهان است که می‌توان آن را با جاوااسکریپت نمایش داد. < / p >
< / template >

کاربرد:

• ایجاد محتوای تکراری در برنامه‌های پویا.

• الگوهای آماده برای بارگذاری در صفحه.

نکات بهینه‌سازی بر اساس استانداردهای گوگل

• استفاده معنایی از تگ‌ها: از تگ‌های خاص در جایگاه مناسب خود استفاده کنید. این کار به بهبود دسترسی‌پذیری و SEO کمک می‌کند.

• دسترسی‌پذیری:

  • از توضیحات (مانند alt و aria-label) برای تگ‌هایی مانند < img > و < figure > استفاده کنید.

  • از تگ‌های < details > و < summary > برای محتوای قابل گسترش استفاده کنید.

• طراحی واکنش‌گرا: استایل تگ‌های خاص را با استفاده از CSS برای نمایش بهتر در دستگاه‌های مختلف بهینه کنید.

• کاهش بارگذاری: از تگ‌های مانند < template > برای مدیریت محتوای پویا استفاده کنید و از بارگذاری غیرضروری جلوگیری کنید.

نمونه کد ترکیبی

< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش تگ‌های خاص HTML" >
    < meta name="keywords" content="HTML, تگ‌های خاص, طراحی وب, آموزش HTML" >
    < meta name="author" content="نام شما" >
    < title > آموزش تگ‌های خاص HTML < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        figure {
            text-align: center;
            margin: 20px 0;
        }
        blockquote {
            font-style: italic;
            margin: 20px;
            padding: 10px;
            border-left: 5px solid #ccc;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش تگ‌های خاص HTML < / h1 >
    < / header >
    < main >
        < section >
            < h2 > نمونه‌هایی از تگ‌های خاص < / h2 >
            < details >
                < summary > اطلاعات بیشتر < / summary >
                < p > این متن تنها در صورت کلیک نمایش داده می‌شود. < / p >
            < / details >
            < p > مثال استفاده از تگ برجسته: < mark > این متن برجسته شده است. < / mark > < / p >
            < figure >
                < img src="image.jpg" alt="نمونه تصویر" >
                < figcaption > نمونه تصویر با توضیح < / figcaption >
            < / figure >
            < blockquote cite="https://example.com" >
                این یک نقل قول از منبع معتبر است.
            < / blockquote >
            < p > نمونه کد: < code > <html>...</html> < / code > < / p >
            < p > میانبر صفحه‌کلید: < kbd > Ctrl + S < / kbd > < / p >
        < / section >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >

جمع‌بندی

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