HTML 기초

목록 보기

1/6

HTML 기초 정리

이번 글은 Frontend / Markup structure 영역에서 가장 기본이 되는 HTML(HyperText Markup Language)을 정리한다. HTML은 “프로그래밍 언어”가 아니라, 웹 문서의 구조(Structure)를 정의하는 마크업 언어다.

HTML은 화면에 “무엇이 있는지”와 “각 요소가 어떤 의미를 가지는지”를 정의하고, CSS는 디자인(Style), JavaScript는 동작(Logic)을 담당한다.

HTML: 구조(Structure)
CSS: 스타일(Style)
JavaScript: 동작(Behavior)

1. HTML이 하는 일

HTML의 핵심 역할은 다음 두 가지다.

웹 페이지의 구조(Structure)를 만든다.
각 콘텐츠의 의미(Semantic Meaning)를 브라우저와 검색엔진에 전달한다.

즉, HTML은 “어떻게 보이게 할지”가 아니라, “이게 무엇인지”를 정의하는 언어다.

2. 태그(Tag)와 요소(Element)

HTML은 태그(Tag)로 구성된다. 태그는 “의미를 가진 표식”이며, 태그로 감싸진 하나의 단위를 요소(Element)라고 한다.

Tag: 구조와 의미를 나타내는 표식
Element: 태그 + 내용(Content)을 포함한 하나의 구성 단위

브라우저는 태그를 해석해서 화면을 그리고, 검색엔진은 태그의 의미를 기반으로 문서를 분석한다.

3. Block 요소와 Inline 요소

HTML 요소는 화면 배치 방식에 따라 두 가지로 나뉜다.

Block Element: 한 줄 전체를 차지하는 요소 (위에서 아래로 배치)
Inline Element: 줄 안에서 내용 크기만큼만 차지하는 요소

레이아웃이 원하는 대로 나오지 않을 때, 대부분은 이 차이를 이해하지 못해서 발생한다.

4. div / p / span의 역할과 차이

HTML에서 가장 자주 쓰는 기본 태그인 div, p, span은 역할이 명확히 다르다.

1) div (Division)

div는 “구역, 영역”을 나누는 태그다. 의미 자체는 없고, 레이아웃을 묶는 컨테이너(Container) 역할을 한다.

영어 의미: Division = 구역, 영역
용도: 섹션 묶기, 레이아웃 구성, 스타일/스크립트 적용 단위
특징: Block 요소

즉, div는 구조를 나누기 위한 박스일 뿐, 콘텐츠의 의미를 담지는 않는다.

2) p (Paragraph)

p는 문단을 의미하는 태그다. 하나의 문장 묶음이나 설명 글을 표현할 때 사용한다.

영어 의미: Paragraph = 문단
용도: 텍스트 단락 표현
특징: Block 요소, 자동 줄바꿈

p 태그는 “글의 문단”이라는 의미를 가지므로, 단순 박스(div)와는 성격이 다르다.

3) span (Span)

span은 문장 안에서 특정 부분을 감싸기 위한 태그다. 줄을 나누지 않고, 텍스트 일부에만 스타일이나 스크립트를 적용할 때 사용한다.

영어 의미: Span = 범위, 구간
용도: 텍스트 일부 강조, 색상 변경, JS 제어
특징: Inline 요소

정리하면 다음과 같다.

div: 영역을 나누는 박스
p: 하나의 문단
span: 문장 내부의 특정 범위

5. 시맨틱 태그(Semantic Tag)

HTML5부터는 단순한 div 대신, 의미를 담은 구조 태그를 사용하는 것이 권장된다. 이를 시맨틱 태그(Semantic Tag)라고 한다.

header: 상단 영역 (로고, 타이틀)
nav: 네비게이션(메뉴)
main: 페이지 핵심 콘텐츠
section: 주제별 구역
article: 독립적인 콘텐츠 단위
footer: 하단 정보(저작권, 정책)

시맨틱 태그는 검색엔진(SEO), 접근성(스크린 리더), 유지보수 측면에서 매우 중요하다.

6. 텍스트 관련 태그

HTML은 텍스트의 의미를 구분하기 위해 다양한 태그를 제공한다.

제목(Heading): 문서 구조의 계층 표현
문단(Paragraph): 설명 글 단위
강조(Emphasis): 중요한 의미 강조
줄바꿈(Line Break): 강제 개행

제목 태그는 “크기 조절”이 아니라 문서 구조를 표현하는 계층 구조이므로, 의미에 맞게 사용해야 한다.

7. 링크와 미디어 요소

HTML의 본질은 하이퍼텍스트(HyperText), 즉 문서 간 연결이다.

링크(Link): 다른 페이지 또는 위치로 이동
이미지(Image): 시각 정보 제공
오디오(Audio), 비디오(Video): 멀티미디어 표현

이 요소들은 단순 출력이 아니라, 속성(Attribute)을 통해 경로, 설명, 동작 방식을 정의한다.

8. 목록(List) 구조

여러 항목을 나열할 때는 목록 구조를 사용한다.

순서 없는 목록(Unordered List)
순서 있는 목록(Ordered List)
정의 목록(Description List)

메뉴, 기능 목록, 절차, 규칙 정리는 모두 목록 구조로 표현하는 것이 의미적으로 정확하다.

9. 테이블(Table)

테이블은 행(Row)과 열(Column) 구조로 데이터를 표현할 때 사용한다.

헤더 영역: 컬럼 제목
본문 영역: 실제 데이터
캡션: 표의 제목

테이블은 레이아웃 용도가 아니라, 데이터 표현 전용 구조로 사용하는 것이 원칙이다.

10. 폼(Form)과 입력 요소

폼(Form)은 사용자 입력을 서버로 전달하기 위한 구조다. HTML에서 Frontend → Backend 데이터 전달의 출발점이 된다.

입력창(Input): 텍스트, 숫자, 비밀번호
선택 요소: 체크박스, 라디오 버튼, 드롭다운
버튼(Button): 전송, 취소, 동작 실행

HTML은 “입력 구조”만 담당하며, 검증과 저장은 백엔드(Spring Boot, Python 등)에서 처리한다.

11. 속성(Attribute)

태그는 속성(Attribute)을 통해 추가 정보를 가진다.

id: 문서 내 유일한 식별자
class: 스타일/스크립트 그룹 지정
name: 서버 전송 시 데이터 이름
value: 입력 값

속성은 CSS, JavaScript, Backend 연동에서 핵심적인 연결 고리다.

12. HTML, CSS, JavaScript 역할 분리

HTML: 구조와 의미
CSS: 시각적 표현
JavaScript: 이벤트, 데이터 처리, 통신

HTML에 스타일이나 로직을 과도하게 섞으면 유지보수성과 확장성이 급격히 떨어진다.

13. HTML과 Backend 연계 구조

HTML은 단독으로 동작하지 않고, Backend(Spring Boot, Python 등)와 다음 흐름으로 연결된다.

사용자 입력: HTML Form
요청 전송: HTTP Request
처리 로직: Backend Controller / Service
데이터 저장: Database(SQL)
응답 출력: HTML 또는 JSON

즉, HTML은 사용자와 서버를 연결하는 인터페이스 계층이다.

14. HTML 작성 기본 원칙

의미에 맞는 태그를 사용한다.
div 남용을 피하고 시맨틱 태그를 활용한다.
레이아웃은 CSS에서 담당한다.
데이터 처리와 검증은 Backend에서 담당한다.

15. 정리

HTML은 웹 페이지의 구조와 의미를 정의하는 마크업 언어다.
div는 영역, p는 문단, span은 문장 내부 범위를 의미한다.
HTML은 디자인이나 로직이 아니라 “구조 설계”에 집중한다.
CSS, JavaScript, Backend와 역할 분리가 명확해야 유지보수가 쉬워진다.

16. 느낀 점

HTML을 단순히 “화면에 글자 출력하는 도구”로 보면 프론트엔드의 절반만 이해한 것이다. 실제로는 구조를 정확히 설계하는 언어이며, 이 구조 위에 CSS, JavaScript, Backend 로직이 결합되어 하나의 서비스가 완성된다. div, p, span의 역할만 정확히 구분해도 레이아웃, 유지보수, 협업 난이도가 확연히 달라진다는 것을 체감하게 된다.