آموزش و یادگیری تگ address در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، ياد مي‌گيريم تگ <address> چيست و چگونه براي نمايش اطلاعات تماس نويسنده يا مالک صفحه استفاده مي‌شود. اين تگ معمولاً در پايين صفحات وب يا در بخش «تماس با ما» کاربرد دارد.

تگ address در HTML چيست؟

تگ <address> براي نمايش اطلاعات تماس نويسنده، شرکت يا سازمان مرتبط با محتوا به کار مي‌رود. اين اطلاعات مي‌تواند شامل نام، آدرس پستي، شماره تلفن، ايميل يا لينک شبکه‌هاي اجتماعي باشد.

مرورگرها معمولاً محتواي داخل اين تگ را به صورت مورب (italic) نمايش مي‌دهند تا از ساير متن‌ها متمايز شود.

کاربردهاي تگ address در HTML

1. نمايش اطلاعات تماس نويسنده

در مثال زير اطلاعات تماس نويسنده يک وبلاگ نمايش داده شده است:

<address>
نويسنده: علي رضايي<br>
ايميل: <a href="mailto:ali@example.com">ali@example.com</a><br>
تلفن: <a href="tel:+989121234567">+98 912 123 4567</a>
</address>

در اين مثال با استفاده از تگ‌هاي <a>، لينک تماس و ايميل فعال ايجاد شده‌اند.

2. نمايش آدرس شرکت

در صفحات تجاري معمولاً از تگ <address> براي نمايش آدرس فيزيکي شرکت استفاده مي‌شود:

<address>
شرکت آموزش دون<br>
خيابان وليعصر، تهران، ايران<br>
کد پستي: 1234567890
</address>

3. استفاده همراه با لينک شبکه‌هاي اجتماعي

<address>
با ما در ارتباط باشيد:<br>
<a href="https://instagram.com/learndun" target="_blank">Instagram</a> |
<a href="https://t.me/learndun" target="_blank">Telegram</a>
</address>

در اينجا لينک‌هاي شبکه‌هاي اجتماعي در داخل تگ <address> آمده‌اند تا ارتباط مستقيم با برند فراهم شود.

نکات مهم در مورد تگ address

• تگ <address> نبايد براي هر نوع آدرس (مثل محل فروشگاه يا نقشه) استفاده شود؛ فقط براي معرفي نويسنده يا مالک محتواست.
• مي‌توانيد چندين تگ <address> در يک صفحه داشته باشيد، مثلاً براي چند نويسنده.
• مرورگرها به‌صورت پيش‌فرض متن اين تگ را مورب نمايش مي‌دهند، اما مي‌توانيد با CSS آن را تغيير دهيد.

استايل‌دهي به تگ address

با استفاده از CSS مي‌توانيد ظاهر اين بخش را زيباتر و حرفه‌اي‌تر کنيد:

<style>
address {
  font-style: normal;
  background-color: #f9f9f9;
  padding: 10px;
  border-left: 4px solid #2196f3;
  border-radius: 8px;
  line-height: 1.8;
}
</style>

<address>
تهيه و تنظيم توسط تيم <a href="https://learndun.ir">آموزش دون</a>
</address>

در اين مثال از پس‌زمينه روشن و حاشيه آبي براي ايجاد ظاهري زيبا و خوانا استفاده شده است.

صفات مهم تگ address

نمونه ترکيبي از address در پايين صفحه

<footer>
  <address>
  نوشته شده توسط تيم <a href="https://learndun.ir">آموزش دون</a><br>
  براي ارتباط با ما: <a href="mailto:info@learndun.ir">info@learndun.ir</a>
  </address>
</footer>

اين يکي از کاربردهاي رايج تگ <address> است که معمولاً در بخش فوتر (Footer) سايت قرار مي‌گيرد.

نکته: استفاده صحيح از تگ <address> باعث مي‌شود ساختار معنايي (Semantic) صفحه بهتر درک شود و در سئو مؤثرتر باشد.

براي يادگيري ساير تگ‌هاي معنايي در HTML مانند <article> و <footer>، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي دسترسي به ساير آموزش‌ها، به صفحه اصلي آموزش دون مراجعه کنيد.