HTML 코드는 '읽는 법'부터 익히면 쉽습니다
HTML을 처음 보면 꺾쇠괄호가 자주 나와서 낯설게 느껴집니다.
<p>안녕하세요</p>하지만 이 한 줄을 읽는 방법은 간단합니다.
"여기부터 문단이고, 안에 들어 있는 내용은 '안녕하세요'이며, 여기서 문단이 끝난다."
HTML은 대부분 이런 식으로 읽습니다. 어려운 암호가 아니라, 내용 앞뒤에 이름표를 붙여 역할을 알려 주는 방식입니다.
이 장에서는 HTML의 가장 기본 문법인 태그, 요소, 속성을 구분해 봅니다. 이 세 가지만 알아도 앞으로 만나는 HTML 예제의 대부분을 스스로 읽을 수 있습니다.
AI 생성 이미지
태그는 내용의 역할을 알려 주는 표시입니다
태그는 <p>처럼 꺾쇠괄호 < >로 감싼 표시입니다. 그리고 그 안에 들어 있는 p 같은 글자를 태그 이름이라고 생각하면 됩니다.
<p>안녕하세요</p>여기에서 <p>와 </p>가 태그입니다.
p는 문단을 뜻합니다. 영어 paragraph의 첫 글자라고 생각하면 됩니다. 그래서 브라우저는 이 코드를 보고 "안녕하세요는 문단이구나"라고 이해합니다.
조금 더 살펴보겠습니다.
<h1>우리 가게를 소개합니다</h1>
<p>매일 아침 직접 구운 빵을 판매합니다.</p>이 코드는 이렇게 읽을 수 있습니다.
<h1>: 큰 제목이 시작됩니다.우리 가게를 소개합니다: 제목으로 보여 줄 내용입니다.</h1>: 큰 제목이 끝납니다.<p>: 문단이 시작됩니다.매일 아침 직접 구운 빵을 판매합니다.: 문단으로 보여 줄 내용입니다.</p>: 문단이 끝납니다.
HTML을 읽을 때는 태그 이름을 모두 외우려고 하기보다, "이 태그가 감싼 내용은 어떤 역할일까?"라고 생각하면 좋습니다.
여는 태그와 닫는 태그
대부분의 HTML 태그는 짝이 있습니다.
<p>오늘은 정상 영업합니다.</p>앞에 있는 <p>는 여는 태그입니다. 문단이 시작된다는 뜻입니다.
뒤에 있는 </p>는 닫는 태그입니다. 문단이 끝났다는 뜻입니다. 닫는 태그에는 태그 이름 앞에 /가 붙습니다.
비유하면 여는 태그와 닫는 태그는 괄호 한 쌍과 비슷합니다.
<p>오늘은 정상 영업합니다.</p>이 코드는 다음처럼 생각할 수 있습니다.
[문단 시작] 오늘은 정상 영업합니다. [문단 끝]태그가 내용을 감싸면 브라우저는 그 내용을 해당 역할로 보여 줍니다.
<h2>운영 시간</h2>
<p>평일 오전 10시부터 오후 7시까지 운영합니다.</p>위 코드는 "운영 시간"은 작은 제목으로, 그 아래 문장은 문단으로 보여 줍니다.
태그와 요소는 조금 다릅니다
처음에는 태그와 요소를 같은 말처럼 들어도 크게 문제는 없습니다. 하지만 둘의 차이를 가볍게 알아 두면 HTML 설명을 읽을 때 편합니다.
<p>안녕하세요</p>여기에서 태그는 <p>와 </p>입니다.
요소는 여는 태그, 내용, 닫는 태그를 모두 합친 전체입니다.
<p>안녕하세요</p>이 한 덩어리 전체가 p 요소입니다.
조금 더 쉽게 말하면 다음과 같습니다.
태그: 앞뒤에 붙는 이름표
내용: 실제로 보여 줄 글
요소: 이름표와 내용을 합친 한 덩어리
예를 들어 행사 공지 페이지에 이런 코드가 있다고 해 보겠습니다.
<h1>여름 플리마켓 안내</h1>
<p>토요일 오후 2시에 공원 입구에서 시작합니다.</p>여기에는 h1 요소 하나와 p 요소 하나가 있습니다. 각각 제목 덩어리, 문단 덩어리라고 생각하면 됩니다.
닫는 태그 없이 쓰는 태그도 있습니다
모든 태그가 내용을 감싸는 것은 아닙니다. 어떤 태그는 그 자체로 하나의 역할을 합니다.
대표적인 예가 img와 br입니다.
먼저 br은 줄바꿈을 넣을 때 사용합니다.
<p>서울시 중구 세종대로 1<br>1층 안내 데스크</p>브라우저에서는 주소가 두 줄로 보입니다.
서울시 중구 세종대로 1
1층 안내 데스크<br>은 "여기에서 줄을 바꾸세요"라는 표시입니다. 감쌀 내용이 없기 때문에 </br>처럼 닫지 않습니다.
다음은 img입니다. img는 이미지를 넣을 때 사용합니다.
<img src="store.jpg" alt="가게 입구 사진">이미지는 글처럼 앞뒤로 감싸야 할 내용이 없습니다. 이미지 파일을 화면에 보여 주면 됩니다. 그래서 </img>를 쓰지 않습니다.
이런 태그를 어렵게 부르는 이름도 있지만, 지금은 닫는 태그 없이 쓰는 태그도 있다 정도로만 기억하면 충분합니다.
자주 만나는 예는 다음과 같습니다.
<img>: 이미지를 넣습니다.<br>: 줄을 바꿉니다.<meta>: 문서 정보를 적습니다. 보통head안에서 사용합니다.
앞으로 예제를 보다가 닫는 태그가 없는 태그를 만나도 당황하지 않아도 됩니다. 내용을 감싸는 태그가 아니라, 그 자리에서 바로 역할을 하는 태그일 수 있습니다.
속성은 태그에 붙이는 추가 정보입니다
태그만으로는 부족할 때가 있습니다.
예를 들어 링크를 만들 때는 "이 글이 링크입니다"뿐 아니라 "어디로 이동할지"도 알려 줘야 합니다.
<a rel="nofollow ugc noopener" href="https://example.com">홈페이지 바로가기</a>여기에서 <a>는 링크를 만드는 태그입니다. 그런데 <a>만 쓰면 어디로 갈지 알 수 없습니다. 그래서 href라는 추가 정보를 붙입니다.
href="https://example.com"이런 추가 정보를 속성이라고 합니다.
속성은 보통 여는 태그 안에 씁니다.
<태그이름 속성이름="속성값">내용</태그이름>다시 링크 예제를 읽어 보겠습니다.
<a rel="nofollow ugc noopener" href="https://example.com">홈페이지 바로가기</a>이 코드는 이렇게 읽을 수 있습니다.
"링크를 만들고, 이 링크를 누르면 https://example.com으로 이동하며, 화면에는 '홈페이지 바로가기'라고 보여 주세요."
속성은 태그의 성격에 따라 다르게 쓰입니다. 자주 만나는 속성 세 가지를 먼저 알아 두면 좋습니다.
href: 링크가 이동할 주소입니다.src: 이미지나 파일을 어디에서 가져올지 알려 줍니다.alt: 이미지가 보이지 않을 때 대신 설명할 글입니다.
이미지 예제로 확인해 보겠습니다.
<img src="bread.jpg" alt="바구니에 담긴 크루아상">이 코드는 이렇게 읽습니다.
"bread.jpg라는 이미지 파일을 보여 주고, 이미지를 볼 수 없는 상황에서는 '바구니에 담긴 크루아상'이라고 설명해 주세요."
alt는 단순한 장식이 아닙니다. 이미지가 깨졌을 때도 도움이 되고, 화면을 소리로 읽는 도구를 사용하는 사람에게도 이미지 내용을 전달할 수 있습니다.
속성이 여러 개 붙을 수도 있습니다
태그 하나에 속성이 여러 개 붙을 수 있습니다.
<img src="profile.jpg" alt="김민지 프로필 사진" width="300">처음 보면 길어 보이지만 나누어 읽으면 어렵지 않습니다.
<img
src="profile.jpg"
alt="김민지 프로필 사진"
width="300"
>의미는 다음과 같습니다.
img: 이미지를 넣습니다.src="profile.jpg": profile.jpg 파일을 가져옵니다.alt="김민지 프로필 사진": 이미지 설명은 이것입니다.width="300": 이미지 너비를 보통 300픽셀로 보여 줍니다.
속성은 순서보다 의미가 중요합니다. 다만 읽기 쉽도록 관련 있는 속성끼리 자연스럽게 적는 것이 좋습니다.
처음에는 속성 이름을 모두 외울 필요가 없습니다. href는 링크 주소, src는 가져올 파일, alt는 이미지 설명. 이 세 가지만 익숙해져도 많은 예제를 읽을 수 있습니다.
태그가 겹칠 때는 안쪽부터 닫습니다
HTML에서는 태그 안에 다른 태그가 들어갈 수 있습니다.
예를 들어 문단 안에서 일부 단어만 강조하고 싶을 수 있습니다.
<p>오늘은 <strong>오후 6시</strong>에 마감합니다.</p>여기에서 <p>는 전체 문단을 감싸고, <strong>은 그 안의 "오후 6시"만 강조합니다.
이럴 때 중요한 규칙이 있습니다.
먼저 연 태그는 나중에 닫습니다.
조금 더 정확히 말하면, 안쪽에 연 태그를 먼저 닫고 바깥쪽 태그를 나중에 닫습니다.
올바른 예를 보겠습니다.
<p>오늘은 <strong>오후 6시</strong>에 마감합니다.</p>읽는 순서는 이렇습니다.
<p>로 문단을 엽니다.문장을 쓰다가
<strong>으로 강조를 엽니다.강조할 내용인
오후 6시를 씁니다.</strong>으로 강조를 닫습니다.문단의 나머지 내용을 씁니다.
</p>로 문단을 닫습니다.
잘못된 예도 보겠습니다.
<p>오늘은 <strong>오후 6시</p>에 마감합니다.</strong>이 코드는 태그가 서로 엉켜 있습니다. <p> 안에서 <strong>을 열었는데, </strong>을 닫기 전에 </p>가 먼저 나왔습니다.
상자를 떠올리면 쉽습니다. 큰 상자 안에 작은 상자를 넣었다면, 작은 상자를 먼저 닫고 큰 상자를 닫아야 합니다.
올바른 구조: [문단 [강조] 문단]
잘못된 구조: [문단 [강조] 문단 밖에서 강조를 닫음]앞으로 코드가 이상하게 보일 때는 태그가 제대로 짝을 이루는지 확인해 보세요. 특히 여러 태그가 겹쳐 있을 때는 "안쪽부터 닫았는가?"를 보면 됩니다.
작은 페이지를 읽어 봅시다
이제 짧은 HTML 조각을 직접 읽어 보겠습니다.
<h1>민지의 작업실</h1>
<p>손으로 만든 작은 소품을 소개합니다.</p>
<p>문의는 <a href="mailto:[email protected]">이메일</a>로 보내 주세요.</p>
<img src="workshop.jpg" alt="나무 책상 위에 놓인 수공예 소품">한 줄씩 읽으면 다음과 같습니다.
첫 번째 줄은 큰 제목입니다.
<h1>민지의 작업실</h1>"민지의 작업실"을 큰 제목으로 보여 줍니다.
두 번째 줄은 문단입니다.
<p>손으로 만든 작은 소품을 소개합니다.</p>작업실을 설명하는 짧은 문장입니다.
세 번째 줄은 문단 안에 링크가 들어 있습니다.
<p>문의는 <a href="mailto:[email protected]">이메일</a>로 보내 주세요.</p>문단 전체는 <p>가 감싸고 있습니다. 그 안에서 "이메일"이라는 단어만 <a> 태그로 감싸 링크가 되었습니다. href="mailto:[email protected]"은 이메일을 보낼 주소를 알려 줍니다.
네 번째 줄은 이미지입니다.
<img src="workshop.jpg" alt="나무 책상 위에 놓인 수공예 소품">workshop.jpg 이미지를 보여 주고, 이미지 설명은 "나무 책상 위에 놓인 수공예 소품"입니다. img는 닫는 태그가 없습니다.
이처럼 HTML은 한 번에 전체를 이해하려고 하지 않아도 됩니다. 여는 태그를 보고, 내용을 보고, 닫는 태그를 찾으면 됩니다. 속성이 있으면 "추가 정보가 붙었구나"라고 읽으면 됩니다.
읽는 순서를 기억하세요
HTML 예제를 만났을 때는 다음 순서로 읽어 보세요.
태그 이름을 봅니다. 제목인지, 문단인지, 링크인지 확인합니다.
여는 태그와 닫는 태그가 있는지 봅니다.
태그가 감싼 내용을 읽습니다.
여는 태그 안에 속성이 있는지 봅니다.
태그가 겹쳐 있다면 안쪽 태그가 먼저 닫혔는지 확인합니다.
이 순서만 익숙해져도 HTML은 훨씬 덜 낯설어집니다.
HTML을 잘 쓴다는 것은 처음부터 모든 태그를 외우는 일이 아닙니다. 코드를 보고 "어디부터 어디까지가 한 덩어리인지", "이 속성이 무엇을 알려 주는지"를 차분히 읽는 일에서 시작합니다.
다음 예제를 볼 때는 꺾쇠괄호를 겁내지 말고 이렇게 읽어 보세요.
<a rel="nofollow ugc noopener" href="https://example.com">자세히 보기</a>"링크를 만들고, 누르면 이 주소로 이동하고, 화면에는 '자세히 보기'라고 보여 준다."
이렇게 문장으로 바꿔 읽을 수 있다면 이미 HTML의 핵심 문법을 잡은 것입니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.