본문 바로가기
카테고리 없음

가장 흔한 HTML 실수 20가지 (및 해결 방법)

by info521 2025. 10. 25.

 

SEO 키워드: HTML 오류, HTML 문제 해결, HTML 팁

HTML은 웹사이트의 기본 뼈대를 구성하는 언어이지만, 많은 초보자와 심지어 경험 많은 개발자들조차 실수하기 쉽습니다. 작은 오류 하나만으로 웹페이지가 제대로 작동하지 않거나, 검색엔진에 잘 노출되지 않을 수 있습니다.

이 글에서는 실무와 학습에서 자주 발생하는 가장 흔한 HTML 오류 20가지를 소개하고, 각각에 대한 문제 해결 방법과 실용적인 HTML 팁도 함께 제공합니다.


1. 닫지 않은 태그

오류:

<p>이 문단은 닫히지 않았습니다.

해결:

<p>이 문단은 닫혔습니다.</p>

2. 중첩 태그 순서 오류

<b><i>텍스트</b></i>

해결:

<b><i>텍스트</i></b>

3. 잘못된 이미지 경로

오류 예시: <img src="img/pic.jpg">

해결: 파일 경로, 이름, 확장자를 정확히 확인하세요.

4. alt 속성 누락

<img src="logo.png">

해결:

<img src="logo.png" alt="회사 로고">

5. 제목 태그 남용 (h1을 여러 번 사용)


<h1>블로그 제목</h1>
<h1>섹션 제목</h1>
  

해결:


<h1>블로그 제목</h1>
<h2>섹션 제목</h2>
  

6. 인라인 스타일 과다 사용

오류:

<p style="color:red;font-size:20px;">텍스트</p>

해결 (CSS 분리):


<style>
  .red-text { color: red; font-size: 20px; }
</style>
<p class="red-text">텍스트</p>
  

7. 의미 없는 태그 남용

<div><div><div>텍스트</div></div></div>

해결: <section>, <article> 등 semantic 태그를 사용하세요.

8. 공백 없는 속성 값

<input type="text"name="email">

해결: <input type="text" name="email">

9. 잘못된 링크 태그

<a>여기를 클릭하세요</a>

해결: <a href="https://example.com">여기를 클릭하세요</a>

10. 특수문자 미처리

<p>5 > 3</p>

해결: <p>5 &gt; 3</p>

11. 잘못된 DOCTYPE 선언

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

해결: <!DOCTYPE html>

12. 중복된 ID 사용


<div id="section1"></div>
<div id="section1"></div>
  

해결: ID는 한 번만 사용하고, 반복 요소는 class 사용

13. 비어 있는 링크

<a href="#">링크</a>

문제점: 페이지 상단으로 이동할 수 있음

14. HTML 주석 문법 오류

<!-- 주석 시작 --!>

해결: <!-- 주석 내용 -->

15. <br> 태그 남용

<p>문장 1<br><br><br>문장 2</p>

해결: CSS를 사용하여 여백 조절

16. iframe 보안 속성 누락

<iframe src="..."></iframe>

해결:

<iframe src="..." sandbox loading="lazy"></iframe>

17. 잘못된 charset 선언 위치


<title>문서 제목</title>
<meta charset="UTF-8">
  

해결: meta는 title보다 먼저 위치

18. 부적절한 폼 요소

<form><input></form>

해결: <input type="text"> 또는 다른 유효한 type 속성 필요

19. 메타태그 누락

<meta name="description">

해결: <meta name="description" content="페이지 설명">

20. HTML 구조 오류


<body>
  <head></head>
</body>
  

해결:


<html>
  <head></head>
  <body></body>
</html>
  

✅ 마무리 요약

많은 HTML 오류는 단순한 실수에서 비롯됩니다. 하지만 이처럼 자주 발생하는 20가지 문제를 알고 있다면, 웹페이지를 더 안정적이고 SEO 친화적으로 만들 수 있습니다.

  • 검색엔진 노출(SEO) 향상
  • 페이지 로딩 속도 개선
  • 접근성과 사용자 경험(UX) 향상
  • Google AdSense 승인 가능성 증가