VIBECODING 365 / DICTIONARY

HTML

HyperText Markup Language

기초 난이도: 기초태그: HTML · 웹기초 · 마크업

DEFINITION

HTML(HyperText Markup Language)은 웹 콘텐츠의 의미와 구조를 정하는 마크업 언어다. MDN은 웹의 가장 기본 구성 요소라고 부르며, 겉모습은 보통 CSS, 동작은 JavaScript가 맡는다고 구분한다. 지금 표준은 WHATWG HTML Living Standard다. WHATWG FAQ는 이 문서가 HTML4와 XHTML1을 포함해 이전 HTML 명세를 대체한다고 적는다. Hypertext는 같은 사이트든 다른 사이트든 페이지를 잇는 링크를 가리킨다. MDN은 링크를 웹의 근본이라고 하고, 콘텐츠를 올려 남의 페이지와 연결하면 World Wide Web에 참여하게 된다고 적는다. HTML은 텍스트 파일에 살며 확장자는 대개 html이다.

여는 표식과 닫는 표식

HTML은 브라우저에 보일 글과 이미지에 마크업을 붙인다. MDN이 그리는 요소는 여는 태그, 내용, 닫는 태그로 이루어진다. 태그는 요소 이름을 꺾쇠로 감싼 것이고, 대소문자를 가리지 않지만 소문자 관례가 권장된다. 이미지(img)나 줄바꿈(br)처럼 내용을 담지 못하는 것은 void 요소라 부르며 닫는 태그를 두지 않는다. 끝에 슬래시를 붙이는 표기는 틀리지는 않지만 필수는 아니다. 요소는 안에 다른 요소를 넣을 수 있다. 바깥을 먼저 열고 안을 나중에 닫아야 한다. 태그가 서로 엇갈리면 브라우저가 의도를 추측해 예상 밖 결과가 날 수 있다고 MDN은 적는다.

제목 크기가 아니라 문서의 층

HTML의 한 일은 글에 구조를 주는 것이다. 문단은 p, 제목은 h1부터 h6까지 여섯 층이다. MDN은 되도록 페이지에 최상위 제목(h1)을 하나 두고, 층을 건너뛰지 말라고 한다. 글자 크기 때문에 제목 요소를 고르면 안 된다. 크기는 CSS 일이다. 화면 읽기 프로그램은 제목을 이정표로 삼아 건너뛰므로, 제목이 없으면 문서 전체를 들어야 한다. 검색 엔진도 제목 안의 말을 중요 키워드로 본다. span에 큰 글자만 입히면 겉모습은 제목처럼 보여도, MDN이 말하는 의미는 없다.

문서 맨 위의 짧은 선언

완전한 문서는 doctype, 루트 html, 메타용 head, 보이는 내용의 body로 짜인다. WHATWG는 문서가 doctype과 html 요소를 이 순서로 갖는다고 적는다. html 안에는 head와 body가 잇따른다. 일부 태그는 생략해도 브라우저가 요소를 채워 넣지만, 적어 두는 편이 읽기 쉽다. MDN은 오늘날 doctype이 역사적 유물에 가깝지만, 올바르게 동작하려면 맨 위에 두어야 한다고 한다. 현대에 쓰는 짧은 형태는 doctype html이다. head의 title은 브라우저 탭과 북마크에 쓰이는 문서 이름이고, 본문 첫 제목과 달라도 된다. MDN 예는 문자셋을 utf-8로 두며, 대부분의 문자 체계를 담을 수 있어 나중에 깨질 일을 줄인다고 한다. WHATWG는 루트 html에 언어 속성(lang)을 두라고 권한다. 속성은 내용이 아닌 추가 정보다. class는 CSS와 스크립트가 찾을 이름이고, 이미지의 src는 주소, alt는 보이지 않는 사람을 위한 설명이다. MDN HTML 안내는 폼이 가입, 로그인, 의견 보내기, 구매처럼 사이트와 사람이 주고받는 일을 맡는다고 적는다.

뼈대만 맞고 의미가 비는 화면

바이브 코딩에서 에이전트는 자주 div와 span으로 화면을 그린 뒤 CSS로 제목처럼 보이게 한다. MDN은 역할에 맞는 요소를 쓰라고 한다. 제목은 제목 요소, 문단은 문단, 링크는 a, 입력은 form과 그 안의 컨트롤이다. 홈 파일 이름으로 index.html이 자주 쓰이고, 하위 폴더마다 따로 두는 경우도 많다. 마크업이 맞으면 CSS와 스크립트가 그 요소를 겨냥할 수 있고, 스크린 리더도 같은 뼈대를 탄다.

ENGLISH

HyperText Markup Language

EXAMPLE

<!doctype html>

REFERENCE

html.spec.whatwg.org/multipage/