آموزش رایگان HTML

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

29م مرداد 1402 محراب حسن زاده
آموزش تگ‌های زمان و مکان در HTML: استفاده از time و location در صفحات وب

HTML ابزارهای متعددی برای نمایش اطلاعات مرتبط با زمان و مکان فراهم می‌کند. تگ‌های < time > و < address > از جمله این ابزارها هستند که علاوه بر ارتقای خوانایی صفحات وب، به موتورهای جستجو نیز کمک می‌کنند تا محتوای سایت را بهتر درک کنند. در این مقاله، با نحوه استفاده از این تگ‌ها و استانداردهای گوگل برای بهینه‌سازی آن‌ها آشنا می‌شویم.

 

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

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

ساختار پایه تگ < time >



< time datetime="2024-11-22" > ۲۲ نوامبر ۲۰۲۴ < / time >

 

ویژگی‌های مهم تگ < time >

datetime:

مشخص‌کننده مقدار دقیق زمان یا تاریخ در قالبی قابل درک برای مرورگرها.

فرمت ISO 8601 استفاده می‌شود.



< time datetime="2024-11-22T14:30" > ۲۲ نوامبر ۲۰۲۴، ساعت ۱۴:۳۰ < / time >

 

محتوای قابل مشاهده:

متنی که بین تگ باز و بسته قرار می‌گیرد، برای نمایش به کاربران استفاده می‌شود.

 

کاربردهای تگ < time >

نمایش تاریخ انتشار محتوا:



< p > تاریخ انتشار: < time datetime="2024-11-22" > ۲۲ نوامبر ۲۰۲۴ < / time > < / p >

 

نمایش زمان رویداد:



< p > زمان شروع: < time datetime="2024-11-22T14:30" > ۲۲ نوامبر ۲۰۲۴، ساعت ۱۴:۳۰ < / time > < / p >

 

نمایش مدت زمان:



< p > مدت زمان مطالعه: < time datetime="PT5M" > ۵ دقیقه < / time > < / p >

 

تگ < address >: نمایش اطلاعات مکانی

تگ < address > برای نمایش اطلاعات تماس یا آدرس مکانی مرتبط با صفحه استفاده می‌شود. این تگ معمولاً برای نمایش آدرس‌های فیزیکی، ایمیل یا اطلاعات تماس استفاده می‌شود.

ساختار پایه تگ < address >



< address >
    < p > تهران، خیابان آزادی، پلاک ۱۰ < / p >
    < p > ایمیل: < a href="mailto:info@example.com" > info@example.com < / a > < / p >
< / address >

 

ویژگی‌های تگ < address >

محتوای قابل انعطاف:

می‌تواند شامل متن، لینک‌ها، شماره تلفن و ایمیل باشد.



< address >
    شماره تلفن: < a href="tel:+982112345678" > +۹۸ ۲۱ ۱۲۳۴ ۵۶۷۸ < / a >
< / address >

 

نمایش اطلاعات مربوط به نویسنده:

معمولاً در بخش‌های پایین صفحات (footer) برای نمایش اطلاعات تماس استفاده می‌شود.

 

کاربردهای تگ < address >

نمایش اطلاعات تماس شرکت یا نویسنده:



< footer >
    < address >
        تهران، خیابان ولیعصر، پلاک ۵۰
        < br >
        ایمیل: < a href="mailto:contact@example.com" > contact@example.com < / a >
        < br >
        تلفن: < a href="tel:+982112345678" > +۹۸ ۲۱ ۱۲۳۴ ۵۶۷۸ < / a >
    < / address >
< / footer >

 

نمایش اطلاعات مکانی در نقشه: می‌توانید از تگ < address > برای مشخص کردن آدرس مکانی که در یک نقشه نمایش داده می‌شود استفاده کنید.

 

ترکیب تگ‌های < time > و < address >

می‌توانید این دو تگ را در کنار هم استفاده کنید تا اطلاعات زمان و مکان را در یک ساختار مشخص ارائه دهید.

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



< section >
    < h2 > جزئیات رویداد < / h2 >
    < p > تاریخ برگزاری: < time datetime="2024-11-22T14:30" > ۲۲ نوامبر ۲۰۲۴، ساعت ۱۴:۳۰ < / time > < / p >
    < address >
        محل برگزاری: سالن همایش‌های بین‌المللی، تهران
        < br >
        تلفن تماس: < a href="tel:+982112345678" > +۹۸ ۲۱ ۱۲۳۴ ۵۶۷۸ < / a >
    < / address >
< / section >

 

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

  • استفاده از datetime در < time >:

    مقدار datetime باید دقیق و مطابق استاندارد ISO 8601 باشد.

  • استفاده از تگ < address > برای اطلاعات واقعی:

    مطمئن شوید که اطلاعات نمایش داده‌شده در تگ < address > دقیق و مرتبط با محتوای صفحه باشد.

  • اضافه کردن لینک‌های کاربردی:

    از لینک‌های ایمیل (mailto:) و تلفن (tel:) در < address > استفاده کنید تا دسترسی کاربران آسان‌تر شود.

  • هماهنگی با دسترسی‌پذیری (Accessibility):

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

 

