HTML - address 요소

 

몇몇 홈페이지를 보면 홈페이지 최하단에 회사 정보가 적혀있는 것을 볼 수 있다.

 

<address> 요소는 이런 정보들을 기입하는 데 사용하는 요소이다.

MDN을 살펴보면 <address> 요소 안에는 작성 규칙이 정해진 것은 아니고 실제주소, URL, 이메일, 전화번호, SNS, 좌표 등등 다양한 정보와 이 정보를 제공하는 주체가 반드시 포함되어야 한다고 되어있다. 작성 위치 또한 정해지지 않았으며 다른 섹션에서도 사용될 수 있다고 한다.

 

<address>
      <span>(주) 여기어때컴퍼니</span>
      <p>
        <span
          >주소<span aria-hidden="true">:</span>서울특별시 강남구 봉은사로 479,
          479타워 11층 <span aria-hidden="true">|</span> 대표이사<span
            aria-hidden="true"
            >:</span
          >정명훈 <span aria-hidden="true">|</span> 사업자등록번호<span
            aria-hidden="true"
            >:</span
          >
          742-86-00224 <a href="/">사업자정보확인</a></span
        >
      </p>
      <p>
        <span
          >전자우편주소<span aria-hidden="true">:</span
          ><a href="mailto:help@yeogi.com">help@yeogi.com</a>
          <span aria-hidden="true">|</span> 통신판매번호 2017-서울강님-01779
          <span aria-hidden="true">|</span> 관광사업자 등록번호<span
            aria-hidden="true"
            >:</span
          >제1026-24호<span aria-hidden="true">|</span>전화번호<span
            aria-hidden="true"
            >:</span
          >
          1670-6252 <span aria-hidden="true">|</span> 호스팅서비스제공자의 상호
          표시<span aria-hidden="true">:</span> (주)여기어때컴퍼니</span
        >
      </p>
      <span
        >(주) 여기어때컴퍼니는 통신판매중개자로서 통신판매의 당사자가 아니며,
        상품의 예약, 이용 및 환불 등과 관련한 의무와 책임은 각 판매자에게
        있습니다.</span
      >
    </address>

 

위 내용을 토대로 마크업을 해봤다. address 요소의 기본적인 형태는 이탤릭체를 쓴 것처럼 텍스트가 기울어져 있다. 

이런 내용을 마크업 할 때 약간의 팁이라면 메일이나 전화번호에는 바로 연결이 필요한 경우 <a> 태그를 이용해서 바로접근 가능하게 해야 하며 : 이나 | 이런 구분을 넣기 위해 사용하는 기호의 경우 따로 <span> 태그로 감싸고 aria-hidden="true' 속성을 작성해 주는 것이다. 이는 시각 장애인들을 위한 웹 접근성을 강화시켜 주는 속성으로, 스크린리더로 텍스트에 접근했을 때 기호를 읽어주지 않기 때문에 정보 취득이 용이하다. 

만약 aria-hidden="true" 속성을 빼게 된다면 스크린리더가 기호를 텍스트로 취급하고 읽어주기 때문에 텍스트 내용을 파악하기 힘들 수 있다.