HTML 태그는 웹 페이지를 만드는 데 꼭 필요한 요소들입니다. 정말 유용하게 사용되는 몇 가지 태그들을 자세히 알려드리겠습니다.
웹 표준에 기반한 HTML5에서 자주 쓰이고 중요한 태그 3가지입니다.
Code 1. <a> 태그 (Anchor Tag)
용도: 다른 페이지로 이동하거나 웹 페이지 내의 특정 위치로 점프할 수 있는 하이퍼링크를 만들 때 사용합니다. 예) '신청하기' 버튼
구조: <a href="이동할 주소">링크 텍스트 또는 이미지</a>
주요 속성:
href: 가장 중요한 속성으로, 링크를 클릭했을 때 이동할 웹 페이지 주소나 파일 경로를 지정합니다.
target: 링크를 열 방법을 지정합니다.
_self (기본값): 현재 창에서 링크를 엽니다.
_blank: 새 탭 또는 새 창에서 링크를 엽니다.
_parent: 부모 프레임에서 링크를 엽니다.
_top: 전체 창에서 링크를 엽니다.
title: 링크 위에 마우스를 올렸을 때 나타나는 툴팁 텍스트를 지정합니다.
인터넷은 하이퍼링크로 연결된 문서들의 집합이라고 할 수 있어요. <a> 태그가 없으면 웹 페이지 간의 이동이나 정보 연결이 불가능합니다. 웹사이트의 네비게이션 메뉴, 본문 속 관련 정보 링크 등 웹의 가장 기본적인 기능을 담당합니다.
Code 2. <img> 태그 (Image Tag)
용도: 웹 페이지에 이미지를 삽입할 때 사용합니다. 시각적인 정보를 전달하거나 디자인 요소를 추가하는 데 필수입니다.
구조: <img src="이미지 파일 경로" alt="대체 텍스트"> (종료 태그가 없는 빈 태그입니다.)
주요 속성:
src: 가장 중요한 속성으로, 표시할 이미지 파일의 경로를 지정합니다. (웹 주소나 서버 내 경로 모두 가능)
alt: 이미지를 표시할 수 없을 때 (예: 파일이 없거나 로딩 실패, 사용자가 시각 장애가 있는 경우) 대신 보여줄 텍스트를 지정합니다. 접근성과 SEO(검색 엔진 최적화)를 위해 반드시 사용하는 것이 좋습니다.
width, height: 이미지의 가로, 세로 크기를 픽셀(px)이나 백분율(%) 등으로 지정할 수 있습니다. 크기를 지정하면 이미지가 로드되기 전에도 레이아웃 공간을 확보하여 페이지 레이아웃이 갑자기 바뀌는 현상(CLS)을 줄이는 데 도움이 됩니다.
텍스트만으로 이루어진 페이지는 딱딱하고 정보를 효과적으로 전달하기 어려울 수 있습니다. <img> 태그를 통해 그림, 사진, 아이콘 등을 넣어 페이지를 더욱 풍부하고 이해하기 쉽게 만들 수 있습니다.
Code 3. <p> 태그 (Paragraph Tag)
용도: 텍스트 단락을 정의할 때 사용합니다. 여러 문장으로 이루어진 텍스트 덩어리를 나타내는 가장 기본적인 태그입니다.
구조: <p>여기에 단락 내용을 작성합니다.</p>
주요 속성: 특별히 많이 사용되는 속성은 없지만, CSS를 이용해 단락의 스타일(글자 크기, 색상, 줄 간격, 여백 등)을 지정하는 경우가 많습니다.
웹 페이지의 대부분의 콘텐츠는 텍스트로 이루어져 있습니다. <p> 태그를 사용하여 텍스트를 논리적인 단락으로 구분하면, 글의 가독성이 높아지고 내용의 구조를 명확히 파악할 수 있게 됩니다. 브라우저는 기본적으로 <p> 태그의 위아래에 약간의 공간(margin)을 자동으로 추가하여 단락을 구분해 줍니다.
이 외에도 제목을 나타내는 <h1>~<h6> 태그, 목록을 만드는 <ul>, <ol>, <li> 태그, 구역을 나누는 <div> 태그 등 유용한 태그들이 정말 많습니다.
HTML 태그들을 잘 활용하면 원하는 웹 페이지 구조와 내용을 효과적으로 만들 수 있답니다.