دسته : آموزش رایگان HTML
HTML ابزارهای متعددی برای نمایش اطلاعات مرتبط با زمان و مکان فراهم میکند. تگهای < time > و < address > از جمله این ابزارها هستند که علاوه بر ارتقای خوانایی صفحات وب، به موتورهای جستجو نیز کمک میکنند تا محتوای سایت را بهتر درک کنند. در این مقاله، با نحوه استفاده از این تگها و استانداردهای گوگل برای بهینهسازی آنها آشنا میشویم.
تگ < time > برای نمایش اطلاعات مربوط به زمان یا تاریخ استفاده میشود. این تگ به مرورگرها و موتورهای جستجو کمک میکند که تاریخ یا زمان موجود در صفحه را به صورت معنایی درک کنند.
ساختار پایه تگ < time >
< time datetime="2024-11-22" > ۲۲ نوامبر ۲۰۲۴ < / time >
datetime:
مشخصکننده مقدار دقیق زمان یا تاریخ در قالبی قابل درک برای مرورگرها.
فرمت ISO 8601 استفاده میشود.
< time datetime="2024-11-22T14:30" > ۲۲ نوامبر ۲۰۲۴، ساعت ۱۴:۳۰ < / 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 >
< p > تهران، خیابان آزادی، پلاک ۱۰ < / p >
< p > ایمیل: < a href="mailto:info@example.com" > info@example.com < / a > < / p >
< / address >
ویژگیهای تگ < address >
محتوای قابل انعطاف:
میتواند شامل متن، لینکها، شماره تلفن و ایمیل باشد.
< address >
شماره تلفن: < a href="tel:+982112345678" > +۹۸ ۲۱ ۱۲۳۴ ۵۶۷۸ < / a >
< / address >
نمایش اطلاعات مربوط به نویسنده:
معمولاً در بخشهای پایین صفحات (footer) برای نمایش اطلاعات تماس استفاده میشود.
نمایش اطلاعات تماس شرکت یا نویسنده:
< footer >
< address >
تهران، خیابان ولیعصر، پلاک ۵۰
< br >
ایمیل: < a href="mailto:contact@example.com" > contact@example.com < / a >
< br >
تلفن: < a href="tel:+982112345678" > +۹۸ ۲۱ ۱۲۳۴ ۵۶۷۸ < / a >
< / address >
< / footer >
نمایش اطلاعات مکانی در نقشه: میتوانید از تگ < 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: تنظیم و قرارگیری تصاویر بهصورت دقیق
12م آبان 1403
مطالعه بیشتر
آموزش استفاده از تگهای تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب
29م مرداد 1402
مطالعه بیشتر
آموزش تگهای متنی اولیه در HTML: استایلدهی و قالببندی متنها
18م مرداد 1402
مطالعه بیشتر
ایجاد Layoutهای واکنشگرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع
11م آبان 1403
مطالعه بیشتر
آموزش مفاهیم پایهای اشیاء در جاوا اسکریپت: تعریف، ویژگیها و متدها
2م شهریور 1403
مطالعه بیشتر
آموزش اضافه کردن ویدئو و صدا به وبسایت: نحوه استفاده از تگهای video و audio در HTML
23م مرداد 1402
مطالعه بیشتر
آموزش ترانزیشنها و انیمیشنهای نرم با CSS: ایجاد افکتهای پویا و واکنشگرا
10م شهریور 1402
مطالعه بیشتر
مقدمهای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان
4م شهریور 1402
مطالعه بیشتر
مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثالهای عملی
30م مهر 1403
مطالعه بیشتر
آموزش ساخت یک برنامه ساده با Fetch API در جاوا اسکریپت: راهنمای گام به گام
1م آبان 1403
مطالعه بیشتر
آموزش ایجاد Transitions و انیمیشنهای صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب
16م آبان 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد