15년 넘게 운영하던 HTML 4.01 기반 사이트를 HTML5 구조로 바꿨습니다. 처음에는 문서 맨 위의 DOCTYPE만 바꾸면 되는 작업이라고 생각했습니다. 하지만 실제로 적용해보니 레이아웃, 이미지 여백, 폼 라벨, 헤딩 구조, 테이블 마크업까지 같이 보게 됐습니다.
특히 오래된 사이트는 화면은 잘 보여도 접근성 기준으로 보면 빠진 부분이 많았습니다. lang 속성이 없고, 검색창에는 label이 없고, 로고와 제목 구조도 섞여 있었습니다.
이 글은 HTML5 문법을 처음부터 설명하는 글이 아닙니다. 오래된 HTML 4.01 사이트를 손보면서 실제로 문제가 됐던 부분과, 접근성 점검을 위해 어떤 순서로 고쳤는지 정리한 글입니다.
DOCTYPE 변경 후 생긴 레이아웃 차이
가장 먼저 바꾼 것은 문서 형식이었습니다.
<!-- 이전 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- 이후 -->
<!DOCTYPE html>한 줄만 바꿨는데 일부 레이아웃이 틀어졌습니다. 이유는 쿼크스 모드에 가깝게 동작하던 화면이 HTML5 표준 모드 기준으로 다시 계산됐기 때문입니다.
특히 아래 문제가 눈에 띄었습니다.
- 테이블 기반 레이아웃 폭이 미세하게 틀어짐
- 이미지 아래에 예상하지 못한 여백이 생김
height: 100%로 맞춘 영역이 줄어듦- 오래된
align,bgcolor,border속성이 섞여 유지보수가 어려움
그래서 DOCTYPE만 바꾸지 않고 기본 CSS도 같이 정리했습니다.
*, *::before, *::after {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
table {
border-collapse: collapse;
}이미지 아래 여백은 img가 기본적으로 inline 요소처럼 기준선을 가지기 때문에 생기는 경우가 많았습니다. vertical-align: middle 또는 display: block으로 정리할 수 있었습니다.
html lang 속성 추가
오래된 페이지에는 <html> 태그에 언어 정보가 빠져 있었습니다.
<html>한국어 사이트라면 아래처럼 바꿨습니다.
<html lang="ko">이 한 줄은 작아 보이지만 접근성에서는 중요했습니다. 스크린 리더가 어떤 언어로 읽어야 하는지 판단할 수 있고, 브라우저 번역 제안도 더 자연스럽게 동작합니다.
영문 페이지가 섞여 있다면 페이지별로 다르게 줄 수도 있습니다.
<html lang="en">중요한 것은 사이트 전체에 아무 언어도 없는 상태를 방치하지 않는 것입니다.
테이블 레이아웃은 큰 영역부터 교체
HTML 4.01 시절 사이트는 전체 레이아웃이 테이블로 만들어진 경우가 많았습니다.
<table>
<tr>
<td id="header">상단</td>
</tr>
<tr>
<td id="menu">메뉴</td>
</tr>
<tr>
<td id="content">본문</td>
</tr>
</table>이걸 한 번에 전부 바꾸려고 하면 작업 범위가 너무 커집니다. 그래서 먼저 큰 영역만 HTML5 시맨틱 태그로 나눴습니다.
<header class="site-header">상단</header>
<nav class="site-nav" aria-label="주요 메뉴">메뉴</nav>
<main id="content">본문</main>
<footer class="site-footer">하단</footer>header, nav, main, footer는 화면을 보는 사람에게만 의미가 있는 것이 아닙니다. 보조기술과 검색엔진에도 문서 구조를 더 분명하게 전달합니다.
다만 모든 <table>을 없앨 필요는 없었습니다. 게시판 목록처럼 실제 표 형태의 데이터는 table이 맞습니다.
데이터 테이블은 caption과 th 보완
게시판 목록, 주문 내역, 게임 랭킹처럼 행과 열이 있는 데이터는 table을 유지했습니다. 대신 제목과 헤더 셀을 정리했습니다.
<table class="board-list">
<caption>자유게시판 글 목록</caption>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">제목</th>
<th scope="col">작성자</th>
<th scope="col">작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td><a href="/board/12">HTML5 전환 기록</a></td>
<td>관리자</td>
<td>2026-08-14</td>
</tr>
</tbody>
</table>caption은 표가 무엇을 보여주는지 알려줍니다. th scope="col"은 각 열의 제목을 명확히 해줍니다.
레이아웃용 table은 줄이고, 데이터용 table은 의미를 보강하는 방향으로 잡았습니다.
alt 속성 규칙 다시 정리
HTML5 전환 중 이미지 alt도 같이 점검했습니다. 이전에는 alt가 없거나, 모든 이미지에 비슷한 설명이 반복되는 경우가 많았습니다.
| 이미지 종류 | 처리 방식 | 예시 |
|---|---|---|
| 내용 이미지 | 이미지가 전달하는 정보 설명 | alt="테트리스 게임 플레이 화면" |
| 버튼 아이콘 | 모양보다 기능 설명 | alt="검색" 또는 버튼 aria-label |
| 장식 이미지 | 빈 alt | alt="" |
| 옆 텍스트와 중복 | 빈 alt | alt="" |
예를 들어 본문 이미지처럼 정보가 있는 이미지는 설명을 넣습니다.
<img src="/img/tetris-play-screen.jpg" alt="테트리스 게임 플레이 화면">반대로 메뉴 앞 화살표나 구분선 이미지는 장식이므로 빈 alt로 처리했습니다.
<img src="/img/icon_arrow.gif" alt="">alt는 많이 채우는 것이 아니라 이미지 역할에 맞게 판단해야 했습니다.
검색 폼 label 추가
검색창에는 placeholder만 있고 label이 없는 경우가 많았습니다.
<input type="text" name="q" placeholder="검색어 입력">하지만 placeholder는 label을 대체하지 못합니다. 입력을 시작하면 사라지고, 스크린 리더 사용자에게 안정적인 이름을 제공하지 못할 수 있습니다.
그래서 화면에는 보이지 않지만 보조기술에는 읽히는 label을 추가했습니다.
<form method="get" action="/search">
<label for="q" class="sr-only">검색어</label>
<input type="text" id="q" name="q" placeholder="검색어 입력">
<button type="submit">검색</button>
</form>sr-only 클래스는 아래처럼 정의했습니다.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}이렇게 하면 화면 디자인은 유지하면서 입력창의 이름을 명확하게 줄 수 있습니다.
오래된 태그와 속성 교체
HTML5로 바꾸면서 오래된 표현용 태그와 속성도 같이 정리했습니다.
| 이전 방식 | 변경 방향 | 예시 |
|---|---|---|
<font> | CSS 클래스 | class="text-red" |
<center> | CSS 정렬 | text-align: center |
align | CSS 정렬 | text-align, vertical-align |
bgcolor | CSS 배경색 | background-color |
border | CSS 테두리 | border: 1px solid #ddd |
<b>, <i> | 의미에 따라 선택 | <strong>, <em> 또는 CSS |
단순히 굵게 보이게 하려는 목적이면 CSS를 쓰고, 의미상 강조라면 strong이나 em을 사용했습니다.
<strong>중요 공지</strong>
<em>오늘까지만 적용됩니다</em>b, i를 무조건 모두 없애는 것보다, 의미 강조인지 디자인 표현인지 구분하는 것이 중요했습니다.
H1과 헤딩 구조 점검
DOCTYPE과 시맨틱 태그를 바꾸는 김에 H1 구조도 같이 봤습니다. 오래된 사이트에서는 로고, 게시판 이름, 글 제목이 모두 H1으로 감싸진 경우가 있었습니다.
<h1><img src="/img/logo.png" alt="사이트 로고"></h1>
<h1>공지사항</h1>
<h1>2월 정기 점검 안내</h1>이 구조는 페이지 주제가 흐려집니다. 그래서 화면 종류에 따라 H1을 하나만 출력하도록 바꿨습니다.
<?php
if ($isDetail) {
echo '<p class="board-name">' . $e($boardName) . '</p>';
echo '<h1 class="post-title">' . $e($postTitle) . '</h1>';
} else {
echo '<h1 class="board-name">' . $e($boardName) . '</h1>';
}
?>그리고 브라우저 콘솔에서 H1 개수를 확인했습니다.
document.querySelectorAll('h1').length목표는 목록, 상세, 검색 결과 페이지 모두 H1이 하나씩 있는 상태였습니다.
키보드 이동과 포커스 확인
접근성 점수보다 실제로 더 중요했던 것은 키보드 이동이었습니다. Tab 키만으로 메뉴, 검색창, 게시글 링크, 페이지네이션에 접근할 수 있는지 확인했습니다.
특히 아래 항목을 봤습니다.
- 현재 포커스 위치가 눈에 보이는가
- 메뉴를 키보드로 이동할 수 있는가
- 검색창에 label이 연결되어 있는가
- 페이지네이션 링크가 순서대로 이동되는가
- 새 창 링크는 새 창 안내가 있는가
- 스킵 링크로 본문으로 바로 이동할 수 있는가
필요한 경우 본문 바로가기 링크도 추가했습니다.
<a href="#content" class="skip-link">본문 바로가기</a>.skip-link {
position: absolute;
left: -9999px;
top: 0;
}
.skip-link:focus {
left: 10px;
top: 10px;
z-index: 1000;
background: #000;
color: #fff;
padding: 8px 12px;
}점검 도구 점수가 높아도 Tab으로 주요 기능에 접근할 수 없다면 실제 개선이라고 보기 어려웠습니다.
검증 도구로 마지막 확인
수정 후에는 도구로도 확인했습니다.
- W3C Markup Validator로 문법 오류 확인
- Lighthouse Accessibility 점수 확인
- 브라우저 콘솔에서 H1 개수 확인
- 키보드 Tab 이동 직접 확인
- 모바일 화면에서 레이아웃 깨짐 확인
특히 HTML5 전환 직후에는 레이아웃이 깨진 곳이 없는지 반드시 봐야 합니다. DOCTYPE 변경으로 표준 모드가 적용되면서 오래된 CSS의 숨은 문제가 드러날 수 있습니다.
적용 후 달라진 점
수정 후에는 눈에 띄는 디자인 변화보다 구조적인 변화가 컸습니다.
- HTML5 DOCTYPE 적용
<html lang="ko">추가- 큰 영역을
header,nav,main,footer로 분리 - 데이터 테이블에
caption,th,scope보완 - 이미지 alt 규칙 정리
- 검색 폼 label 추가
- H1과 헤딩 순서 정리
- 키보드 이동 흐름 개선
검색 순위가 하루아침에 바뀌는 작업은 아니었습니다. 하지만 문서 구조가 명확해지고, 이후 SEO와 접근성 작업을 이어가기 쉬워졌습니다.
HTML5 전환 체크리스트
문법 변경보다 구조 정리 우선
HTML5 전환은 단순히 문서 맨 위 한 줄을 바꾸는 작업이 아니었습니다. DOCTYPE을 바꾸는 순간 표준 모드 기준으로 레이아웃이 다시 계산되고, 오래된 마크업의 문제도 같이 드러났습니다.
그래서 저는 문법 치환보다 구조 정리를 먼저 봤습니다. 큰 영역을 시맨틱 태그로 나누고, 이미지 alt와 폼 label을 보완하고, H1과 테이블 구조를 정리했습니다.
HTML5로 바꿨다고 검색 순위가 바로 오르는 것은 아닙니다. 하지만 검색엔진과 보조기술이 페이지를 이해하기 쉬워지고, 이후 유지보수가 훨씬 편해집니다. 오래된 사이트를 계속 운영할 계획이라면 DOCTYPE 변경을 시작점으로 접근성 체크리스트까지 함께 보는 편이 좋았습니다.