HTML 기본 구조 쉽게 이해하기
HTML 파일을 처음 만들었는데 doctype, head, body가 각각 무슨 역할인지 헷갈리는 상황
- 문제 상황 확인
- 짧은 코드로 재현
- 브라우저에서 결과 점검
HTML 기본 구조에서 먼저 볼 부분
HTML 문서는 화면에 보이는 내용과 브라우저가 참고하는 정보를 나누어 작성합니다. 처음에는 외울 것보다 큰 틀을 이해하는 것이 중요합니다.
doctype은 브라우저에게 이 문서가 최신 HTML 방식으로 작성되었다고 알려주는 신호입니다. 화면에 직접 보이지는 않지만 문서의 출발점 역할을 합니다.
head 영역에는 제목, 문자 인코딩, 모바일 화면 설정처럼 브라우저와 검색엔진이 참고하는 정보가 들어갑니다. 사용자에게 보이는 본문은 body 안에 작성합니다.
초보 단계에서는 태그를 많이 아는 것보다 문서 구조를 안정적으로 만드는 습관이 더 중요합니다. 구조가 흔들리면 CSS나 JavaScript를 붙일 때도 원인을 찾기 어려워집니다.
기본 HTML 문서
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>첫 HTML 문서</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>처음 만든 웹페이지입니다.</p>
</body>
</html>이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.
잘못 작성했을 때 나타나는 흐름
HTML 글은 화면에 보이는 모양보다 문서가 어떤 의미로 읽히는지를 먼저 봅니다.
브라우저 개발자 도구의 Elements 탭에서 실제 태그 구조가 예상대로 만들어졌는지 확인하면 오류를 줄일 수 있습니다.
검색엔진과 보조 기술은 태그의 의미를 참고하므로, 단순히 div로 감싸기보다 상황에 맞는 태그를 선택하는 습관이 좋습니다.
브라우저에서 직접 확인하는 순서
먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.
초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.
실습 후 점검할 항목
- doctype을 문서 맨 위에 작성했는지 확인하기
- html 태그에 lang="ko"를 넣었는지 확인하기
- meta charset과 viewport가 head 안에 있는지 확인하기
- 화면에 보이는 내용은 body 안에 작성하기
공식 문서로 더 확인하기: HTML 공식 문서