정의 및 사용 방법

<address> 태그는 연락처 정보를 나타냅니다.

기본 예제

다음 예제는 <address> 태그를 사용하여 연락처 정보를 나타내는 기본적인 방법을 보여줍니다.

HTML 
<footer>
    <address>
        더 많은 정보는 문의하세요.
        <a href="mailto:master@example.com">홍길동</a>.
    </address>
    <p><small>© copyright 2038 Example Corp.</small></p>
</footer>
브라우저에서 실제 표시된 모습

대부분의 브라우저에서는 <address> 태그의 글꼴 스타일(font-style)을 이탤릭체(italic)로 표현합니다.

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

사용법 참고 사항

<address> 태그의 연락처 정보 적용 범위는 명확히 구분됩니다.
또한, 이 태그에 포함할 수 있는 연락처 정보의 종류도 명확히 규정되어 있습니다.

적용 범위

<address> 태그의 연락처 정보가 적용되는 범위는 조상 중에서 <article> 태그가 있는지 여부에 따라 달라집니다.

  • <article> 태그 안에 있다면:
    가장 가까운 <article>의 연락처 정보를 나타냅니다.
  • <article> 태그 밖에 있다면:
    <body> 태그에 대한 연락처 정보를 나타냅니다. 이것은 문서 전체에 대한 연락처 정보입니다.

부연설명
<article> 태그는 문서, 페이지, 애플리케이션, 또는 사이트에서 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됩니다.
예를 들어, 게시판 글, 뉴스 기사, 블로그 글, 댓글 등이 있습니다.

연락처 정보 내용

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

  • 연락처 정보는 상황에 맞는 다양한 형태를 사용할 수 있습니다. (예: 실제 주소, URL, 이메일 주소, 전화번호, SNS, 웹사이트 등)
  • 페이지 헤더에서는 기업 연락처를 제공하거나, <article> 내부에서는 글 작성자 정보를 나타낼 수 있습니다.
  • 단순한 지리적 주소 표시 등 연락처 용도가 아닌 정보는 포함하면 안 됩니다. 단, 해당 주소가 실제 연락처 역할을 할 때만 사용해야 합니다.

사용 예제

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

<article> 태그 내에서 사용

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

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

<article> 태그 밖에서 사용

<address> 태그가 <article> 태그 밖에 있다면(또는, 조상 중에서 <article> 태그가 없다면) <body> 태그에 대한 연락처 정보를 나타냅니다. 이것은 문서 전체에 대한 연락처 정보입니다.

다음 예제는 <article> 태그의 밖, 즉 문서 전체를 대상으로 하는 연락처 정보를 <address> 태그로 나타내는 방법을 보여줍니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>Example 페이지</title>
    </head>
    <body>
        <h1>Example 웹사이트</h1>
        <p>웹사이트 소개나 콘텐츠가 여기에 들어갑니다.</p>
        
        ....
        
        <footer>
            <!-- 문서 전체 연락처 -->
            <address>
                사이트 문의:
                <a href="mailto:admin@example.com">admin@example.com</a>
            </address>
            <p><small>© 2025 나의 웹사이트. All Rights Reserved.</small></p>
        </footer>
    </body>
</html>

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

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

HTML 
<header role="banner">
    <a href="/" rel="home">회사 로고</a>
    <nav>
      <a href="index.html">홈페이지</a>
      <a href="about.html">회사소개</a>
      <a href="contact.html">연락처</a>
    </nav>
    <address>
        <span>회사명</span>
        <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>마지막 수정: 2011-11-18 23:37:50</adress>
HTML 이 방식이 더 적합합니다. 
<footer>마지막 수정: <time>2011-11-18 23:37:50</time></footer>

기술적인 문법 요약

<address> 태그는 허용되지 않는 자손 요소와 허용되지 않는 조상 요소가 있습니다.
이러한 규칙들은 <address> 태그가 특정 상황에서 사용될 경우 웹 페이지의 콘텐츠를 파악하는데 어려움이 발생할 수 있기 때문에 생긴 것으로서, <address> 태그를 사용할 때 반드시 고려해야 합니다.

<address> 태그의 기술적인 문법 요약
허용되지 않는 자손 요소
허용되지 않는 조상 요소
  • <address>
암시적인 role 속성 값 group
허용된 role 속성 값 모두(Any)

브라우저 호환성

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

명세서

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

참고문헌

같이 보기