13장: HTML 작성 베스트 프랙티스
HTML을 제대로 쓰는 법
HTML은 웹의 토대이지만, 누구나 쉽게 배우는 만큼 처음부터 올바른 작성 습관을 익히는 것이 가장 중요합니다. 경험이 쌓일수록 작은 차이가 전체 프로젝트의 완성도와 유지 보수성에 큰 영향을 미치기 때문입니다. 이 장에서는 실전 HTML 문서를 작성할 때 반드시 기억해야 하는 최선의 원칙들을 정리합니다.
기본을 지키는 첫 걸음, 문서 선언과 구조의 일관성
모든 HTML 파일은 <!DOCTYPE html>으로 시작해야 합니다. 이것이 HTML5 표준 문서임을 웹브라우저에 명확히 알려주고, 해석 오류를 줄이는 첫 방어선입니다. 또한, <html>, <head>, <body>의 삼분 영역을 꾸준히 유지하세요. 각각의 영역은 목적이 다르고, 정보를 분리해서 다루기 때문에 문서 전체가 읽기 쉽고 확장성이 생깁니다.
태그와 속성의 표준화: 소문자와 따옴표
HTML 태그와 속성은 언제나 소문자로 작성하는 것이 업계 표준입니다. 대소문자 혼용은 코드를 읽는 사람의 혼란을 키우고, 일부 도구에서 예기치 않은 결과를 만들 수 있습니다. 속성의 값은 큰따옴표(")로 감싸세요. 이는 가독성과 오류 발생 가능성을 낮춰줍니다.
의미 있는 태그 사용, 시맨틱을 생각하다
단순히 보기 좋게 표현하는 대신, 정보의 본질에 맞는 태그를 쓰는 것이 시맨틱 웹의 출발점입니다. 제목에는 h1~h6, 내비게이션에는 nav, 주요 콘텐츠에는 main, 상자 역할에는 section이나 article처럼 의미가 분명한 태그를 사용하세요. 이는 검색엔진, 보조기기, 미래의 동료 개발자 모두에게 이해하기 쉽고 친절한 코드가 됩니다.
접근성과 유효성, 그리고 확장성
누구나 콘텐츠를 쉽게 이용할 수 있게 하려면 이미지에는 alt 속성을 꼼꼼히 작성하고, 명확한 헤딩 구조를 따라야 합니다. 폼 입력에는 라벨을 연결해 시각장애인도 접근할 수 있도록 돕고, 링크는 목적지가 드러나는 텍스트로 써주세요. HTML 유효성 검사기는 필수로 활용해 사소한 실수가 버그로 이어지지 않게 합니다.
예측 가능한 코드와 주석 작성
태그를 중첩할 때에는 항상 올바른 순서를 지키고, 불필요한 중복을 피하세요. 복잡한 구조에는 간단한 주석을 더해 코드의 목적과 역할을 설명하면, 다른 이나 미래의 자신이 이해하기 훨씬 수월해집니다.
마치며: 단순함 속의 완성
HTML을 잘 쓴다는 것은 매뉴얼을 그대로 따르는 것과 다릅니다. 표준과 원칙을 이해하고, 사용자의 입장과 유지 보수 환경까지 넘나드는 배려가 필요합니다. 애초부터 올바른 작성 관습을 몸에 익힌다면, HTML은 당신의 상상력을 받아들이는 가장 든든한 그릇이 되어줄 것입니다.
