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 > 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 승인 가능성 증가