이번 글은 Frontend / Markup Structure 영역에서 HTML 태그를 “왜 이 태그로 써야 하는가”에 초점을 맞춰 정리한다.
HTML은 단순히 화면을 그리는 용도가 아니라, 문서의 구조와 의미를 정의하는 언어다. 그래서 “보이기만 하면 된다”가 아니라 용도에 맞는 태그 선택이 매우 중요하다.
1. <!DOCTYPE html> : 문서 선언
<!DOCTYPE html>은 이 문서가 HTML5 표준으로 작성되었음을 브라우저에 알리는 선언문이다.
이 선언이 없으면 브라우저는
- 옛날 브라우저 호환 모드(quirks mode)
- 구버전 HTML 해석 방식
으로 문서를 읽게 되고, 그 결과 HTML / CSS / JavaScript가 의도와 다르게 동작하는 문제가 발생할 수 있다.
따라서 HTML 문서의 첫 줄에는 항상 이 선언이 있어야 한다.
2. <head> : 문서의 정보 영역
<head>는 사용자가 눈으로 직접 보지는 않지만, 브라우저·검색엔진·스크린 리더가 읽는 정보를 담는 영역이다.
여기에는 다음과 같은 정보들이 들어간다.
- 문자 인코딩
- 페이지 제목
- 뷰포트 설정
- 검색엔진 / SNS 공유용 메타 정보
- 파비콘
3. <title> : 페이지 제목
<title>은 브라우저 상단 탭에 표시되는 제목이다.
- 북마크 / 즐겨찾기 시 저장되는 이름
- 검색엔진 결과 페이지에 노출되는 제목
즉, 단순한 장식이 아니라 SEO와 직결되는 요소다.
4. <meta> 태그
4-1. charset
charset은 이 문서의 문자를 어떤 방식으로 해석할지 지정한다.
<meta charset="UTF-8">여기서 자주 헷갈리는 포인트:
lang="ko"→ 문서의 언어 정보 (검색엔진 / 스크린 리더)UTF-8→ 문자 인코딩 방식
둘은 역할이 완전히 다르기 때문에 서로 독립적으로 이해해야 한다.
4-2. viewport
viewport는 화면에 보여지는 영역을 제어하는 메타 정보다.
모바일 환경에서는
- 시각적 뷰포트(visual viewport)
- 레이아웃 뷰포트(layout viewport)
가 대부분 같지만, input 클릭 시 키보드가 올라오는 경우처럼 둘이 어긋나는 상황도 발생한다.
이때도 레이아웃이 깨지지 않도록 기준을 잡아주는 역할을 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5. Open Graph (OG) 메타 정보
Open Graph는 Meta(구 Facebook)에서 만든 프로토콜로, 웹페이지를 SNS에 공유했을 때 보여지는 정보를 정의한다.
카카오톡, 페이스북, 디스코드 등에서 링크를 붙여넣었을 때
- 제목
- 설명
- 썸네일 이미지
가 자동으로 표시되는 이유가 바로 이것이다.
<head>
<meta property="og:title" content="Korea IT Academy 12월 국비 과정">
<meta property="og:description" content="심화 HTML / CSS 및 기초 JavaScript 과정">
<meta property="og:image" content="https://showcases.yalco.kr/html-css-scoop/03-01.png">
</head>이렇게 작성하면, 공유 시 이미지 + 굵은 제목 + 설명 텍스트가 함께 노출된다.
6. favicon
파비콘은 브라우저 탭 제목 옆에 표시되는 작은 아이콘이다.
<link rel="shortcut icon" href="./상대경로.png" type="image/x-icon">작은 요소지만 사이트 식별성과 완성도를 크게 높여준다.
7. 시맨틱 태그(Semantic Tags)
div와 span만으로도 웹페이지를 만드는 것은 가능하다.
하지만 전부 div로만 구성되면
- 어디가 헤더인지
- 어디가 본문인지
- 어디가 메뉴인지
를 코드만 보고 파악하기가 매우 어렵다.
이 문제를 해결하기 위해 등장한 개념이 시맨틱 태그다.
기능적으로는 div와 동일하지만, 역할에 따라 이름이 붙은 div라고 이해하면 된다.
8. 시맨틱 태그의 장점
- 웹 접근성 향상 (스크린 리더가 구조를 빠르게 파악)
- SEO에 유리 (검색엔진이 문서 구조를 명확히 이해)
- 유지보수와 가독성 개선
9. 주요 시맨틱 태그 종류
<header>
페이지 또는 구획의 상단 영역.
- 사이트 제목
- 로고
- 검색창
전체 페이지뿐 아니라, 섹션 내부에서도 사용 가능하다.
<nav>
링크 이동을 담당하는 영역.
- 메인 메뉴
- 페이지 내 목차
- 특정 id로 이동하는 링크
<footer>
페이지 또는 구획의 하단 영역.
- 회사 정보
- 저작권 문구
- 연락처
<main>
페이지에서 가장 중요한 메인 컨텐츠 영역.
- 페이지마다 반드시 1개만 존재
- 해당 페이지의 핵심 내용
<aside>
메인 컨텐츠와 간접적으로 연관된 영역.
- 사이드바
- 추가 정보
- 광고 영역
<section>
주제나 성격에 따라 컨텐츠를 묶는 구획.
- 페이지 내 여러 번 사용 가능
- 각 section에 id를 주어 링크 이동 가능
더 세부 단위가 필요해지면 그때 div를 사용한다.
<article>
독립적으로 재사용 가능한 컨텐츠.
- 블로그 글
- 뉴스 기사
- 카드형 컨텐츠
- 댓글
<figure> / <figcaption>
이미지와 설명을 하나의 의미 단위로 묶을 때 사용한다.
<figure>: 이미지 묶음<figcaption>: 이미지 설명
정리
- DOCTYPE은 HTML5 표준을 명시하는 필수 선언이다
- head는 화면에 보이지 않는 문서 정보 영역이다
- title과 meta는 SEO와 직접적으로 연결된다
- Open Graph는 SNS 공유 시 보여지는 정보를 제어한다
- 시맨틱 태그는 div와 기능은 같지만 “의미”를 가진다
- 시맨틱 태그는 접근성, SEO, 유지보수 모두에 유리하다
