HTML 강좌 / 시맨틱 요소로 페이지 영역 나누기
HTML의 의미 있는 영역 요소는 페이지의 각 부분이 무슨 역할을 하는지 표현합니다. 메뉴에는 nav, 핵심 내용에는 main, 독립적인 글에는 article을 쓰면 시각적 배치와 별개로 문서 구조를 이해하기 쉬워집니다.
영역 요소의 역할 구분하기
header는 페이지나 글의 도입부입니다. 로고, 제목, 탐색 요소 등이 들어갈 수 있습니다.nav는 주요 탐색 링크를 묶습니다. 링크가 있다는 이유만으로 모든 영역을nav로 만들 필요는 없습니다.main은 페이지의 핵심 내용입니다. 한 문서에서 보이는 핵심 콘텐츠를 하나의main으로 묶는 것이 일반적입니다.article은 독립적으로 읽거나 배포할 수 있는 글·게시물 등에,section은 주제별 구역에 사용합니다.section에는 내용을 설명하는 제목을 두는 것이 좋습니다.aside는 주된 내용과 간접적으로 관련된 보조 정보에,footer는 페이지나 글의 끝 정보에 사용합니다.
이 요소들은 화면의 위치를 자동으로 정해 주지 않습니다. 사이드바를 만들려고 aside를 쓰는 것이 아니라, 그 내용이 본문을 보충하는 경우에 쓰고 배치는 CSS로 정합니다.
의미 요소를 쓴다고 검색 순위나 접근성이 자동으로 개선되지는 않습니다. 실제 내용이 요소의 뜻과 맞고, 제목과 링크를 따라 읽었을 때 정보의 흐름이 자연스러워야 합니다. 예를 들어 main에는 사이트마다 반복되는 메뉴보다 그 페이지 고유의 내용을 넣습니다.
작은 페이지를 의미에 맞게 나누기
다음 예제는 페이지 전체를 작성한 코드입니다. header의 페이지 내 메뉴, main의 글과 보조 정보, footer의 끝 정보를 한 문서에서 확인할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>봄에 심기 좋은 식물 | 작은 정원</title>
</head>
<body>
<header>
<p>작은 정원</p>
<nav aria-label="페이지 내 메뉴">
<a href="#article">글 보기</a>
<a href="#sunlight">햇빛 조건</a>
</nav>
</header>
<main>
<article id="article">
<h1>봄에 심기 좋은 식물</h1>
<section id="sunlight">
<h2>햇빛 조건</h2>
<p>식물마다 필요한 햇빛의 양이 다릅니다.</p>
</section>
</article>
<aside>
<p>심기 전에 지역의 마지막 서리 날짜를 확인하세요.</p>
</aside>
</main>
<footer>
<p>작은 정원 안내</p>
</footer>
</body>
</html>
코드 전체를 index.html로 저장하고 브라우저에서 열어 보세요. 제목·메뉴·글·보조 정보·끝 정보가 대체로 위에서 아래로 나타납니다. ‘햇빛 조건’을 누르면 같은 페이지의 해당 구역으로 이동합니다. 메뉴의 href="#sunlight"와 구역의 id="sunlight"가 연결되어 있기 때문입니다.
옆으로 배치하고 싶다면 HTML 구조를 바꾸기보다 CSS 레이아웃을 추가하세요. 예제 안의 h1은 저장한 독립 HTML 문서의 제목이며, 이 강좌 본문에 제목 태그를 하나 더 넣는 것이 아닙니다.
section과 article은 어떻게 선택할까?
독립된 블로그 글 하나는 article에 적합합니다. 그 글 안에서 ‘준비물’과 ‘방법’처럼 주제를 나누는 부분은 각각 section이 될 수 있습니다. 반면 단순히 테두리나 배경색을 주기 위해 묶는 요소라면 section보다 의미가 없는 div가 알맞습니다.
header와 footer는 페이지 전체에만 쓰는 요소가 아닙니다. 독립적인 article 안에서 글의 도입과 끝 정보를 묶는 데도 사용할 수 있습니다. 요소의 이름보다 그 내용의 역할을 먼저 판단하세요. 자세한 정의는 MDN HTML 요소 참고 문서에서 확인할 수 있습니다.
주제별 제목이 필요한 부분이라고 해서 항상 section으로 감쌀 필요는 없습니다. 단순한 문단과 제목만으로 계층이 분명하다면 그대로 두어도 됩니다. 반대로 뉴스 목록처럼 각 항목을 따로 공유해도 이해할 수 있다면 각 항목을 article로 만드는 편이 자연스럽습니다.
구조를 점검할 때
브라우저에서 모양이 비슷해 보이더라도 문서의 제목과 메뉴, 핵심 내용이 순서대로 읽히는지 확인하세요. main을 여러 개 만들거나, 제목 없는 구역을 무작정 section으로 감싸거나, 단지 옆에 표시한다는 이유로 aside를 쓰는 실수를 피하면 구조를 이해하기 쉬워집니다.
HTML 표의 기본 요소인 table, tr, th, td를 사용해 행과 열이 있는 데이터를 만들고, thead와 tbody로 구조를 나누는 방법을 설명합니다.
HTML h1~h6 제목 태그와 p 문단 태그의 역할 및 올바른 구조를 예제로 설명합니다. 제목 단계 구성, br 줄바꿈과 자주 발생하는 작성 오류도 함께 확인할 수 있습니다.
HTML의 em, strong, q, blockquote, abbr, code, kbd를 상황에 맞게 쓰는 방법을 예제로 설명합니다. 글자의 모양이 아니라 텍스트의 의미를 표시하는 기준을 익힐 수 있습니다.
HTML 강좌 / HTML의 개념과 웹페이지에서 하는 역할
HTML은 웹페이지의 콘텐츠에 구조와 의미를 부여합니다. HTML·CSS·JavaScript의 역할을 비교하고, 간단한 코드가 브라우저에 표시되는 과정과 첫 HTML 파일을 만드는 방법을 알아봅니다.
HTML 요소·태그·속성·주석의 기본 문법을 예제로 설명합니다. 빈 요소, 속성값 따옴표, 태그 중첩에서 주의할 점과 문법 확인 방법도 다룹니다.
HTML 링크의 href에 절대경로와 상대경로를 쓰고, 문서 내부 이동·이메일·새 탭·다운로드 링크를 만드는 방법을 예제로 설명합니다.
HTML 강좌 / 반응형 이미지: srcset, sizes, picture
HTML의 srcset과 sizes로 화면에 맞는 이미지 파일을 선택하고, picture로 좁은 화면의 이미지 구도를 바꾸는 방법을 실제 파일 예제로 설명합니다.
header, nav, main, section, article, aside, footer의 역할을 구분하고 간단한 페이지를 의미에 맞게 구성하는 방법을 설명합니다.
HTML 강좌 / 이미지 넣기: img, alt, 크기
HTML img 요소로 이미지를 넣고 alt 대체 텍스트와 width·height를 설정하는 방법을 설명합니다. 실제 예제 이미지로 경로와 크기 문제도 확인할 수 있습니다.
HTML / Tutorial / 양식에 안내 문구 추가하는 방법
input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. 만약 기본값이 아니라, 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.