<address> 태그의 정의 및 사용법

<address> 태그는
가장 가까운 조상이 <article> 또는 <body> 태그일 경우 그 태그에 대한 연락처 정보를 나타내는데 사용하며,
그 태그가 <body>인 경우 연락처 정보는 문서 전체에 적용됩니다.

사용법 참고 사항

<address> 태그의 내용으로 제공되는 연락처 정보는 상황에 따라 어떤 형태로든 표시될 수 있으며, 필요한 모든 유형의 연락처 정보를 포함할 수 있습니다.
예를 들어 물리적 주소, URL, 이메일 주소, 전화번호, 소셜 미디어 핸들, 지리적 좌표 등이 포함될 수 있습니다.

<address> 태그에는 연락처 정보가 참조하는 사람(들)이나 조직의 이름이 있어야 합니다.

  • 일반적으로 연락처 정보와 관련된 경우를 제외하고 임의의 주소(예: 우편 주소)를 나타내는 데 사용해서는 안 됩니다.
  • 게시 날짜(<time>에 속함)와 같이 연락처 정보보다 많은 정보가 포함되어서는 안 됩니다.
  • 일반적으로 <footer>내에서 다른 정보와 함께 연락처 정보로 사용됩니다.
  • 암시적인 role 속성의 값은 group입니다.
HTML <article> 태그
HTML <time> 태그
HTML <footer> 태그
HTML role 속성

사용 예제

다음의 예제들 살펴보면 <address> 태그가 어떻게 사용되었는지를 쉽게 파악할 수 있습니다.

<footer> 태그 내에서 사용

<address> 태그는 일반적으로 <footer> 태그 내에서 다른 정보와 함께 연락처 정보로 많이 사용됩니다.
다음의 예제에서는 <footer> 태그에 연락처 정보와 저작권 고지가 포함되어 있습니다.

HTML 
<footer>
    <address>
        더 많은 정보는 문의하세요.
        <a href="mailto:master@example.com">홍길동</a>.
    </address>
    <p>© copyright 2038 Example Corp.</p>
</footer>
브라우저에서 실제 표시된 모습 <address> 태그 내부에 있는 텍스트는 보통 기울임체(italic)로 표시됩니다.

이 경우 <address> 태그의 연락처 정보는 가장 가까운 <article>이나 <body> 태그의 조상에 대한 연락처 정보를 나타냅니다.

<article> 태그 내에서 사용

다음은 <article> 태그 내부에 <address> 태그로 글의 작성자 연락처 정보를 나타낸 예제입니다.

HTML 
<article>
    <h2>글 제목</h2>
     ... 내용
    <address>
        <strong>글 작성자</strong>
        <br>
        <a href="https://example.com/author">홍길동</a>
        <br>
        <a href="mailto:author@example.com">author@example.com</a>
    </address>
</article>

페이지 헤더에 업체 연락처 정보를 제공

다음의 예제에서는 페이지 헤더에 <address> 태그를 사용해서 회사명, 이메일 주소, 전화번호 등의 연락처 정보를 표시했습니다.

HTML 
<header role="banner">
    <h1>회사 로고</h1>
    <nav>
      <a href="index.html">홈페이지</a>
      <a href="about.html">회사소개</a>
      <a href="contact.html">연락처</a>
    </nav>
    <address>
        <strong>회사명</strong>
        <br>
        <a href="mailto:info@example.com">info@example.com</a>
        <br>
        <a href="tel:+1234567890">+1 234 567 890</a>
    </address>
</header>

이 예제에서 나타낸 연락처 정보는 <body> 태그에 적용됩니다. 즉, 페이지 전체에 적용되는 연락처 정보가 됩니다.

부적합한 사용

<address> 태그에는 연락처 정보 이외의 정보가 포함되어서는 안 됩니다.

HTML 
<adress>마지막 수정: 1999/12/24 23:37:50</adress>
HTML 이 방식이 더 적합합니다. 
<footer>마지막 수정: <time>1999/12/24 23:37:50</time></footer>

구문

<address> 태그의 자손으로 사용할 수 없는 요소

  • <address>
  • <h1>~<h6>
  • <article>
  • <aside>
  • <section>
  • <nav>
  • <header>
  • <footer>

<address> 태그의 조상으로 사용할 수 없는 요소

  • <address>

브라우저 호환성

address 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<address> 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

address 태그의 명세서 사양
명세서 사양
<address> HTML Standard
#the-address-element

참고문헌

같이 보기