레슨 1 / 9·15분
HTML 기본 구조
HTML이란?
HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 브라우저는 HTML 문서를 읽고 화면에 내용을 표시합니다. 모든 웹 페이지는 HTML을 기반으로 만들어지며, CSS와 JavaScript가 그 위에 스타일과 동작을 더합니다.
HTML 문서의 기본 구조
모든 HTML 문서는 선언으로 시작합니다. 이 선언은 브라우저에게 해당 문서가 HTML5 표준을 따른다는 것을 알려줍니다. 그 다음 태그 안에 와 두 영역으로 나뉩니다.
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>HTML을 배우고 있습니다.</p>
</body>
</html>- •
- HTML5 문서임을 선언 - •
- 문서의 루트 요소, 언어 설정 - •
- 메타 정보, 타이틀, 외부 리소스 연결 - •
- 실제 화면에 표시되는 콘텐츠
주요 HTML 태그
HTML에는 다양한 태그가 있으며, 각 태그는 콘텐츠의 의미와 역할을 나타냅니다. 아래는 가장 자주 사용되는 태그들입니다.
html
<!-- 제목 태그: h1(가장 큼) ~ h6(가장 작음) -->
<h1>메인 제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
<!-- 문단 -->
<p>이것은 하나의 문단입니다.</p>
<!-- 링크 -->
<a href="https://example.com">예제 사이트로 이동</a>
<!-- 이미지 -->
<img src="photo.jpg" alt="사진 설명" />
<!-- 순서 없는 목록 -->
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
<!-- 순서 있는 목록 -->
<ol>
<li>첫 번째</li>
<li>두 번째</li>
</ol>
<!-- 영역 구분 -->
<div>블록 레벨 컨테이너</div>
<span>인라인 컨테이너</span>💡
는 블록 레벨 요소로 줄 전체를 차지하고, 은 인라인 요소로 텍스트 흐름 안에서 일부분만 감쌉니다. 시맨틱 태그(, , )를 적극 활용하면 검색 엔진 최적화(SEO)와 접근성에 유리합니다.