نمونه کد کامل



< ! 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, time, address, تگ زمان, تگ مکان, آموزش HTML" >
    < meta name="author" content="نام شما" >
    < title > آموزش تگ‌های زمان و مکان در HTML < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        section {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        address {
            font-style: normal;
            line-height: 1.4;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش تگ‌های زمان و مکان در HTML < / h1 >
    < / header >
    < main >
        < section >
            < h2 > مثال تگ < code > time < / code > < / h2 >
            < p > این رویداد در تاریخ زیر برگزار می‌شود: < / p >
            < time datetime="2024-11-22T14:30" > ۲۲ نوامبر ۲۰۲۴، ساعت ۱۴:۳۰ < / time >
        < / section >
        < section >
            < h2 > مثال تگ < code > address < / code > < / h2 >
            < p > محل برگزاری رویداد: < / p >
            < address >
                سالن همایش‌های بین‌المللی، تهران
                < br >
                ایمیل: <  a href="mailto:info@example.com" > info@example.com < / a>
                < br >
                تلفن: <  a href="tel:+982112345678" > +۹۸ ۲۱ ۱۲۳۴ ۵۶۷۸ < / a>
            < / address >
        < / section >
        < section >
            < h2 > نمونه ترکیبی < / h2 >
            < p > برای شرکت در رویداد: < / p >
            < p > تاریخ: < time datetime="2024-11-22T14:30" > ۲۲ نوامبر ۲۰۲۴، ساعت ۱۴:۳۰ < / time > < / p >
            < address >
                محل: سالن همایش‌های بین‌المللی، تهران
                < br >
                ایمیل: < a href="mailto:info@example.com" > info@example.com < / a >
                < br >
                تلفن: < a href="tel:+982112345678" > +۹۸ ۲۱ ۱۲۳۴ ۵۶۷۸ < / a >
            < / address >
        < / section >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >

 

جمع‌بندی

تگ‌های < time > و < address > ابزارهای قدرتمندی برای نمایش اطلاعات زمان و مکان در HTML هستند. این تگ‌ها نه تنها باعث بهبود تجربه کاربری می‌شوند، بلکه با رعایت استانداردهای گوگل به بهبود سئو و دسترسی‌پذیری صفحات وب نیز کمک می‌کنند. با استفاده صحیح از این تگ‌ها، می‌توانید صفحات حرفه‌ای‌تر و بهینه‌تری طراحی کنید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر
5م شهریور 1402

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

مطالعه بیشتر
آموزش توسعه و مدیریت پروژه‌های بزرگ در جاوا اسکریپت: آشنایی با ابزارها و فریم‌ورک‌های کاربردی
4م آبان 1403

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

مطالعه بیشتر
آشنایی با Inheritance در CSS: اصول وراثت و مدیریت استایل‌ها
12م آبان 1403

آشنایی با Inheritance در CSS: اصول وراثت و مدیریت استایل‌ها

مطالعه بیشتر
آموزش جامع توابع بازگشتی (Recursion) و کاربردهای آن در جاوا اسکریپت: مثال‌ها و مفاهیم
29م مهر 1403

آموزش جامع توابع بازگشتی (Recursion) و کاربردهای آن در جاوا اسکریپت: مثال‌ها و مفاهیم

مطالعه بیشتر
استفاده از Viewports و Viewport Units در CSS: طراحی واکنش‌گرا با vw، vh، vmin و vmax
16م آبان 1403

استفاده از Viewports و Viewport Units در CSS: طراحی واکنش‌گرا با vw، vh، vmin و vmax

مطالعه بیشتر
معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان
1م آبان 1403

معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان

مطالعه بیشتر
استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف
12م آبان 1403

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

مطالعه بیشتر
Async/Await: نوشتن کدهای خواناتر و ناهم‌زمان در جاوا اسکریپت - آموزش کامل با مثال‌ها
30م مهر 1403

Async/Await: نوشتن کدهای خواناتر و ناهم‌زمان در جاوا اسکریپت - آموزش کامل با مثال‌ها

مطالعه بیشتر
آموزش استفاده از cubic-bezier در CSS برای انیمیشن‌های سفارشی و حرفه‌ای
12م آبان 1403

آموزش استفاده از cubic-bezier در CSS برای انیمیشن‌های سفارشی و حرفه‌ای

مطالعه بیشتر
آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی
4م آبان 1403

آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی

مطالعه بیشتر
چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی
2م شهریور 1403

چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

مطالعه بیشتر
آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی
23م مرداد 1402

آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد