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

دسته : آموزش رایگان HTML

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

آموزش تگ‌های زمان و مکان در 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 هستند. این تگ‌ها نه تنها باعث بهبود تجربه کاربری می‌شوند، بلکه با رعایت استانداردهای گوگل به بهبود سئو و دسترسی‌پذیری صفحات وب نیز کمک می‌کنند. با استفاده صحیح از این تگ‌ها، می‌توانید صفحات حرفه‌ای‌تر و بهینه‌تری طراحی کنید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

2م مهر 1402

مطالعه بیشتر

آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق

آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق

12م آبان 1403

مطالعه بیشتر

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

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

29م مرداد 1402

مطالعه بیشتر

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

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

18م مرداد 1402

مطالعه بیشتر

ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع

ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع

11م آبان 1403

مطالعه بیشتر

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

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

2م شهریور 1403

مطالعه بیشتر

آموزش اضافه کردن ویدئو و صدا به وب‌سایت: نحوه استفاده از تگ‌های video و audio در HTML

آموزش اضافه کردن ویدئو و صدا به وب‌سایت: نحوه استفاده از تگ‌های video و audio در HTML

23م مرداد 1402

مطالعه بیشتر

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

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

10م شهریور 1402

مطالعه بیشتر

مقدمه‌ای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان

مقدمه‌ای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان

4م شهریور 1402

مطالعه بیشتر

مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثال‌های عملی

مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثال‌های عملی

30م مهر 1403

مطالعه بیشتر

آموزش ساخت یک برنامه ساده با Fetch API در جاوا اسکریپت: راهنمای گام به گام

آموزش ساخت یک برنامه ساده با Fetch API در جاوا اسکریپت: راهنمای گام به گام

1م آبان 1403

مطالعه بیشتر

آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

16م آبان 1403

مطالعه بیشتر

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