HTML이 무엇인지 감 잡기

웹페이지는 어디서부터 만들어질까요?

인터넷에서 보는 페이지는 겉으로는 하나의 화면처럼 보입니다. 블로그 글, 가게 소개 페이지, 쇼핑몰 상품 설명, 행사 신청 페이지가 모두 그렇습니다. 우리는 화면에서 제목을 보고, 설명을 읽고, 사진을 확인하고, 버튼이나 링크를 누릅니다.

그런데 이 화면은 처음부터 예쁜 모습으로 태어나지 않습니다. 먼저 "무엇이 어디에 있는지"를 적은 문서가 필요합니다. 이 문서가 바로 HTML입니다.

HTML은 웹페이지의 뼈대를 만드는 언어입니다. 여기서 뼈대란 어렵고 딱딱한 말이 아닙니다. 예를 들어 가게 안내 페이지를 만든다고 생각해 보겠습니다.

• 가게 이름은 큰 제목으로 보이게 하고 싶습니다.

• 영업시간은 짧은 문장으로 적고 싶습니다.

• 메뉴 사진을 넣고 싶습니다.

• 지도 링크를 누르면 위치를 볼 수 있게 하고 싶습니다.

HTML은 이런 내용을 브라우저가 알아볼 수 있게 표시해 줍니다. "이 문장은 제목이야", "이 부분은 설명 문단이야", "여기에는 이미지가 들어가", "이 글자는 누르면 이동하는 링크야"라고 알려 주는 역할을 합니다.

브라우저는 크롬, 사파리, 엣지처럼 웹사이트를 보여 주는 프로그램입니다. 브라우저는 HTML 문서를 읽고, 그 안의 약속을 해석해서 우리가 보는 웹페이지로 바꿔 보여 줍니다.

AI 생성 이미지

HTML은 프로그래밍보다 '의미 붙이기'에 가깝습니다

HTML을 처음 들으면 "코딩을 해야 하나?"라는 부담이 생길 수 있습니다. 하지만 HTML은 보통 우리가 상상하는 프로그래밍과 조금 다릅니다.

프로그래밍은 대체로 "무엇을 계산하고, 판단하고, 움직이게 할 것인가"를 다룹니다. 예를 들어 버튼을 눌렀을 때 장바구니 금액을 계산하거나, 로그인 여부에 따라 다른 화면을 보여 주는 일이 여기에 가깝습니다.

HTML은 그보다 단순합니다. HTML은 문서에 의미를 붙이는 약속입니다.

예를 들어 같은 문장이라도 역할이 다를 수 있습니다.

• "오늘의 메뉴"는 제목일 수 있습니다.

• "아메리카노 3,500원"은 목록의 한 항목일 수 있습니다.

• "예약하러 가기"는 링크일 수 있습니다.

사람은 화면의 크기, 글자 굵기, 위치를 보고 대충 의미를 짐작할 수 있습니다. 하지만 브라우저와 검색 엔진, 화면 읽기 프로그램은 그 의미를 문서 안의 표시를 보고 이해합니다. HTML은 그 표시를 해 주는 방법입니다.

그래서 HTML을 배운다는 것은 복잡한 프로그램을 만드는 일이 아닙니다. 내가 가진 내용을 웹이 이해할 수 있는 문서로 정리하는 법을 배우는 일에 가깝습니다.

집으로 비유하면 HTML은 벽과 방 배치입니다

웹페이지를 집에 비유하면 HTML의 역할이 훨씬 쉽게 보입니다.

집을 지을 때 가장 먼저 필요한 것은 구조입니다. 방은 어디에 둘지, 현관은 어디인지, 창문은 어디에 낼지, 거실과 주방은 어떻게 이어지는지를 정해야 합니다. 이 기본 구조가 있어야 그다음 일을 할 수 있습니다.

웹페이지에서도 마찬가지입니다.

