[WEB-001][입문] HTML 문서와 시맨틱 구조 이해하기
페이지 정보
본문
[이번 수업]
HTML은 화면을 예쁘게 꾸미는 언어가 아니라 웹 콘텐츠의 의미와 구조를 표시하는 마크업 언어입니다. 제목은 제목답게, 메뉴는 탐색 영역답게 표시하면 브라우저뿐 아니라 검색엔진과 화면낭독기도 문서의 구조를 이해할 수 있습니다. 이번에는 의미가 드러나는 최소 웹 문서를 만듭니다.
[선수지식]
TOOL-001에서 편집기로 파일을 만들고 작업 폴더를 여는 방법을 알면 됩니다. JavaScript는 아직 사용하지 않습니다.
[학습목표]
1. HTML 요소·태그·속성의 차이를 설명할 수 있습니다.
2. head와 body의 역할을 구분할 수 있습니다.
3. header·nav·main·article·section·footer로 문서 구조를 만들 수 있습니다.
[핵심개념]
HTML 요소(element)는 여는 태그, 내용, 닫는 태그로 이루어집니다. 예를 들어 <p>안녕하세요</p> 전체가 문단 요소이고 <p>와 </p>가 태그입니다. lang="ko"처럼 태그에 추가하는 정보는 속성(attribute)입니다. 일부 요소는 meta처럼 별도의 닫는 태그가 없습니다.
<!doctype html>은 브라우저가 현대 HTML 문서로 해석하도록 알립니다. html은 문서 전체의 뿌리이고 lang="ko"는 주된 언어가 한국어임을 나타냅니다. head에는 화면 본문이 아닌 문자 인코딩, 모바일 화면 설정, 페이지 제목 같은 문서 정보가 들어갑니다. 실제로 사용자에게 보이는 콘텐츠는 body 안에 둡니다.
시맨틱(semantic)은 ‘의미가 드러난다’는 뜻입니다. div는 범용 상자지만 header는 소개 영역, nav는 주요 탐색 링크, main은 페이지의 핵심 내용, article은 독립적으로 이해 가능한 글, section은 주제별 묶음, footer는 보조 정보를 뜻합니다. 적절한 요소를 사용하면 별도의 role 속성을 중복해서 붙이지 않아도 보조기술이 문서 영역을 파악할 수 있습니다.
제목은 h1부터 h6까지 중요도와 계층을 나타냅니다. 글자 크기를 위해 번호를 고르지 말고 문서 구조에 맞춰 h1 아래에 h2를 배치하세요. 모양은 나중에 CSS로 바꿉니다.
[따라하기]
it-study 폴더에 index.html을 만들고 아래 내용을 저장합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 IT 학습 기록</title>
</head>
<body>
<header>
<p>나의 IT 학습실</p>
</header>
<nav aria-label="주요 메뉴">
<a href="#lesson">오늘의 학습</a>
</nav>
<main id="lesson">
<article>
<h1>HTML 시맨틱 구조</h1>
<p>의미에 맞는 요소로 첫 문서를 만들었습니다.</p>
<section>
<h2>오늘의 목표</h2>
<ul>
<li>문서 구조 이해하기</li>
<li>브라우저에서 확인하기</li>
</ul>
</section>
</article>
</main>
<footer>
<p>학습 기록 1일차</p>
</footer>
</body>
</html>
Windows·macOS·Linux 모두 index.html을 더블클릭하거나 브라우저로 끌어 놓으면 됩니다. 탭 제목은 ‘나의 IT 학습 기록’, 본문에는 학습실·메뉴·제목·목록·푸터가 표시됩니다. 디자인이 단순해도 구조는 이미 완성된 것입니다.
[흔한 실수]
보이는 모든 영역을 div로만 만들거나, 큰 글씨가 필요하다는 이유로 h1 다음에 h4를 쓰지 마세요. main은 보통 페이지당 하나만 사용합니다. section은 단순한 여백용 상자가 아니며 주제를 설명하는 제목과 함께 쓰는 편이 좋습니다. 태그의 꺾쇠·닫는 태그·따옴표가 빠지면 브라우저가 추측해서 보여줄 수 있지만 문서 구조는 깨질 수 있으므로 HTML 검사기로 확인하세요.
[보안 주의]
HTML 파일에 비밀번호·API 키·개인정보를 적으면 브라우저의 소스 보기로 누구나 확인할 수 있습니다. 외부에서 받은 HTML을 그대로 게시하면 script나 위험한 링크가 포함될 수 있으므로 신뢰할 수 없는 입력은 서버에서 검증하고 안전하게 이스케이프해야 합니다. 이번 실습에서는 자신이 작성한 로컬 파일만 엽니다.
[직접 해볼 과제]
‘배운 내용’이라는 두 번째 section과 h2를 추가하고, 세 개의 항목을 목록으로 작성하세요. 브라우저에서 개발자 도구의 Elements 탭을 열어 header·nav·main·footer가 계층대로 들어갔는지 확인하고 W3C HTML 검사기로 오류도 점검해 보세요.
[확인문제]
1. head와 body에는 각각 어떤 정보가 들어가나요?
2. div 대신 main이나 nav를 사용하면 어떤 사용자가 도움을 받을까요?
3. h1·h2를 글자 크기가 아니라 문서 계층에 따라 선택해야 하는 이유는 무엇인가요?
[다음 학습]
다음 게시 과정은 BACK-001 ‘서버와 요청·응답의 구조’입니다. WEB 트랙의 다음 단계는 WEB-002 ‘CSS 박스 모델·선택자·레이아웃’입니다.
[공식 참고 자료]
WHATWG HTML 표준
https://html.spec.whatwg.org/multipage/sections.html
MDN — Structuring documents
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
W3C WAI — Page Structure Tutorial
https://www.w3.org/WAI/tutorials/page-structure/
HTML은 화면을 예쁘게 꾸미는 언어가 아니라 웹 콘텐츠의 의미와 구조를 표시하는 마크업 언어입니다. 제목은 제목답게, 메뉴는 탐색 영역답게 표시하면 브라우저뿐 아니라 검색엔진과 화면낭독기도 문서의 구조를 이해할 수 있습니다. 이번에는 의미가 드러나는 최소 웹 문서를 만듭니다.
[선수지식]
TOOL-001에서 편집기로 파일을 만들고 작업 폴더를 여는 방법을 알면 됩니다. JavaScript는 아직 사용하지 않습니다.
[학습목표]
1. HTML 요소·태그·속성의 차이를 설명할 수 있습니다.
2. head와 body의 역할을 구분할 수 있습니다.
3. header·nav·main·article·section·footer로 문서 구조를 만들 수 있습니다.
[핵심개념]
HTML 요소(element)는 여는 태그, 내용, 닫는 태그로 이루어집니다. 예를 들어 <p>안녕하세요</p> 전체가 문단 요소이고 <p>와 </p>가 태그입니다. lang="ko"처럼 태그에 추가하는 정보는 속성(attribute)입니다. 일부 요소는 meta처럼 별도의 닫는 태그가 없습니다.
<!doctype html>은 브라우저가 현대 HTML 문서로 해석하도록 알립니다. html은 문서 전체의 뿌리이고 lang="ko"는 주된 언어가 한국어임을 나타냅니다. head에는 화면 본문이 아닌 문자 인코딩, 모바일 화면 설정, 페이지 제목 같은 문서 정보가 들어갑니다. 실제로 사용자에게 보이는 콘텐츠는 body 안에 둡니다.
시맨틱(semantic)은 ‘의미가 드러난다’는 뜻입니다. div는 범용 상자지만 header는 소개 영역, nav는 주요 탐색 링크, main은 페이지의 핵심 내용, article은 독립적으로 이해 가능한 글, section은 주제별 묶음, footer는 보조 정보를 뜻합니다. 적절한 요소를 사용하면 별도의 role 속성을 중복해서 붙이지 않아도 보조기술이 문서 영역을 파악할 수 있습니다.
제목은 h1부터 h6까지 중요도와 계층을 나타냅니다. 글자 크기를 위해 번호를 고르지 말고 문서 구조에 맞춰 h1 아래에 h2를 배치하세요. 모양은 나중에 CSS로 바꿉니다.
[따라하기]
it-study 폴더에 index.html을 만들고 아래 내용을 저장합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 IT 학습 기록</title>
</head>
<body>
<header>
<p>나의 IT 학습실</p>
</header>
<nav aria-label="주요 메뉴">
<a href="#lesson">오늘의 학습</a>
</nav>
<main id="lesson">
<article>
<h1>HTML 시맨틱 구조</h1>
<p>의미에 맞는 요소로 첫 문서를 만들었습니다.</p>
<section>
<h2>오늘의 목표</h2>
<ul>
<li>문서 구조 이해하기</li>
<li>브라우저에서 확인하기</li>
</ul>
</section>
</article>
</main>
<footer>
<p>학습 기록 1일차</p>
</footer>
</body>
</html>
Windows·macOS·Linux 모두 index.html을 더블클릭하거나 브라우저로 끌어 놓으면 됩니다. 탭 제목은 ‘나의 IT 학습 기록’, 본문에는 학습실·메뉴·제목·목록·푸터가 표시됩니다. 디자인이 단순해도 구조는 이미 완성된 것입니다.
[흔한 실수]
보이는 모든 영역을 div로만 만들거나, 큰 글씨가 필요하다는 이유로 h1 다음에 h4를 쓰지 마세요. main은 보통 페이지당 하나만 사용합니다. section은 단순한 여백용 상자가 아니며 주제를 설명하는 제목과 함께 쓰는 편이 좋습니다. 태그의 꺾쇠·닫는 태그·따옴표가 빠지면 브라우저가 추측해서 보여줄 수 있지만 문서 구조는 깨질 수 있으므로 HTML 검사기로 확인하세요.
[보안 주의]
HTML 파일에 비밀번호·API 키·개인정보를 적으면 브라우저의 소스 보기로 누구나 확인할 수 있습니다. 외부에서 받은 HTML을 그대로 게시하면 script나 위험한 링크가 포함될 수 있으므로 신뢰할 수 없는 입력은 서버에서 검증하고 안전하게 이스케이프해야 합니다. 이번 실습에서는 자신이 작성한 로컬 파일만 엽니다.
[직접 해볼 과제]
‘배운 내용’이라는 두 번째 section과 h2를 추가하고, 세 개의 항목을 목록으로 작성하세요. 브라우저에서 개발자 도구의 Elements 탭을 열어 header·nav·main·footer가 계층대로 들어갔는지 확인하고 W3C HTML 검사기로 오류도 점검해 보세요.
[확인문제]
1. head와 body에는 각각 어떤 정보가 들어가나요?
2. div 대신 main이나 nav를 사용하면 어떤 사용자가 도움을 받을까요?
3. h1·h2를 글자 크기가 아니라 문서 계층에 따라 선택해야 하는 이유는 무엇인가요?
[다음 학습]
다음 게시 과정은 BACK-001 ‘서버와 요청·응답의 구조’입니다. WEB 트랙의 다음 단계는 WEB-002 ‘CSS 박스 모델·선택자·레이아웃’입니다.
[공식 참고 자료]
WHATWG HTML 표준
https://html.spec.whatwg.org/multipage/sections.html
MDN — Structuring documents
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
W3C WAI — Page Structure Tutorial
https://www.w3.org/WAI/tutorials/page-structure/
- 이전글[BACK-001][입문] 서버와 HTTP 요청·응답의 구조 26.08.29
- 다음글[JSTS-001][입문] JavaScript 실행 환경과 기본 문법 26.08.28
댓글목록
등록된 댓글이 없습니다.