쉬운 설명
모든 웹 페이지의 기반은 HTML입니다. 텍스트와 이미지에 'h1(큰 제목)', 'p(문단)', 'a(링크)', 'img(이미지)' 같은 꼬리표를 붙여서, 브라우저에 '여기 이 글이 제목이고, 이건 문단이고, 이건 다른 페이지로 가는 링크'라고 알려 줍니다. 이 꼬리표를 '태그'라고 부르고, 태그가 모인 문서가 HTML입니다.
HTML은 '모양'이 아니라 '의미'를 적는 언어입니다. 글자가 어떻게 보이는지는 CSS가 결정하고, 동작은 자바스크립트가 결정합니다. HTML은 그 두 가지가 붙기 전의 뼈대입니다. 같은 HTML 위에 다른 CSS·JS를 입히면 완전히 다른 사이트가 됩니다.
잘 쓴 HTML은 화면이 잘 보이는 것을 넘어 여러 가지를 한꺼번에 만족시킵니다. ① 검색엔진이 페이지 내용을 정확히 이해해 색인하고, ② 스크린 리더가 시각장애인에게 글을 또박또박 읽어 주고, ③ 다른 도구가 페이지에서 정보를 뽑아낼 수 있습니다. 그래서 <div>를 남발하기보다 <header>·<article>·<nav>·<button> 같은 의미 있는 태그를 쓰는 것이 권장됩니다.
현대 HTML은 정적인 문서를 넘어 다양한 기능을 표준으로 가집니다. 폼·비디오·캔버스·웹 컴포넌트·드래그앤드롭·지오로케이션·웹소켓 — 옛날엔 플러그인이 필요했던 일이 이제 HTML 표준 안에 들어 있습니다. 새 표준을 가장 빠르게 따라가는 것이 크롬·사파리·파이어폭스 같은 현대 브라우저들입니다.
초보자가 자주 막히는 부분: '왜 같은 HTML이 휴대폰에선 다르게 보이지?'는 사실 HTML이 아니라 CSS의 책임입니다. 또 'HTML을 잘 쓴다'는 건 '많은 태그를 외운다'가 아니라 '의미가 맞는 태그를 고른다'에 가깝습니다. 의미가 잘 표현된 HTML은 가벼우면서 접근성·SEO에서 큰 이득을 가져옵니다.
비유로 보면
HTML은 건물의 골조에 비유할 수 있습니다. 보·기둥·벽이 어디 있는지 정합니다. 그 위에 도배·페인트·가구(CSS)를 들이고, 사람이 살면서 일어나는 동작·이벤트(JavaScript)를 더하면 완성된 공간이 됩니다. 골조가 단단하면 인테리어가 자유로워지고, 골조가 어수선하면 인테리어도 곧 부서집니다.
어디에서 만나나
모든 웹 페이지, 모든 모바일 웹앱, 모든 PWA·하이브리드 앱, 이메일 본문(제한된 HTML), 전자책(EPUB)도 HTML 기반입니다. React·Vue 같은 프레임워크도 결국 HTML을 만들어 내며, 그 결과를 브라우저가 받아 화면을 그립니다.
작은 예시
이 블로그 글 하나도 HTML로 보면 <h1>제목</h1><p>첫 문단...</p><img src='...'/>처럼 단순한 구조의 텍스트입니다. 그 위에 CSS가 글꼴과 여백을, 자바스크립트가 '읽음 표시' 같은 동작을 더해서 우리가 보는 페이지가 됩니다.
자주 하는 오해
한 줄 정리
HTML의 좋은 코드는 '의미가 분명한 코드'입니다. 같은 결과의 페이지라도, 의미가 맞는 태그로 짠 페이지가 검색·접근성·유지보수에서 더 멀리 갑니다.