• HTML은 집의 벽, 방, 문, 창문 같은 기본 구조입니다.

• CSS는 벽지, 조명 색, 가구 배치 같은 인테리어입니다.

• JavaScript는 스위치, 자동문, 엘리베이터 같은 움직이는 장치입니다.

가게 안내 페이지를 예로 들어 보겠습니다. HTML은 "가게 이름", "소개 문장", "대표 사진", "영업시간", "오시는 길 링크"를 페이지 안에 놓습니다. CSS는 글자 색을 바꾸고, 사진 크기를 맞추고, 여백을 보기 좋게 정리합니다. JavaScript는 버튼을 눌렀을 때 지도가 열리거나, 예약 가능한 날짜가 바뀌는 동작을 맡을 수 있습니다.

처음부터 세 가지를 모두 잘할 필요는 없습니다. 이 책에서는 먼저 HTML의 감을 잡습니다. 구조를 이해하면 나중에 CSS나 JavaScript를 만나도 훨씬 덜 낯설어집니다. 집의 구조를 알고 나면 인테리어 설명도 더 쉽게 이해되는 것과 같습니다.

브라우저는 HTML을 읽고 화면으로 바꿉니다

웹페이지가 보이는 흐름은 생각보다 단순합니다.

먼저 HTML 문서가 있습니다. 이 문서 안에는 페이지에 들어갈 내용과 그 내용의 역할이 적혀 있습니다. 브라우저는 이 문서를 위에서 아래로 읽습니다. 그리고 "제목은 크게 보여 주고, 문단은 줄글로 보여 주고, 이미지는 화면에 띄우고, 링크는 누를 수 있게 만들자"라고 해석합니다.

아주 작은 예를 보겠습니다.

<h1>우리 동네 꽃집</h1>
<p>계절 꽃다발과 작은 화분을 판매합니다.</p>
<a rel="nofollow ugc noopener" href="https://example.com">온라인 주문하기</a>

지금은 코드를 모두 이해하지 않아도 괜찮습니다. 중요한 것은 모양입니다.

우리 동네 꽃집은 큰 제목으로 보일 가능성이 큽니다. 계절 꽃다발과 작은 화분을 판매합니다.는 설명 문장으로 보입니다. 온라인 주문하기는 누르면 다른 곳으로 이동하는 링크가 됩니다.

HTML 안에서 꺾쇠괄호로 감싼 h1, p, a 같은 표시를 태그라고 부릅니다. 태그는 내용의 역할을 알려 주는 이름표라고 생각하면 됩니다. 이름표가 붙어 있으면 브라우저가 그 내용을 어떻게 다룰지 알 수 있습니다.

이름표가 없는 상자를 보면 안에 무엇이 들었는지 열어 보기 전에는 알기 어렵습니다. 반대로 "컵", "책", "서류"라고 적힌 상자는 정리하기 쉽습니다. HTML 태그도 비슷합니다. 문서 안의 내용에 이름표를 붙여 브라우저가 정리하기 쉽게 만들어 줍니다.

HTML을 알면 비개발자에게도 도움이 됩니다

"웹사이트를 직접 만들 일이 없는데 HTML을 배워야 할까?"라는 생각이 들 수 있습니다. 꼭 개발자가 되기 위해서만 HTML을 배우는 것은 아닙니다.

HTML을 조금 알면 온라인 도구를 다루는 눈이 달라집니다.

블로그 글을 쓸 때 제목과 본문을 왜 구분해야 하는지 이해할 수 있습니다. 단순히 글자를 크게 만드는 것과 제목으로 표시하는 것은 다릅니다. 제목으로 표시하면 글의 구조가 분명해지고, 검색 엔진이나 보조 기술도 내용을 더 잘 이해할 수 있습니다.

