[HTML] 13. HTML 마무리 체크리스트 (접근성 + 시맨틱 + 폼)

[HTML] 13. HTML 마무리 체크리스트 (접근성 + 시맨틱 + 폼)

이번 글은 HTML을 “끝내는” 글입니다.
태그를 많이 아는 것보다 중요한 건, 구조가 좋은 HTML을 작성하는 것입니다.

특히 아래 3가지는 초보/실무를 가르는 기준이 됩니다.

• ① 시맨틱 구조(문서 역할이 보이는가?)
• ② 접근성(누구나 사용 가능한가?)
• ③ 폼 작성(서버로 제대로 전송되는가?)

---

1. 시맨틱 구조 체크리스트

시맨틱 태그는 “디자인”이 아니라 “의미”입니다.
화면은 비슷해도 문서 품질이 달라집니다.

✅ 권장 구조

<header>...</header>
<nav>...</nav>
<main>
  <section>
    <h2>...</h2>
    <article>...</article>
  </section>
</main>
<footer>...</footer>

❌ 자주 하는 실수

<div>상단</div>
<div>메뉴</div>
<div>본문</div>
<div>하단</div>

div는 틀릴 건 없지만, 문서 의미가 사라집니다.
가능하면 의미 있는 태그 → 애매한 부분만 div로 보완하는 방식이 좋습니다.

---

2. 제목(h1~h6) 계층 체크리스트

제목 태그는 “크기”가 아니라 “문서 구조”입니다.

✅ 좋은 예

<h1>사이트 제목</h1>
  <h2>공지사항</h2>
    <h3>공지 1</h3>
  <h2>게시판</h2>
    <h3>게시글 1</h3>

❌ 나쁜 예

<h3>사이트 제목</h3>
<h1>공지사항</h1>
<h5>게시판</h5>

• h1은 보통 페이지 대표 제목 1개
• h2~h3는 큰 주제 → 작은 주제 순서로

---

3. 이미지 alt 체크리스트

alt는 “옵션”이 아니라 기본입니다. 이미지가 깨지거나, 화면을 못 보는 사용자에게 설명이 됩니다.

✅ 좋은 예

<img src="logo.png" alt="사이트 로고">

❌ 나쁜 예

<img src="logo.png">

Output (이미지 실패 시)

(이미지가 로딩 실패하면 alt 텍스트가 표시되거나, 스크린리더가 읽습니다)

alt는 “사진.jpg” 같은 파일명 대신, 사람이 이해할 문장으로 작성하는 것이 좋습니다.

---

4. 링크(a) 체크리스트

링크는 “어디로 가는지”가 텍스트만 봐도 드러나야 좋습니다.

✅ 좋은 예

<a href="/notice">공지사항 보기</a>

❌ 나쁜 예

<a href="/notice">여기 클릭</a>

새 창으로 열 때는 보안상 아래처럼 작성하는 습관이 좋습니다.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">외부 링크</a>

---

5. 폼(form) 체크리스트 (가장 중요)

폼은 “입력만 만들면 끝”이 아닙니다.
서버로 값이 전달되려면 name이 있어야 합니다.

✅ 좋은 예 (label + id + name)

<label for="userid">아이디</label>
<input id="userid" type="text" name="userid" required>

• label for="userid" ↔ input id="userid" 연결
• name="userid"가 있어야 서버로 전송됨

❌ 나쁜 예 (name 없음)

<input type="text">

입력은 되지만, 서버로 값이 전달되지 않습니다.

---

6. 최종 체크리스트 (이것만 보면 됩니다)

• 문서 구조가 header/nav/main/footer로 나뉘어 있는가?
• h1~h3 계층이 자연스러운가?
• 이미지에 alt가 있는가?
• 링크 텍스트만 봐도 목적을 알 수 있는가?
• 폼 입력 요소에 name이 있는가?
• label이 input과 연결되어 있는가?

여기까지 지키면 HTML은 “기초를 제대로 한 상태”입니다.
이제 다음은 CSS로 꾸미기로 넘어가면 됩니다.