دسته : آموزش رایگان 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 هستند. این تگها نه تنها باعث بهبود تجربه کاربری میشوند، بلکه با رعایت استانداردهای گوگل به بهبود سئو و دسترسیپذیری صفحات وب نیز کمک میکنند. با استفاده صحیح از این تگها، میتوانید صفحات حرفهایتر و بهینهتری طراحی کنید.
نظری یافت نشد
نصب Node.js و Create React App: شروع پروژههای React.js بهصورت آسان
28م شهریور 1402
مطالعه بیشتر
الگوهای رایج برنامهنویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثالها
1م آبان 1403
مطالعه بیشتر
مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان
28م شهریور 1402
مطالعه بیشتر
مقدمهای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان
4م شهریور 1402
مطالعه بیشتر
Async/Await: نوشتن کدهای خواناتر و ناهمزمان در جاوا اسکریپت - آموزش کامل با مثالها
30م مهر 1403
مطالعه بیشتر
آشنایی با Inheritance در CSS: اصول وراثت و مدیریت استایلها
12م آبان 1403
مطالعه بیشتر
تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثالها
30م مهر 1403
مطالعه بیشتر
آموزش ایجاد و حذف المانهای DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی
2م آبان 1403
مطالعه بیشتر
آموزش کار با Local Storage و Session Storage در جاوا اسکریپت: ذخیرهسازی دادهها در مرورگر
3م آبان 1403
مطالعه بیشتر
آموزش استایلدهی لینکها در CSS: طراحی و تنظیمات ساده برای لینکهای HTML
7م شهریور 1402
مطالعه بیشتر
آموزش مفاهیم پایهای اشیاء در جاوا اسکریپت: تعریف، ویژگیها و متدها
2م شهریور 1403
مطالعه بیشتر
مقدمهای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی
4م آبان 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد