×

Cách sử dụng thẻ <address> để hiển thị địa chỉ liên hệ trong HTML

Avatar of admin
admin 3 Views

Khi xây dựng một trang web, việc cung cấp thông tin liên hệ rõ ràng và dễ tìm thường là một yêu cầu quan trọng. Một trong những cách hiệu quả để làm điều này là sử dụng thẻ <address> trong HTML. Thẻ này được thiết kế đặc biệt để hiển thị thông tin liên hệ của một cá nhân hoặc tổ chức. Trong bài viết này, chúng ta sẽ đi sâu vào cách sử dụng thẻ <address> để cung cấp thông tin một cách tối ưu.

Tổng Quan Về Thẻ <address>

Thẻ <address> được sử dụng để đánh dấu thông tin liên hệ liên quan đến tài liệu HTML mà nó nằm trong đó. Mặc dù tên thẻ khiến nhiều người nghĩ rằng nó chỉ dành riêng cho các địa chỉ vật lý nhưng thực tế, thẻ này cũng có thể chứa các thông tin khác như số điện thoại, địa chỉ email, và cả liên kết đến các trang mạng xã hội.

Cú Pháp Cơ Bản

Cách sử dụng thẻ <address> rất đơn giản và dễ hiểu. Dưới đây là một ví dụ cơ bản về cách thức hoạt động:

<address>
  Công ty ABC<br>
  123 Đường XYZ,<br>
  Quận 1, TP. Hồ Chí Minh<br>
  Điện thoại: (012) 345-6789<br>
  Email: contact@abc.com
</address>

Trong ví dụ này, thông tin liên hệ bao gồm tên công ty, địa chỉ vật lý, số điện thoại và email.

Các Thực Hành Tốt Trong Sử Dụng

  1. Sử dụng thẻ <address> ở những nơi phù hợp: Thẻ <address> thường được dùng ở phần chân trang (footer) của một trang web hoặc ở phần liên hệ. Nó giúp người dùng dễ dàng tìm thấy thông tin liên lạc.

  2. Đảm bảo định dạng rõ ràng: Việc sử dụng thẻ <br> để ngắt dòng giúp định dạng thông tin trở nên rõ ràng và dễ đọc hơn.

  3. Kết hợp với các thẻ khác: Nếu cần, bạn có thể kết hợp thẻ <address> với các thẻ HTML khác. Dưới đây là một ví dụ về việc kết hợp nó với thẻ <a> để cung cấp liên kết hữu ích:

<address>
  Liên hệ chúng tôi:<br>
  456 Đường Lê Lợi,<br>
  Đà Nẵng<br>
  <a href="tel:+84987654321">+84 987 654 321</a><br>
  <a href="mailto:support@xyz.com">support@xyz.com</a>
</address>

Tính Khả Dụng

Thẻ <address> không chỉ hữu ích về mặt trình bày mà còn có lợi cho SEO. Đây là một tín hiệu cho các công cụ tìm kiếm rằng thông tin liên hệ là một phần chính thức và quan trọng của trang web.

Ví Dụ Nâng Cao

Bạn cũng có thể kết hợp CSS để tùy chỉnh giao diện của thẻ <address> cho trang web của mình:

<style>
  address {
    font-style: normal;
    color: #333;
  }

  address a {
    color: #0066cc;
    text-decoration: none;
  }

  address a:hover {
    text-decoration: underline;
  }
</style>

<address>
  Công ty XYZ<br>
  789 Đường ABC,<br>
  Hà Nội<br>
  <a href="tel:+84912345678">+84 912 345 678</a><br>
  <a href="mailto:info@xyz.com">info@xyz.com</a>
</address>

Kết Luận

Sử dụng thẻ <address> là một cách hiệu quả và trực quan để trình bày thông tin liên hệ trên trang web của bạn. Nó không chỉ giúp người dùng dễ dàng tìm thấy thông tin mà còn cải thiện tính khả dụng và hiệu quả SEO của trang web. Với những hướng dẫn trên, bạn đã có trong tay tất cả các kỹ năng cần thiết để tận dụng thẻ <address> một cách tối ưu.

Comments

Bài viết liên quan