HTML 태그 정리 가이드 BLOG 자주 나오는 코드 실수 정리

블로그 작성자나 웹 초보자들이 자주 겪는 HTML 태그 관련 실수와 정리 가이드를 아래 정리 합니다.

HTML 태그 정리 가이드 BLOG 자주 나오는 코드 실수 정리

🧾 HTML 태그 정리 가이드

✅ 꼭 알아야 할 기본 태그
태그 설명 예시
<p> 문단 <p>문단입니다.</p>
<br> 줄바꿈 (닫는 태그 없음) 줄1<br>줄2
<a href=\"\"> 하이퍼링크 <ahref=\"https://naver.com\">네이버</a>
<strong> / <b> 굵은 글씨 <strong>중요!</strong>
<em> / <i> 이탤릭체 <em>강조</em>
<ul>/<ol> / <li> 목록 <ul><li>항목1</li></ul>
<img src=\"\" alt=\"\"> 이미지 삽입 <img src=\"img.jpg\" alt=\"설명\">

⚠️블로그에서자주 나오는 HTML 실수 정리

실수유형 문제점 해결 방법
nbsp;</p> 불필요한 공백 + 문단 닫기 </p>만 남기고삭제
<br><br><br> 줄 간격 과도, 디자인 비효율 CSS로 마진 조절권장
잘못 닫힌 태그 (<div><p></div></p>) 레이아웃 오류 태그는 열린 순서대로 닫기
너무 많은 <span> 과도한 인라인 스타일링 CS S클래스로 분리 권장
<font 태그 사용 오래된 방식, 모바일 반응형에 부적합 CSS 스타일로 대체 (color,font-size)
<iframe> 남용 페이지 로딩 느려짐, SEO 불리 꼭 필요한 경우만 삽입
target=\"_blank\"만 쓰고 rel=\"noopener\" 안 씀 보안 취약 rel=\"noopener noreferrer\" 함께 사용

✨ 블로그용 HTML 작성 팁

• 마크다운 쓰는 플랫폼(예: 티스토리)에서는 굳이 <br>보다 줄바꿈 2번으로 대응 가능
• 제목은 <h2>, 소제목은 <h3> 등으로 구조적 HTML 사용
• 레이아웃은 가급적 CSS로 조절 (margin, padding 등)
• 반복되는 스타일은 inline 스타일보다 CSS 클래스 사용 권장