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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)

آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)

15م مرداد 1404

مطالعه بیشتر

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

29م مهر 1403

مطالعه بیشتر

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

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

21م مرداد 1402

مطالعه بیشتر

استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع

استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع

9م آبان 1403

مطالعه بیشتر

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

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

10م شهریور 1402

مطالعه بیشتر

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

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

3م آبان 1403

مطالعه بیشتر

استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

16م آبان 1403

مطالعه بیشتر

استفاده از overflow در CSS برای مدیریت محتوای اضافی: راهنمای کامل و کاربردی

استفاده از overflow در CSS برای مدیریت محتوای اضافی: راهنمای کامل و کاربردی

11م آبان 1403

مطالعه بیشتر

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

10م شهریور 1402

مطالعه بیشتر

آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed

آموزش موقعیت‌بندی المان‌ها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed

5م شهریور 1402

مطالعه بیشتر

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

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

11م آبان 1403

مطالعه بیشتر

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

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

2م آبان 1403

مطالعه بیشتر

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