HTML <address> 태그 – 올바른 이해와 사용 방법

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

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

사용법 참고 사항

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

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

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

사용 예제

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

`<footer>` 태그 내에서 사용

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

부연설명
<footer> 태그는 일반적으로 웹 페이지의 맨 하단에 있는 글로벌(혹은 전역) 푸터를 나타내거나,
글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타냅니다.

HTML

<footer>
    <address>
        더 많은 정보는 문의하세요.
        <a href="mailto:master@example.com">홍길동</a>.
    </address>
    <p>© copyright 2038 Example Corp.</p>
</footer>

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

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

`<article>` 태그 내에서 사용

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

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

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>

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

다음의 예제에서는 페이지 헤더(<header> 태그)에 <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> 태그에는 연락처 정보 이외의 정보가 포함되어서는 안 됩니다.

구문

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

<address> 태그의 기술적인 구문 요약
허용되지 않는 자손 요소	`<address>` `<h1>`~`<h6>` `<article>` `<aside>` `<section>` `<nav>` `<header>` `<footer>`
허용되지 않는 조상 요소	`<address>`