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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

نصب Node.js و Create React App: شروع پروژه‌های React.js به‌صورت آسان

نصب Node.js و Create React App: شروع پروژه‌های React.js به‌صورت آسان

28م شهریور 1402

مطالعه بیشتر

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

1م آبان 1403

مطالعه بیشتر

مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان

مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان

28م شهریور 1402

مطالعه بیشتر

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

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

4م شهریور 1402

مطالعه بیشتر

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

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

30م مهر 1403

مطالعه بیشتر

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

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

12م آبان 1403

مطالعه بیشتر

تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثال‌ها

تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثال‌ها

30م مهر 1403

مطالعه بیشتر

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

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

2م آبان 1403

مطالعه بیشتر

آموزش کار با Local Storage و Session Storage در جاوا اسکریپت: ذخیره‌سازی داده‌ها در مرورگر

آموزش کار با Local Storage و Session Storage در جاوا اسکریپت: ذخیره‌سازی داده‌ها در مرورگر

3م آبان 1403

مطالعه بیشتر

آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML

آموزش استایل‌دهی لینک‌ها در CSS: طراحی و تنظیمات ساده برای لینک‌های HTML

7م شهریور 1402

مطالعه بیشتر

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

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

2م شهریور 1403

مطالعه بیشتر

مقدمه‌ای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی

مقدمه‌ای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی

4م آبان 1403

مطالعه بیشتر

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