[HTML] 이것만 알아도 실수를 줄일 수 있다.

"HTML? 간단하다며 시작했는데, 왜 이렇게 자꾸 꼬이지?"

웹 개발 입문자라면 꼭 한 번쯤 겪는
'도대체 뭐가 문제인지 모르겠는 상황들'...

사실 그 시작은 [사소한 HTML 실수]에서 비롯됩니다.

이번 글에서는 HTML을 배우면서
많은 사람들이 반복하는 10가지 실수를
실전 예제와 함께 디테일하게 짚어볼게요. 🤓

오늘 배울 태그 & 실수 포인트

💡 각 실수마다 "잘못된 코드"와 "수정된 코드"를 비교하며,
왜 그 실수가 문제인지 구체적으로 이해할 수 있게 구성했어요.

1. <meta charset="UTF-8"> 생략

→ 한글이 깨지는 가장 흔한 원인입니다.

<!-- ❌ 잘못된 예시 -->
<head>
  <title>제목입니다</title>
</head>

<!-- ✅ 수정된 예시 -->
<head>
  <meta charset="UTF-8">
  <title>제목입니다</title>
</head>

메타 태그는 문서의 문자 인코딩을 알려줘요.
이게 없으면 특히 한글이 깨져서 보일 수 있어요.
반드시 <head> 태그 내에 적어주세요!

2. 닫지 않은 태그

→ HTML은 태그 짝이 맞지 않으면 레이아웃이 꼬입니다.

<!-- ❌ 잘못된 예시 -->
<p>이 문단은 닫히지 않았습니다
<a href="링크주소">링크도 닫지 않았어요

<!-- ✅ 수정된 예시 -->
<p>이 문단은 닫혔습니다.</p>
<a href="링크주소">링크도 마무리합니다.</a>

닫지 않은 태그는 다음 요소들까지 영향을 줄 수 있어요.
HTML에서는 특히 <p>, <a>, <li> 같은 태그는 반드시 닫아주세요!

728x90

3. <img> 태그에 alt 속성 누락

→ 시각 장애인, 검색엔진 모두에게 중요한 정보입니다.

<!-- ❌ 잘못된 예시 -->
<img src="logo.png">

<!-- ✅ 수정된 예시 -->
<img src="logo.png" alt="회사 로고">

이미지가 로딩되지 않거나 스크린 리더를 사용할 때
alt 속성이 없다면 정보 전달이 완전히 끊깁니다.
SEO와 접근성을 위해 alt는 필수예요.

4 ~ 6. 구조 문제 3종 세트

→ 시맨틱 오류, 중복 id, 잘못된 중첩은 구조 혼란을 유발해요.

<!-- ❌ 잘못된 예시 -->
<div id="menu">
  <div id="menu">중복 ID입니다</div>
  <a href="#"><div>링크 내부에 블록요소?</div></a>
</div>

<!-- ✅ 수정된 예시 -->
<nav id="menu">
  <ul>
    <li><a href="#">메뉴 1</a></li>
  </ul>
</nav>

id는 유일해야 하고, a 태그 안에는 블록요소를 넣지 않는 게 원칙입니다.

시맨틱 태그(nav, main, article...)를 사용하면 의미도 명확해져요.

7. title 태그 위치 오류

→ 종종 <body> 안에 넣는 실수, 꼭 피해주세요!

<!-- ❌ 잘못된 예시 -->
<body>
  <title>제목입니다</title>
</body>

<!-- ✅ 수정된 예시 -->
<head>
  <title>제목입니다</title>
</head>

브라우저 탭에 표시되는 제목인 <title>은

반드시 <head> 내부에 위치해야만 해요.

8~10. 사소하지만 중요한 습관

→ lang 속성, 불필요한 <br>, 인라인 스타일 과다

<!-- ❌ 잘못된 예시 -->
<html>
<p style="color: red; font-size: 20px;">문장</p>
<br><br><br>

<!-- ✅ 수정된 예시 -->
<html lang="ko">
<p class="highlight">문장</p>

/* CSS */
.highlight {
  color: red;
  font-size: 20px;
}

페이지 언어는 lang으로 명시하면 좋고,
스타일은 class로 분리해 관리하면 유지보수가 쉬워집니다.

✨ 코드를 작성할 때는 '보는 사람'도 고려해보세요.
협업, 확장, 유지보수에서 그 차이가 크게 드러나거든요 :)

이제 실수 없는 HTML, 조금씩 익숙해지셨나요?

실수는 성장의 씨앗이라는 말처럼,
하나씩 고쳐나가며 실력을 쌓아가면 됩니다.

조금 느려도 괜찮아요. 오늘의 한 줄이 내일의 기반이 되니까요 🌱

👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com

배웠다 말았다 다시 시작했다😎

흥미로운 나만의 홈페이지를 만들기 위한 공간입니다. #Pixel #Art #HTML #CSS #JAVASCRIPT

jjaeho.tistory.com

728x90

🚨 “이런 게 무료라고?” 무료 웹사이트 호스팅 끝판왕, 넷리파이(Netlify) 완전정복! (12)	2025.06.26
🎯 심심풀이 코인 투자 오늘의 운세 웹사이트 만들기 (GPT, CoinMarketCap) (5)	2025.04.24
[HTML] JavaScript 연결은 해야 쓰지! (0)	2025.04.07
[HTML] label 왜 쓰냐고?? (0)	2025.04.06
[HTML] Hidden 활용으로 숨기기 (0)	2025.04.06