728x90
728x90
목 차
반응형
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. 주요 특징
- 기본 스타일
- <address> 태그는 브라우저에서 기본적으로 기울임체로 렌더링됩니다.
- display 속성은 기본적으로 block으로 설정되어 있습니다.
- 내부 요소
- <br> 태그를 사용하여 줄바꿈을 추가할 수 있습니다.
- 이메일 주소, 전화번호, 웹사이트 링크 등은 <a> 태그와 함께 사용됩니다.
- 의미론적 역할
- <address> 태그는 문서 또는 섹션과 관련된 연락처 정보를 명확히 전달하며, 접근성 및 검색 엔진 최적화(SEO)에 기여합니다.
- 위치
- <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
- 의미 전달
- <address> 태그는 브라우저와 검색 엔진, 그리고 화면 읽기 소프트웨어에서 "연락처 정보"로 인식됩니다.
- 사용자와 봇 모두에게 정보를 명확히 전달할 수 있습니다.
- 검색 엔진 최적화(SEO)
- 회사의 위치, 전화번호, 이메일 주소 등의 정보를 <address>로 제공하면 검색 엔진이 해당 정보를 명확히 파악할 수 있습니다.
728x90
'프로그래밍 > HTML' 카테고리의 다른 글
[HTML] article 태그 (콘텐츠 관련 태그) (32) | 2025.01.17 |
---|---|
[HTML] area 태그 (이미지 특정 영역 지정) (60) | 2025.01.14 |
[HTML] abbr 태그 문법 및 스타일링 (22) | 2025.01.11 |
[HTML] 테이블(table) 태그 속성 (병합, 테두리, 간격, 여백) (34) | 2025.01.11 |
아스키 코드표 (0 ~ 255) 한 눈에 확인하기 (171) | 2024.12.07 |