HTML은 웹 문서의 내용과 구조를 표현하는 마크업 언어다. 제목, 문단, 목록, 링크처럼 콘텐츠가 어떤 역할을 하는지 요소로 표시한다. 브라우저는 이 구조를 해석해 화면과 접근성 정보를 구성하며, 표현 방식은 CSS, 상호작용은 JavaScript와 함께 구현한다.
요소와 속성
요소는 보통 시작 태그와 종료 태그로 내용을 감싼다. <p>데이터베이스 입문</p>는 문단이고, <a href="/ko/wiki/postgresql">PostgreSQL</a>은 다른 문서로 이동하는 링크다. 속성은 목적지나 언어처럼 요소의 추가 정보를 전달한다. 이미지처럼 종료 태그 없이 사용하는 요소도 있으므로 모든 태그가 같은 형태라고 가정하면 안 된다. 관련 공식 설명.
문서의 기본 구조
head에는 문서 제목과 메타데이터를, body에는 독자가 읽고 조작하는 내용을 둔다. 페이지 제목인 title과 본문의 대표 제목인 h1은 용도가 다르다. 위키 문서에서는 대표 제목 아래에 단계별 소제목을 두고, 항목은 목록으로, 비교 자료는 표로 표현하면 구조를 이해하기 쉽다. 제목을 굵은 글씨로만 꾸미는 것보다 시맨틱 HTML로 의미를 표시하는 편이 보조 기술에도 유용하다.
실제 작성 예
문서 목록은 ul 안에 여러 li를 넣고 각 항목에 링크를 제공할 수 있다. 검색 입력에는 사용자가 목적을 알 수 있는 레이블을 연결한다. 화면에서 비슷하게 보이더라도 이동은 링크, 실행은 버튼으로 표현해야 브라우저의 기본 키보드 동작을 활용할 수 있다. 처음부터 내용의 구조를 잡으면 디자인이 바뀌어도 문서의 의미를 유지하기 좋다.
오해와 확인 방법
HTML 자체는 일반적인 계산 절차를 실행하는 프로그래밍 언어가 아니다. 또한 태그가 브라우저에 표시된다는 사실만으로 문서가 올바르거나 접근 가능하다는 뜻도 아니다. 개발자 도구에서 DOM 구조를 확인하고, 제목 순서와 링크 목적, 이미지 대체 텍스트를 점검한다. 서버가 보낸 원문과 스크립트 실행 후 구조가 달라질 수 있다는 점도 구분한다.
참고: 공식 개발 문서.