개요
아래 내용은 HTML 문서의 기본 뼈대(DOCTYPE, html, head, body)를 먼저 정리한 뒤, 실습 예제를 통해 “문서 구조 → 텍스트 태그 → 서식 태그 → 엔티티(특수문자) → div/span” 순으로 한 흐름으로 정리한 글이다.
HTML 문서의 기본 구조
HTML 문서는 크게 head와 body로 나뉜다.
head: 문서의 메타데이터(설정 정보). 브라우저/검색엔진이 참고하는 영역body: 사용자가 실제로 보는 화면(본문)
또한 HTML5 문서임을 명시하기 위해 문서 최상단에 <!DOCTYPE html>을 둔다. (HTML5에서는 사실상 고정 형태이며, 생략 가능한 경우도 있지만 명시하는 습관이 안전하다.)
DOCTYPE, html 태그, lang 속성
HTML 문서의 시작은 아래 2줄로 잡는 게 기본이다.
<!DOCTYPE html>: HTML5 문서임을 선언<html lang="ko">: HTML 문서의 루트(root) 요소이며,lang은 문서의 언어를 정의한다.- 한국어:
ko - 영어:
en
- 한국어:
lang은 접근성(스크린리더)과 검색엔진 최적화 측면에서 의미가 있다.
head 태그: 메타데이터 영역
head에는 “문서 설명/설정”이 들어간다. 대표적으로 아래 3가지를 자주 쓴다.
-
<meta charset="UTF-8">
문자인코딩 설정이다. UTF-8을 권장한다. -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
모바일 환경에서 화면 너비와 배율을 맞추기 위한 설정이다. 반응형 페이지에서는 거의 필수다. -
<title>...</title>
브라우저 탭 제목, 북마크 이름, 검색엔진이 참고하는 제목으로 사용된다.
body 태그: 본문 영역
body에는 사용자가 실제로 보는 콘텐츠(텍스트/이미지/버튼 등)가 들어간다. 이번 예제는 텍스트 출력 중심으로 구성되어 있다.
주요 텍스트 태그 (h, p, br, hr)
h1 ~ h6 (제목 태그)
h 태그는 제목(heading)이다.
h1이 가장 큰 제목,h6이 가장 작은 제목- 검색엔진이 중요한 키워드로 인식할 수 있는 구조이므로 “제목 구조”를 의식해서 쓰는 게 좋다
예제에서도 h1, h2를 사용해서 섹션을 구분하고 있다.
p (단락 태그)
p는 paragraph(단락)이다.
- 기본적으로 문단 위아래에 여백이 들어간다
- 단락 단위로 줄이 나뉜다
br (줄바꿈)
HTML에서는 엔터를 눌러도 화면에서 줄바꿈이 되지 않는다.
줄바꿈을 하려면 <br/> 같은 줄바꿈 태그를 명시해야 한다.
hr (수평선)
<hr/>는 섹션 사이를 시각적으로 구분하기 위한 선이다.
본문 흐름을 끊고 구분선을 넣고 싶을 때 간단하게 쓴다.
텍스트 서식 태그 (b/strong, i/em, u, mark, del, sub/sup)
HTML에는 “보기(스타일)”만 바꾸는 태그와 “의미(semantic)”까지 담는 태그가 섞여 있다. 실무에서는 의미가 있는 태그를 우선한다.
굵게: b vs strong
b: 단순 굵게 표시strong: 굵게 표시 + 의미상 강조(중요함)
기울임: i vs em
i: 단순 기울임em: 기울임 + 의미상 강조(강조/강세)
기타 서식 태그
u: 밑줄mark: 형광펜 하이라이트del: 삭제(취소선)sub: 아래 첨자sup: 위 첨자
예제에서는 각 태그의 렌더링 차이를 문장으로 바로 확인할 수 있도록 구성되어 있다.
HTML 엔티티(특수기호)
HTML에서는 <, > 같은 기호가 태그 문법에 사용되기 때문에 그대로 출력하면 해석 충돌이 생길 수 있다.
이때 엔티티(entity)를 사용해서 안전하게 출력한다.
자주 쓰는 엔티티는 아래와 같다.
: 공백(줄바꿈 없는 공백)<:<>:>&:&":"':'
예제는 위 엔티티들을 p 태그로 직접 출력해 확인하게 되어 있다.
div와 span 태그 (블록 vs 인라인)
div: 블록 레벨 요소
div는 블록(block) 요소다.
- 한 줄을 차지하며 기본적으로 줄바꿈이 발생한다
- 특별한 의미는 없고, 보통 레이아웃(영역 구분)을 위해 쓴다
예제에서는 div에 style을 직접 주어 배경색/패딩/마진을 넣고 “영역”처럼 보이게 했다.
span: 인라인 요소
span은 인라인(inline) 요소다.
- 텍스트 흐름 안에서 “부분”만 감싼다
- 줄바꿈이 발생하지 않는다
- 특정 단어만 색상/굵기 등을 바꿀 때 자주 사용한다
예제에서는 문장 중간 단어에 span을 적용해 글자 색과 굵기를 바꾸고 있다.
실습 코드 브라우저 실행 화면
