a 태그는 HTML에서 하이퍼링크를 생성하는데 사용되는 태그입니다.
기본 문법
<a href="URL">링크 텍스트</a>
주요 속성
- href: 링크의 목적지 URL을 지정합니다.
- target: 링크가 열리는 방식을 지정합니다.
- _self: 현재 창에서 열기 (기본값)
- _blank: 새 창이나 탭에서 열기
- _parent: 부모 프레임에서 열기
- _top: 전체 창에서 열기
- rel: 현재 문서와 링크된 문서 사이의 관계를 정의합니다.
- download: 링크를 클릭했을 때 파일을 다운로드하도록 지정합니다.
사용 예시
웹사이트 방문하기
새 탭에서 열기
PDF 다운로드
이메일 보내기
전화하기
주의사항
- 외부 링크를 새 탭에서 열 때는 보안을 위해 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.
- 링크 텍스트는 명확하고 설명적이어야 하며, "여기를 클릭하세요"와 같은 모호한 표현은 피해야 합니다.
- 접근성을 위해 필요한 경우 title 속성을 사용하여 링크에 대한 추가 설명을 제공할 수 있습니다.
target="_self"와 target="_blank" 차이점
**target="_self"**는 현재 페이지에서 링크가 열리는 기본값입니다. 사용자가 링크를 클릭하면 현재 창에서 새로운 페이지로 이동하게 됩니다.
<a href="<https://www.example.com>" target="_self">현재 창에서 열기</a>
**target="_blank"**는 새로운 탭이나 창에서 링크를 여는 옵션입니다. 현재 페이지는 그대로 유지되며, 새로운 탭에서 링크된 페이지가 열립니다.
<a href="<https://www.example.com>" target="_blank">새 탭에서 열기</a>
사용 시 고려사항
- target="_self" 사용: 사용자가 현재 작업 흐름을 유지해야 할 때 적합합니다.
- target="_blank" 사용: 현재 페이지의 컨텍스트를 유지하면서 새로운 정보를 보여줘야 할 때 적합합니다.
보안을 위해 target="_blank"를 사용할 때는 항상 rel="noopener noreferrer" 속성을 함께 사용하는 것이 좋습니다.
'HTML CSS JS(프론트엔드)' 카테고리의 다른 글
8. [HTML/CSS] HTML 리스트 태그 (ul, ol, li) (10) | 2024.12.12 |
---|---|
6. [HTML/CSS] HTML 전역 속성 (Global Attributes) (15) | 2024.12.12 |
5. [HTML/CSS] div와 span 차이 (블록 레벨요소,인라인요소) (14) | 2024.12.12 |
4. [HTML/CSS] img 태그,크기 관련 속성 (17) | 2024.12.12 |
3. [HTML/CSS] HTML 텍스트 태그 (15) | 2024.12.12 |