웹페이지를 만들기 위해 가장 먼저 알아야 할 것은 HTML 기본 구조입니다. HTML(HyperText Markup Language)은 웹페이지의 뼈대를 만드는 언어이며, 모든 웹사이트는 이 구조를 기반으로 동작합니다. 이번 글에서는 <!DOCTYPE>부터 <body>까지, HTML 문서의 기본 구조를 단계별로 정리해보겠습니다. 초보자도 이해할 수 있도록 쉽게 설명하겠습니다.
1. HTML 문서의 전체 구조
가장 기본적인 HTML 문서는 아래와 같은 형태를 가집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이곳에 내용이 들어갑니다.</p>
</body>
</html>
이 구조가 바로 모든 웹페이지의 시작점입니다. 이제 각 요소가 어떤 역할을 하는지 하나씩 살펴보겠습니다.
2. <!DOCTYPE html>의 의미
<!DOCTYPE html>은 이 문서가 HTML5 문서임을 브라우저에 선언하는 역할을 합니다.
과거에는 HTML 버전이 여러 개 있었기 때문에 브라우저가 어떤 규칙으로 해석해야 하는지 알려줘야 했습니다.
현재는 HTML5가 표준이기 때문에 위와 같이 간단히 작성합니다.
이 선언이 없으면 브라우저가 레이아웃이 깨질 수 있습니다.
3. <html>태그와 lang 속성
<html lang="ko"><html>태그는 HTML 문서의 루트 요소입니다. 모든 내용은 이 태그 안에 들어갑니다.
lang="ko"는 문서의 언어를 의미합니다. 이 속성은 다음과 같은 이유로 중요합니다.
- 검색엔진 최적화(SEO)에 도움
- 스크린리더 접근성 향상
- 브라우저 번역 기능 정확도 향상
영문 페이지라면 lang="en"을 사용합니다.
4.<head>태그의 역할
<head>는 사용자 화면에 직접 보이지 않는 정보를 담는 영역입니다.
여기에는 다음과 같은 정보가 들어갑니다.
1) meta charset
<meta charset="UTF-8">
문자 인코딩을 설정합니다. UTF-8을 사용하면 한글이 깨지지 않습니다.
2) viewport 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
반응형 웹에서 필수 설정입니다.
모바일 기기에서 화면 크기에 맞게 콘텐츠를 표시하도록 합니다.
3) title 태그
<title>문서 제목</title>
브라우저 탭에 표시되는 제목이며, 검색 결과에 노출되는 중요한 SEO 요소입니다.
5. <body>태그의 역할
<body> 태그 안에는 실제 사용자에게 보이는 콘텐츠가 들어갑니다.
예를 들어:
- 제목(h1~h6)
- 문단(p)
- 이미지(img)
- 링크(a)
- 리스트(ul, ol)
- 버튼(button)
웹페이지 디자인은 CSS가 담당하지만, 콘텐츠 구조 자체는 모두 <body>안에서 정의됩니다.
6. HTML 구조가 중요한 이유
HTML 기본 구조를 정확히 이해해야 하는 이유는 다음과 같습니다.
- 브라우저 렌더링 안정성 확보
- 검색엔진 최적화(SEO) 개선
- 접근성 향상
- 유지보수 및 협업 효율 증가
특히, lang 속성은 SEO와 직결되는 요소이므로 정확히 작성하는 것이 좋습니다.
7. 초보자가 자주 하는 실수
- DOCTYPE 선언을 생략함
- lang 속성을 넣지 않음
- head 안에 콘텐츠를 작성함
- title을 비워둠
- meta viewport를 설정하지 않음
이러한 실수는 웹사이트 품질에 영향을 줄 수 있습니다.
하지만 요즘은 에디터의 기능을 사용하여 개발을 하기 때문에 이러한 실수들을 걱정할 필요가 없습니다.
8. 정리
HTML 기본 구조는 복잡하지 않습니다.
하지만 이 구조를 정확히 이해하는 것이 웹 개발의 출발점입니다.
다시 한 번 정리하면:
- <!DOCTYPE html> : HTML5 선언
- <html> : 전체 문서 감싸기
- <head> : 문서 정보 설정
- <body> : 실제 콘텐츠 영역
이 기본 틀 위에 CSS와 JavaScript가 더해지면서 하나의 완성된 웹사이트가 만들어집니다.