HTML 기본 문법 10가지만 기억하면 충분합니다

콘텐츠 목차

HTML 기초 문법 10가지 – 헷갈리는 것만 쏙 골라 정리

HTML 태그는 알겠는데, 왜 화면에 안 나올까요?

HTML 태그를 배웠는데도 원하는 대로 화면에 안 나오는 경험, 누구나 해봤을 거예요. 그건 대부분 기초 문법에서 놓치는 부분이 있기 때문입니다. 이 글에서는 HTML을 처음 쓰는 사람도 태그를 정확하게 이해하고, 구조적인 문서를 만들 수 있도록 꼭 필요한 문법 10가지를 실제 예제와 함께 쉽게 풀어봅니다.

1. 태그는 열고 닫아야 합니다

<p>문단입니다</p>

HTML 태그는 항상 열고 닫는 구조로 되어 있어요. 는 문단을 시작하고, 로 끝내요. 이걸 빼먹으면 브라우저가 혼란스러워져서 레이아웃이 이상하게 보일 수 있어요.

2. 중첩은 순서를 꼭 지켜야 합니다

<b><i>굵고 기울임</i></b> ✅
<b><i>순서 잘못됨</b></i> ❌

HTML 태그는 ‘겹쳐서’ 쓸 수 있지만, 마지막에 연 태그를 먼저 닫아야 해요. 옷을 겹쳐 입는다고 생각해 보세요. 안에 입은 옷은 제일 나중에 벗죠? 태그도 마찬가지예요.

3. 빈 태그는 닫지 않습니다

<br>, <img>, <hr>

이런 태그는 닫는 태그가 없어요. 줄바꿈( ), 이미지(<img>), 수평선(<hr>)처럼 스스로 끝나는 동작이기 때문이에요. 한 번 딱 넣으면 작동해요.

4. 속성은 태그에 정보와 기능을 추가합니다

<a href="https://example.com" target="_blank">링크</a>

태그에 부가적인 정보를 더하는 게 속성이에요. 링크는 어디로 연결되는지 알아야 하니까 href 속성을 써야 하고, 새 창에서 열고 싶다면 target="_blank"를 넣으면 돼요. 속성은 항상 속성이름="값" 형태로 써요.

5. 줄바꿈은 , 문단은 로

<p>이건 첫 문단입니다.</p>
<p>이건 두 번째 문단입니다.</p>
<p>줄바꿈은 이렇게요<br>보이시죠?</p>

엔터를 친다고 화면에서 줄이 바뀌지 않아요. HTML에서는 줄을 바꾸고 싶으면  , 문단을 나누고 싶으면 를 써야 해요.

6. HTML은 줄바꿈, 공백을 무시합니다

<p>이건     공백을     많이 넣어도    이렇게 보여요.</p>

HTML에서는 줄을 바꾸거나 스페이스바를 많이 눌러도 브라우저는 딱 한 칸만 띄우는 걸로 인식해요. 줄바꿈이나 들여쓰기 같은 건 CSS로 조절해야 해요.

7. 태그는 html 안에, 특히 body 안에

<html>
  <body>
    <p>이건 바르게 작성된 예입니다.</p>
  </body>
</html>

모든 태그는 <html> 태그 안에 있어야 하고, 우리가 실제로 보이게 할 콘텐츠는 <body> 안에 넣어야 해요. 이 틀을 벗어나면 브라우저가 제대로 표시 못 해요.

8. 이미지 태그는 src와 alt가 중요해요

<img src="cat.jpg" alt="귀여운 고양이">

src는 이미지 경로, alt는 이미지 설명이에요. alt는 시각장애인을 위한 설명이나, 이미지가 깨졌을 때 대신 나오는 텍스트예요. 이미지를 넣을 땐 이 두 가지 속성을 꼭 기억하세요.

9. 링크 태그는 href로 연결하고 target으로 새창 설정

<a href="https://naver.com" target="_blank">네이버로 가기</a>

<a> 태그는 클릭하면 이동하게 해주는 태그예요. href에 주소를 넣고, target="_blank"를 넣으면 새 탭에서 열려요. 블로그, 외부 링크에 자주 쓰여요.

10. 주석은 코드에 설명을 붙이는 방법

<!-- 여기는 메뉴 영역입니다 -->

HTML 코드 안에 설명을 달고 싶을 땐 주석을 써요. 이건 화면에는 보이지 않지만, 나중에 내가 보기 좋게 하거나, 다른 사람이 이해할 수 있게 도와줘요. 협업할 때 정말 중요하죠.

정리하며

처음 HTML을 배우는 사람이라면, 지금 정리한 1번부터 10번까지 문법만 확실히 알아도 전체 문서의 80% 이상을 이해하게 됩니다. 한 줄 한 줄이 단순해 보여도, 이 규칙이 쌓여 웹페이지 전체를 구성하거든요. 그래서 마지막에는 이 모든 내용을 담은 전체 예제 코드로 다시 정리해봅니다.

지금까지 정리한 1번부터 10번까지의 HTML 기초 문법, 직접 연결해보면 어떤 모습일까요? 아래는 이 모든 내용을 담은 하나의 HTML 문서 예제입니다. 직접 복사해서 실습해보면 구조가 더 선명하게 보일 거예요.

전체 예제 코드로 복습하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8"> <!-- 문자 깨짐 방지 -->
    <title>HTML 기초 연습</title> <!-- 탭 제목 설정 -->
  </head>
  <body>

    <!-- 1. 문단 태그 -->
    <p>첫 번째 문단입니다.</p>
    <p>두 번째 문단입니다.</p>

    <!-- 2. 줄바꿈 태그 -->
    <p>이 문장은 줄바꿈 없이 출력됩니다.<br>하지만 여기는 줄이 바뀝니다.</p>

    <!-- 3. 중첩 태그 (굵게 + 기울임) -->
    <p><b><i>굵고 기울여진 텍스트입니다.</i></b></p>

    <!-- 4. 링크 태그 + 속성 -->
    <a href="https://example.com" target="_blank">예제 링크 열기</a>

    <!-- 5. 이미지 태그 -->
    <img src="cat.jpg" alt="귀여운 고양이 이미지">

    <!-- 6. 수평선 (빈 태그 예시) -->
    <hr>

    <!-- 7. 주석 사용 -->
    <!-- 여기는 푸터가 들어갈 자리입니다 -->

  </body>
</html>

위 코드는 10가지 문법 요소를 하나의 HTML 문서에 모두 담은 실전 예시입니다. 이 코드 파일을 직접 `index.html`로 저장하고 브라우저로 열어보면 각 태그가 어떻게 동작하는지 한눈에 알 수 있어요.

💡 한 줄 요약
“HTML은 약속이다. 그 약속만 지키면, 어떤 구조든 만들어낼 수 있다.”