HTML 검사기는 공개된 페이지의 마크업 문제를 찾는 데 쓰입니다. 경고 수를 줄이기 전에 어떤 요소에서 문제가 생겼는지, 어떤 템플릿이 그 HTML을 만드는지 확인하세요. 수정은 프로젝트의 소스 코드에서 진행하고, 변경 사항을 게시한 뒤 같은 페이지를 다시 검사합니다.
페이지 유형별로 URL 선택하기
상품 상세 페이지, 글, 문의 폼처럼 구조가 다른 페이지를 고릅니다. 리디렉션이 있다면 최종 URL을 기록하세요. 글 하나에서 오류가 없었다고 해서 별도 템플릿의 결제 화면이나 문의 폼까지 확인한 것은 아닙니다.
Milten HTML 검사에 URL을 입력한 뒤 대상 페이지와 지적 사항을 남깁니다. 어떤 요소를 확인해야 하는지 기록하면 수정 전후를 비교하기 쉽습니다. 완료되지 않은 검사는 성공으로 계산하지 말고 확인하지 못한 범위로 남기세요.
경고를 코드 수정 작업으로 바꾸기
다음은 고객 사이트의 측정 결과가 아닌 설명용 예시입니다. 한 폼의 두 입력란에 같은 ID인 email이 있다고 가정합니다. 각 입력란에 다른 ID를 지정하고 연결된 레이블의 for 값도 함께 바꿉니다.
레이블을 눌렀을 때 의도한 입력란이 선택되는지 확인하세요. 해당 컴포넌트를 재사용하는 다른 페이지도 살펴봅니다. MDN의 label 요소 설명은 레이블과 입력란의 연결 관계를 설명합니다.
경고를 지우기 위해 속성이나 내용을 무작정 삭제하지 마세요. 마크업을 생성하는 원인을 수정하고 실제 사용자가 수행하는 동작을 확인해야 합니다.
HTML 유효성, 접근성, SEO 구분하기
HTML 유효성 검사를 통과해도 모든 사람이 페이지를 편하게 사용할 수 있다는 뜻은 아닙니다. 키보드로 폼을 사용하고 입력란 이름과 포커스 표시를 확인하세요. 자동 접근성 검사는 이 수동 확인을 보완합니다.
canonical과 색인 지시문은 기술 SEO 검사에서 따로 확인합니다. 마크업의 규칙 준수 여부는 W3C Nu Html Checker로도 살펴볼 수 있습니다. HTML 오류 수정만으로 검색 노출이나 순위 상승을 보장할 수는 없습니다.
게시된 수정 사항 다시 검사하기
변경을 게시한 뒤 처음과 같은 URL을 검사합니다. 원래 지적 사항이 해결됐는지 확인하고 제목, 링크, 폼도 사용해 보세요. 공통 템플릿을 바꿨다면 그 템플릿을 쓰는 다른 페이지에서도 확인합니다.
검사기가 코드를 자동으로 바꾸나요?
소스 코드는 개발자가 수정합니다. 보고서는 원인 조사와 수정 결과 확인에 필요한 정보를 제공합니다.
모든 경고를 없애야 하나요?
원인과 영향을 살펴보고 실제 오류를 수정하세요. 의도된 예외는 이유를 기록합니다. 점수를 높이기 위해 필요한 기능을 삭제하지 않는 것이 중요합니다.
페이지의 HTML 검사하기. 검색 노출 문제는 기술 SEO 확인 절차, 로딩 문제는 사이트 속도 측정 안내를 참고하세요.
