دسته : آموزش رایگان 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 هستند. این تگها نه تنها باعث بهبود تجربه کاربری میشوند، بلکه با رعایت استانداردهای گوگل به بهبود سئو و دسترسیپذیری صفحات وب نیز کمک میکنند. با استفاده صحیح از این تگها، میتوانید صفحات حرفهایتر و بهینهتری طراحی کنید.
نظری یافت نشد
آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)
15م مرداد 1404
مطالعه بیشتر
مفاهیم پیشرفته در کلاسها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثالها
29م مهر 1403
مطالعه بیشتر
راهنمای کامل جداول HTML: آموزش ساخت و بهینهسازی سئو
21م مرداد 1402
مطالعه بیشتر
استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع
9م آبان 1403
مطالعه بیشتر
آموزش ترانزیشنها و انیمیشنهای نرم با CSS: ایجاد افکتهای پویا و واکنشگرا
10م شهریور 1402
مطالعه بیشتر
آموزش کار با رویدادهای فرم و اعتبارسنجی فرمها در جاوا اسکریپت: راهنمای جامع
3م آبان 1403
مطالعه بیشتر
استفاده از font face در CSS برای اضافه کردن فونتهای سفارشی: راهنمای کامل
16م آبان 1403
مطالعه بیشتر
استفاده از overflow در CSS برای مدیریت محتوای اضافی: راهنمای کامل و کاربردی
11م آبان 1403
مطالعه بیشتر
آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child
10م شهریور 1402
مطالعه بیشتر
آموزش موقعیتبندی المانها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed
5م شهریور 1402
مطالعه بیشتر
ایجاد Layoutهای واکنشگرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع
11م آبان 1403
مطالعه بیشتر
آموزش دسترسی به المانهای HTML با استفاده از جاوا اسکریپت: راهنمای کامل با مثالها
2م آبان 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد