웹 문서의 구조를 만드는 HTML의 역할과 기본 태그, 시맨틱 마크업을 배운다.
HTML 시작하기
HTML은 웹 페이지의 뼈대를 만드는 언어입니다. 제목, 문단, 목록, 링크, 이미지, 폼처럼 화면에 놓이는 정보의 의미와 구조를 브라우저에 알려 줍니다.
학습 목표
- HTML 문서가 어떤 구조로 이루어지는지 이해한다.
- 제목, 문단, 링크, 이미지, 목록 태그를 사용한다.
header,main,section,article,footer같은 시맨틱 태그의 역할을 안다.- 접근성과 검색 엔진이 HTML 구조를 어떻게 활용하는지 이해한다.
HTML의 역할
HTML은 디자인을 담당하는 언어가 아닙니다. 디자인은 CSS가 맡고, 동작은 JavaScript가 맡습니다. HTML은 먼저 콘텐츠의 의미를 정확히 표현해야 합니다.
<main>
<h1>HTML 시작하기</h1>
<p>HTML은 웹 문서의 구조를 만드는 언어입니다.</p>
<a href="/learn/css">CSS 강좌 보기</a>
</main>
위 코드에서 h1은 페이지의 가장 중요한 제목이고, p는 문단, a는 다른 페이지로 이동하는 링크입니다.
기본 문서 구조
대부분의 HTML 문서는 다음 구조에서 시작합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>문서 제목</title>
</head>
<body>
<h1>첫 HTML 문서</h1>
</body>
</html>
head에는 브라우저와 검색 엔진이 참고하는 정보가 들어가고, body에는 사용자에게 보이는 콘텐츠가 들어갑니다.
시맨틱 마크업
시맨틱 마크업은 div만 반복해서 쓰는 대신 콘텐츠의 의미에 맞는 태그를 사용하는 방식입니다.
header: 사이트나 섹션의 머리말nav: 주요 이동 링크 묶음main: 페이지의 핵심 콘텐츠section: 주제별 콘텐츠 묶음article: 독립적으로 읽을 수 있는 글footer: 바닥글
요약
HTML은 웹 페이지의 구조와 의미를 표현합니다. 좋은 HTML은 CSS와 JavaScript가 붙기 전에도 읽을 수 있어야 하며, 접근성과 SEO의 출발점이 됩니다.
댓글 0
“HTML” 강좌에 대한 댓글입니다.