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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش تکنیک‌های پیشرفته CSS Grid: طراحی ساختارهای پیچیده و واکنش‌گرا

آموزش تکنیک‌های پیشرفته CSS Grid: طراحی ساختارهای پیچیده و واکنش‌گرا

18م شهریور 1402

مطالعه بیشتر

مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها

مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها

29م مهر 1403

مطالعه بیشتر

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

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

5م شهریور 1402

مطالعه بیشتر

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

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

1م آبان 1403

مطالعه بیشتر

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

28م شهریور 1402

مطالعه بیشتر

مقدمه‌ای به رویدادها و دستورات در Vue.js: نحوه مدیریت و استفاده از v-on

مقدمه‌ای به رویدادها و دستورات در Vue.js: نحوه مدیریت و استفاده از v-on

28م شهریور 1402

مطالعه بیشتر

مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی

مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی

11م آبان 1403

مطالعه بیشتر

آموزش استفاده از position در CSS: نحوه موقعیت‌دهی عناصر در صفحات وب

آموزش استفاده از position در CSS: نحوه موقعیت‌دهی عناصر در صفحات وب

9م آبان 1403

مطالعه بیشتر

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

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

4م آبان 1403

مطالعه بیشتر

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

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

11م آبان 1403

مطالعه بیشتر

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

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

29م مهر 1403

مطالعه بیشتر

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

2م شهریور 1403

مطالعه بیشتر

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