HTML5 การใช้งาน address Tag

แท็ก <address> ใน HTML5 ใช้สำหรับการกำหนดข้อมูลติดต่อของผู้เขียนหรือเจ้าของเอกสารหรือบทความ ซึ่งข้อมูลที่อยู่ภายในแท็ก <address> มักเป็นข้อมูลที่เกี่ยวข้องกับรายละเอียดการติดต่อ เช่น อีเมล ที่อยู่ เบอร์โทรศัพท์ หรือ URL ของเว็บไซต์

คุณสมบัติหลักของแท็ก <address>

1. การใช้งานเชิงความหมาย (Semantic Meaning): แท็ก <address> ให้ความหมายที่เข้าใจได้แก่เนื้อหา ซึ่งเมื่อ Screen Reader หรือเครื่องมือค้นหา (Search Engine) ทำการอ่านโค้ด HTML ก็จะเข้าใจได้ว่าเนื้อหาภายในแท็ก <address> เกี่ยวข้องกับข้อมูลการติดต่อของผู้เขียนหรือเจ้าของเนื้อหา
2. การใช้งานตามที่ตั้งใจไว้: แท็ก <address> ควรใช้เพื่อระบุรายละเอียดการติดต่อของผู้เขียนหรือเจ้าของเนื้อหาเท่านั้น ไม่ควรใช้เพื่อแสดงที่อยู่ทั่วไป เว้นแต่ว่าที่อยู่นั้นเกี่ยวข้องกับเจ้าของหรือผู้เขียนเอกสาร
3. รูปแบบการแสดงผล (Default Style): โดยปกติแล้วเนื้อหาภายในแท็ก <address> จะแสดงผลเป็นตัวเอียง (italic) แต่สามารถปรับแต่งรูปแบบได้ด้วย CSS

ตัวอย่างการใช้งาน

<address>
    ข้อมูลติดต่อแสดงไว้ที่นี่
</address>

รูปแบบการใช้งานของแท็ก <address>

ข้อมูลการติดต่อส่วนตัว

สามารถใช้แท็ก <address> เพื่อให้ข้อมูลติดต่อส่วนตัวที่ส่วนล่างของหน้าเพจหรือบทความ

ตัวอย่าง

<address>
    เขียนโดย นางสาวสมหญิง ตัวอย่าง<br>
    คุณสามารถติดต่อได้ที่ <a href="mailto:[email protected]">[email protected]</a>
</address>

ข้อมูลบริษัท

แท็ก <address> สามารถใช้เพื่อแสดงรายละเอียดการติดต่อของบริษัทในส่วนท้ายของเว็บไซต์

ตัวอย่าง

<address>
    บริษัท ABC จำกัด<br>
    1234 ถนนหลัก, กรุงเทพฯ 10110<br>
    โทร: 02-123-4567<br>
    อีเมล: <a href="mailto:[email protected]">[email protected]</a>
</address>

ข้อมูลการติดต่อในบทความหรือโพสต์ในบล็อก

เราสามารถแสดงข้อมูลติดต่อของผู้เขียนในบทความหรือโพสต์ในบล็อกได้

ตัวอย่าง

<article>
    <h1>ความเข้าใจเกี่ยวกับ HTML5 Semantics</h1>
    <p>...</p>
    <address>
        เขียนโดย นายสมชาย ตัวอย่าง<br>
        ติดต่อ: <a href="mailto:[email protected]">[email protected]</a>
    </address>
</article>

การใช้งานในส่วนท้ายของหน้าเว็บ

หลายเว็บไซต์ใช้แท็ก <address> ในส่วนท้ายของเว็บไซต์เพื่อให้ข้อมูลการติดต่อกับผู้ใช้งานหรือเจ้าของเว็บไซต์

ตัวอย่าง

<footer>
    <address>
        เว็บไซต์นี้ดูแลโดย <a href="mailto:[email protected]">[email protected]</a>.<br>
        เยี่ยมชมเราได้ที่ 789 ถนนใหญ่, กรุงเทพฯ 10200<br>
        หรือโทร 02-987-6543
    </address>
</footer>

ตัวอย่างการใช้งานที่ไม่ถูกต้อง (หลีกเลี่ยงการใช้ผิดวิธี)

ไม่ควรใช้แท็ก <address> เพื่อระบุที่อยู่สถานที่ทั่วไป เช่น ที่ตั้งร้านค้า หรือสถานที่ประชุม โดยไม่เกี่ยวข้องกับผู้เขียนหรือเจ้าของเอกสาร

ตัวอย่างที่ไม่ถูกต้อง

<address>
    พบกันที่ 500 ถนนบางรัก, กรุงเทพฯ
</address>

ในกรณีนี้ ควรใช้แท็ก <p> หรือแท็กอื่น ๆ แทน เพื่อแสดงที่อยู่ดังกล่าว เพราะแท็ก <address> ควรใช้กับข้อมูลติดต่อของผู้เขียนหรือเจ้าของเว็บไซต์เท่านั้น

สรุป

แท็ก <address> ใน HTML5 เป็นเครื่องมือที่ใช้ในการกำหนดข้อมูลการติดต่อของบทความหรือเว็บไซต์ ช่วยเพิ่มความสามารถในการเข้าถึงของเว็บไซต์และช่วยปรับปรุง SEO ให้หน้าเว็บไซต์มีความหมายที่ชัดเจนมากขึ้น