Eojin Han

<address> 태그의 사용 목적 예시 회사 전역의 연락처 (footer + address)footer에만 넣고 address를 쓸 필요 없는 경우

화면에 표시되는 것은 동일하다.

다만 html 문서를 작성한 사람의 연락처 정보를 표시하기 위해서 사용된다.

꾸미고 구성하는 것은 자유롭게 하면 됨.

`<address>` 태그의 사용 목적

저자나 관련 단체의 연락처 정보

이름, 이메일, 주소, 전화번호 등.

블로그 글, 기사, 웹사이트의 소유자 정보 등.

콘텐츠의 작성자나 단체가 누구인지 명시

이 태그는 콘텐츠가 작성된 사람 또는 단체를 나타냅니다.

페이지 전역 정보라면 웹사이트 소유자나 회사 정보, 특정 섹션의 경우 섹션의 작성자 정보.

접근성과 의미 부여

<address>를 사용하면 스크린리더나 검색엔진이 해당 내용을 "연락처 정보"로 이해합니다.

예시

페이지 전역의 연락처 정보


<footer>
  <address>
    <p>Contact us at:</p>
    <p>
      Email: <a href="mailto:support@website.com">support@website.com</a><br>
      Phone: <a href="tel:+1234567890">+1 (234) 567-890</a><br>
      Address: 123 Web Street, Coding City, DevLand
    </p>
  </address>
</footer>

블로그 글 작성자 정보


<article>
  <h1>Understanding HTML Semantics</h1>
  <p>This article explains how semantic elements improve accessibility and structure.</p>
  <footer>
    <address>
      Written by: <a href="mailto:author@example.com">author@example.com</a><br>
      Visit my website: <a href="https://example.com">example.com</a>
    </address>
  </footer>
</article>

회사 소개 페이지


<section>
  <h2>Contact Our Team</h2>
  <address>
    <p>
      Development Team<br>
      456 Code Avenue, Tech Town, DevLand<br>
      Email: <a href="mailto:devteam@company.com">devteam@company.com</a><br>
      Phone: <a href="tel:+9876543210">+9 (876) 543-210</a>
    </p>
  </address>
</section>

회사 전역의 연락처 (footer + address)

회사 전역의 연락처의 경우 보통 footer에 넣게 된다.

따라서 footer 안에 address 태그로 선언하는게 일반적


<footer>
  <address>
    <p>Company Name</p>
    <p>Email: <a href="mailto:info@company.com">info@company.com</a></p>
    <p>Phone: <a href="tel:+1234567890">+1 234 567 890</a></p>
    <p>123 Main St, Cityville, Country</p>
  </address>
  <p>&copy; 2025 Company Name. All rights reserved.</p>
</footer>

footer에만 넣고 address를 쓸 필요 없는 경우

법적 필수사항에 따라 연락처를 페이지 하단에 간단히 명시하는 경우, 그것은 페이지의 주요 정보가 아니므로 <address> 태그를 굳이 사용할 필요는 없습니다.

이런 상황에서는 <footer> 안에 단순 텍스트로 처리하는 것이 일반적입니다.

<address>는 스크린리더에게 "여기는 연락처 정보입니다"라고 알리는 시멘틱 태그입니다. 하지만 법적 요구에 의해 간단히 표시하는 연락처 정보는 접근성 관점에서 "연락처"로 특별히 강조할 필요가 없기 때문에 footer>만으로 충분합니다.

또한, 이 경우는 연락처 정보가 페이지의 주요 기능이나 의미를 가지지 않으므로 <address>의 사용이 적합하지 않을 수 있습니다.


<!-- 법적 필수사항으로 간단히 명시한 경우 -->
<footer>
  <p>&copy; 2025 Company Name. All rights reserved.</p>
  <p>Contact us: support@company.com</p>
</footer>


<!-- 연락처가 주요 콘텐츠로 활용되는 경우, 예)고객센터 페이지 -->
<footer>
  <address>
    <p>Customer Support</p>
    <p>Email: <a href="mailto:support@company.com">support@company.com</a></p>
    <p>Phone: <a href="tel:+1234567890">+1 234 567 890</a></p>
  </address>
</footer>