쇼핑몰 상품 설명을 다룰 때도 도움이 됩니다. 상품명, 핵심 특징, 상세 설명, 주의 사항, 구매 링크가 각각 어떤 역할인지 생각하며 정리할 수 있습니다. 그러면 페이지가 읽기 쉬워지고, 고객이 필요한 정보를 더 빨리 찾을 수 있습니다.

이메일 템플릿을 수정할 때도 HTML 지식은 유용합니다. 뉴스레터나 행사 안내 메일은 HTML로 만들어지는 경우가 많습니다. 작은 문구를 바꾸거나 링크 주소를 확인할 때 HTML을 읽을 수 있으면 실수를 줄일 수 있습니다.

노코드 도구를 사용할 때도 마찬가지입니다. 노코드 도구는 코드를 직접 쓰지 않아도 웹페이지나 앱을 만들 수 있게 도와주는 서비스입니다. 하지만 그 안에서도 제목, 섹션, 버튼, 이미지, 링크 같은 개념은 계속 등장합니다. HTML의 기본 구조를 알면 이런 도구가 왜 그렇게 구성되어 있는지 이해하기 쉽습니다.

즉 HTML은 개발자만의 비밀 언어가 아닙니다. 웹에서 글을 쓰고, 상품을 소개하고, 행사를 알리고, 내 일을 설명하는 사람에게 도움이 되는 기본 문법입니다.

처음 배울 때 어렵게 느껴지는 이유

HTML이 어려워 보이는 가장 큰 이유는 낯선 기호 때문입니다. 꺾쇠괄호가 나오고, 영어 단어가 짧게 줄어 있고, 여는 표시와 닫는 표시가 짝을 이룹니다. 처음 보면 암호처럼 보일 수 있습니다.

하지만 HTML의 핵심은 암호 해독이 아닙니다. "이 내용은 어떤 역할인가?"를 생각하는 일입니다.

예를 들어 개인 소개 페이지를 만든다면 먼저 이런 질문을 할 수 있습니다.

• 내 이름은 페이지의 가장 큰 제목인가?

• 자기소개 문장은 문단인가?

• 경력은 목록으로 정리하면 좋은가?

• 연락처는 링크로 만들 수 있는가?

• 프로필 사진은 이미지로 넣으면 되는가?

이렇게 역할을 정한 뒤, 그 역할에 맞는 태그를 붙이면 됩니다. 처음에는 태그 이름을 모두 외우지 않아도 됩니다. 자주 쓰는 것부터 반복해서 보면 자연스럽게 익숙해집니다.

이 책에서도 많은 태그를 한 번에 던지지 않습니다. 먼저 페이지를 상상하고, 그 페이지에 필요한 작은 조각을 하나씩 배웁니다. 개인 소개 페이지, 가게 안내 페이지, 행사 공지 페이지처럼 바로 써먹을 수 있는 예시로 연습합니다.

이 장에서 기억할 것

HTML은 웹페이지의 뼈대를 만드는 언어입니다. 더 정확히 말하면 문서 안의 내용에 의미를 붙이는 약속입니다. 제목에는 제목이라는 이름표를 붙이고, 문단에는 문단이라는 이름표를 붙이고, 이미지는 이미지로, 링크는 링크로 표시합니다.

브라우저는 이 HTML 문서를 읽고 우리가 보는 화면으로 바꿉니다. HTML이 구조를 맡고, CSS가 보기 좋은 모양을 맡고, JavaScript가 움직임을 맡는다고 생각하면 큰 그림이 잡힙니다.

지금 당장 모든 태그를 알 필요는 없습니다. 먼저 웹페이지를 볼 때 "이 부분은 제목이구나", "이 부분은 문단이구나", "여기는 이미지와 링크가 있구나" 하고 나누어 보는 눈을 가지면 충분합니다.

다음 장에서는 HTML을 직접 써 보기 위한 준비를 아주 가볍게 끝냅니다. 복잡한 설치보다, 일단 내 손으로 작은 웹페이지를 열어 보는 데 집중하겠습니다.