문서 구조화
문서 구조화
본 페이지는 퍼블리싱 작업중 HTML의 표준화를 위해 작성되었습니다.
HTML5 문서 구조 기본
HTML5에서는 웹 문서를 의미적 요소(semantic element)로 구분하여 문서의 구조를 명확히 합니다. 이를 통해 콘텐츠의 의미와 중요도를 쉽게 파악할 수 있습니다. 주요 의미적 요소들은 다음과 같습니다.
제목 태그 (<h1>~<h6>)
콘텐츠의 구조와 중요도에 따라 제목을 지정하여 계층 구조를 만듭니다.
<h1>태그는 페이지당 하나만 사용하며, 가장 중요한 제목으로 설정.<h2>~<h6>태그는 내용의 중요도에 따라 순차적으로 사용.
<h1>페이지 메인 제목</h1>
<h2>부제목 1</h2>
<h3>소제목 1.1</h3>
<h2>부제목 2</h2>aria-label 속성
aria-label 속성이 필요한 경우
1. 레이블 텍스트가 없는 경우
<input> 필드에 <label> 요소가 없거나 시각적으로 레이블이 없는 경우에는 aria-label이 필요합니다. 예를 들어, 검색 상자, 텍스트 입력 창 등에 추가하여 필드의 목적을 설명할 수 있습니다.
<input type="text" aria-label="Search">2. 레이블을 커스터마이징하고 싶은 경우:
레이블을 커스터마이징하거나 추가 설명이 필요할 때도 aria-label을 사용하여 스크린 리더가 필드의 의미를 더 잘 전달하도록 할 수 있습니다.
3. 아이콘만 있는 입력 필드
aria-label은 화면에 보이는 레이블이 없고 아이콘으로만 이루어진 입력 필드에 유용합니다.
<input type="text" aria-label="Phone number">
<i class="icon-phone"></i>
aria-label 속성이 필요하지 않은 경우
1. 명확한 레이블이 있는 경우
<label> 요소로 이미 연결된 레이블이 있다면 aria-label을 추가할 필요없음
<label for="username">Username</label>
<input type="text" id="username">