본문 바로가기

디자인 실무/전자책

HTML 태그 용어 정리

반응형

 

🔹 기본 구조 태그
<html> : HTML 문서 전체를 감싸는 최상위 태그입니다.
웹페이지의 시작과 끝을 정의하며, 모든 태그는 이 안에 포함됩니다.

<head> : 문서의 메타데이터(meta data) 영역입니다.
문서 제목(<title>), 인코딩(<meta charset>), 외부 스타일시트(<link>), 스크립트(<script>) 등을 포함합니다.
화면에 직접 보이지 않지만 문서의 정보를 담당합니다.

<body> : 실제 웹페이지에 표시되는 콘텐츠가 들어가는 영역입니다.
텍스트, 이미지, 링크, 표 등 사용자가 보는 모든 콘텐츠가 여기에 포함됩니다.

 


 

🔹 콘텐츠 태그
(시작 태그와 종료 태그로 콘텐츠를 감쌉니다.)

 

<p> : 문단(paragraph)을 정의합니다.
자동으로 문단 간 여백이 생기며, 텍스트를 문단 단위로 구분할 때 사용합니다.

<h1> ~ <h6> : 제목(heading)을 정의합니다.
숫자가 작을수록 더 중요한 제목이며, <h1>은 문서의 대표 제목으로 사용됩니다.

<strong> : 중요한 내용을 강조할 때 사용합니다.
기본적으로 **굵은 글씨(bold)**로 표시됩니다.

<em> : 텍스트를 강조할 때 사용하며, 일반적으로 *기울임체(italic)*로 표시됩니다.

<ul> : 순서가 없는 목록(Unordered List)을 만듭니다.
리스트 항목은 기본적으로 점(•)으로 표시됩니다.

<ol> : 순서가 있는 목록(Ordered List)을 만듭니다.
항목이 숫자(1, 2, 3...)로 자동 표시됩니다.

<li> : 목록의 각 항목(list item)을 정의합니다.
<ul> 또는 <ol> 내부에서만 사용됩니다.

<a> : 하이퍼링크(anchor)를 생성합니다.
다른 페이지나 웹사이트, 이메일, 파일 등으로 이동할 수 있습니다.
예시: <a href="https://tistory.com">티스토리</a>

<img> : 이미지를 문서에 삽입합니다.
예시: <img src="cover.jpg" alt="표지 이미지">
src 속성으로 파일 경로를, alt 속성으로 대체 텍스트를 지정합니다.

<div> : 웹페이지의 구역을 논리적으로 묶는 블록(block) 요소입니다.
레이아웃 구성이나 섹션 구분에 자주 사용됩니다.

<pre> : 서식이 유지된(preformatted) 텍스트를 그대로 보여줍니다.
띄어쓰기와 줄바꿈이 입력한 그대로 표시됩니다.

 


 

🔹 콘텐츠 없는 태그 (빈 태그)
(닫는 태그 없이, 시작 태그만 사용합니다.)

<br> : 줄바꿈(Line Break)을 생성합니다.
문단을 나누지 않고 줄을 바꾸고 싶을 때 사용합니다.

<hr> : 수평선(Horizontal Rule)을 삽입해 내용을 구분할 때 사용합니다.

<meta> : 문서에 대한 정보를 정의하는 태그입니다.
예: 인코딩, 설명, 키워드, 뷰포트 설정 등
<head> 내부에서 사용됩니다.

 


 

🔹 시맨틱(의미론적) 태그
(단순히 모양이 아닌 의미를 표현하기 위해 사용합니다.)

<header> : 웹페이지나 섹션의 머리글 영역을 나타냅니다.
로고, 내비게이션, 제목 등이 위치합니다.

<main> : 문서의 주요 콘텐츠 영역을 나타냅니다.
본문의 중심 내용을 포함하며, 한 페이지에 한 번만 사용합니다.

<footer> : 페이지나 섹션의 하단 영역을 나타냅니다.
저작권, 연락처, 링크 등이 들어갑니다.

<aside> : 본문과 별개로, 보조 정보나 사이드바 영역을 표시할 때 사용합니다.

<article> : 독립적으로 구분되는 콘텐츠 블록을 나타냅니다.
예: 블로그 글, 뉴스 기사, 게시글 등

<section> : 관련된 콘텐츠를 그룹화할 때 사용합니다.
문서 내의 여러 주제별 단락이나 구역을 나눌 때 유용합니다.

반응형
SMALL