[HTML] address 태그 문법 및 사용 예제

728x90

목 차

• 1. address 태그란?
• 2. 기본 개념
• 3. 기본 문법
• 4. 사용 예제
  • 4-1. 웹페이지의 작성자 정보
  • 4-2. 회사 정보
  • 4-3. 블로그 작성자
• 5. 주요 특징
• 6. CSS 스타일링
• 7. 접근성과 SEO

반응형

 

1. address 태그란?

HTML의 <address> 태그는 문서나 페이지의 작성자, 소유자, 또는 관련 연락처 정보를 나타내는 블록 요소입니다. 이 태그는 주로 주소나 연락처 정보를 표시하기 위해 사용되며, 의미론적(Semantic) 태그로서 문서의 구조와 정보를 명확히 전달하는 데 도움이 됩니다.

 

---

 

2. 기본 개념

• <address> 태그는 물리적 주소뿐만 아니라 이메일, 전화번호, 웹사이트 링크 등 다양한 연락처 정보를 나타낼 수 있습니다.
• 문서나 섹션의 작성자 또는 관련된 사람/조직의 정보를 제공하기 위해 사용됩니다.
• 스타일링 측면에서는 기본적으로 기울임체(italic)로 렌더링됩니다.

 

---

 

3. 기본 문법

<address>
  작성자: John Doe<br>
  이메일: <a href="mailto:john.doe@example.com">john.doe@example.com</a><br>
  전화: <a href="tel:+123456789">+123456789</a>
</address>

 

---

 

4. 사용 예제

4-1. 웹페이지의 작성자 정보

<footer>
  <address>
    작성자: Jane Doe<br>
    이메일: <a href="mailto:jane.doe@example.com">jane.doe@example.com</a><br>
    위치: 123 Main Street, Cityville, USA
  </address>
</footer>

 

4-2. 회사 정보

<address>
  ABC 회사<br>
  456 Industrial Way, Tech City, USA<br>
  전화: <a href="tel:+987654321">+987654321</a><br>
  웹사이트: <a href="https://www.abc-company.com">www.abc-company.com</a>
</address>

 

4-3. 블로그 작성자

<address>
  작성자: Blog Admin<br>
  이메일: <a href="mailto:admin@blogsite.com">admin@blogsite.com</a>
</address>

 

---

 

5. 주요 특징

1. 기본 스타일
   • <address> 태그는 브라우저에서 기본적으로 기울임체로 렌더링됩니다.
   • display 속성은 기본적으로 block으로 설정되어 있습니다.
2. 내부 요소
   • <br> 태그를 사용하여 줄바꿈을 추가할 수 있습니다.
   • 이메일 주소, 전화번호, 웹사이트 링크 등은 <a> 태그와 함께 사용됩니다.
3. 의미론적 역할
   • <address> 태그는 문서 또는 섹션과 관련된 연락처 정보를 명확히 전달하며, 접근성 및 검색 엔진 최적화(SEO)에 기여합니다.
4. 위치
   • <address> 태그는 주로 <footer> 태그 내에서 사용되지만, 문서의 다른 부분에서도 사용할 수 있습니다.

 

---

 

6. CSS 스타일링

<address> 태그의 기본 스타일을 사용자 정의할 수 있습니다.

<style>
  address {
    font-style: normal; /* 기본 기울임체를 해제 */
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
  }
</style>

<address>
  작성자: John Smith<br>
  위치: 789 Sunset Blvd, Somewhere, USA<br>
  이메일: <a href="mailto:john.smith@example.com">john.smith@example.com</a>
</address>

 

---

 

7. 접근성과 SEO

1. 의미 전달
   • <address> 태그는 브라우저와 검색 엔진, 그리고 화면 읽기 소프트웨어에서 "연락처 정보"로 인식됩니다.
   • 사용자와 봇 모두에게 정보를 명확히 전달할 수 있습니다.
2. 검색 엔진 최적화(SEO)
   • 회사의 위치, 전화번호, 이메일 주소 등의 정보를 <address>로 제공하면 검색 엔진이 해당 정보를 명확히 파악할 수 있습니다.

 

---

 

관련글

• [HTML] abbr 태그 문법 및 스타일링
• [HTML] 테이블(table) 태그 속성 (병합, 테두리, 간격, 여백)
• 아스키 코드표 (0 ~ 255) 한 눈에 확인하기