دسته : آموزش رایگان 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 هستند. این تگها نه تنها باعث بهبود تجربه کاربری میشوند، بلکه با رعایت استانداردهای گوگل به بهبود سئو و دسترسیپذیری صفحات وب نیز کمک میکنند. با استفاده صحیح از این تگها، میتوانید صفحات حرفهایتر و بهینهتری طراحی کنید.
نظری یافت نشد
آموزش انیمیشنهای پیشرفته با keyframes در CSS: طراحی حرکات پویا و چند مرحلهای
18م شهریور 1402
مطالعه بیشتر
آموزش مفاهیم اولیه CSS Grid Layout: طراحی شبکههای پیچیده و واکنشگرا راهنمای کامل
6م شهریور 1402
مطالعه بیشتر
آموزش ایجاد Transitions و انیمیشنهای صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب
16م آبان 1403
مطالعه بیشتر
آموزش ارثبری (Inheritance) در جاوا اسکریپت: نحوه استفاده از پروتوتایپها و کلاسها
28م مهر 1403
مطالعه بیشتر
نصب Vue.js و ایجاد پروژه ساده: آموزش گامبهگام راهاندازی Vue
28م شهریور 1402
مطالعه بیشتر
مقدمه و ساختار اولیه HTML: راهنمای شروع طراحی صفحات وب برای مبتدیان
18م مرداد 1402
مطالعه بیشتر
آموزش جامع توابع بازگشتی (Recursion) و کاربردهای آن در جاوا اسکریپت: مثالها و مفاهیم
29م مهر 1403
مطالعه بیشتر
آموزش رویدادهای پیشرفته در جاوا اسکریپت: بابلینگ، کپچرینگ و توقف پیشفرض - راهنمای جامع
2م آبان 1403
مطالعه بیشتر
آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگها و ایجاد افکتهای جذاب
12م آبان 1403
مطالعه بیشتر
مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان
28م شهریور 1402
مطالعه بیشتر
مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی
11م آبان 1403
مطالعه بیشتر
آموزش ایجاد تگهای صفحهبندی در HTML و CSS: طراحی و استایلدهی pagination
29م مرداد 1402
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد