HTML은 웹 개발의 기초이며, 경험이 풍부한 코더도 자주 발생하는 일반적인 함정에 빠질 수 있습니다. 여기에는 일반적인 HTML 실수 8가지와 이를 수정하여 코딩 관행을 개선하는 방법이 소개됩니다.

1. 잘못된 헤딩 태그의 사용

오류: 헤딩 태그(h1, h2 등)를 순서에 맞지 않게 사용하거나 스타일링 목적으로만 사용합니다. 헤딩은 내용의 계층 구조를 나타내야 합니다.

# 2. 이미지에 대한 Alt 속성을 무시하기

실수: img 태그에서 alt 속성을 비워 놓거나 빠뜨린 경우, 이는 접근성과 SEO에 중요합니다.

수정: 화면 낭독기 및 검색 엔진에 이미지 내용을 설명하는 설명적인 alt 텍스트를 항상 포함하십시오.

예시:

<!-- 잘못된 방법 -->
<img src="image.jpg">

<!-- 올바른 방법 -->
<img src="image.jpg" alt="산 위 아름다운 일몰">

3. 사용하지 말아야 할 태그

오류: font, center, 또는 bgcolor`와 같이 시대에 뒤떨어진 HTML 태그 및 속성을 사용하는 것.

수정: 스타일 및 레이아웃에는 최신 HTML5 태그와 CSS를 사용하세요.

예시:

<!-- 잘못된 -->
<font color="red">안녕, 세상아!</font>

<!-- 올바른 -->
<p style="color: red;">안녕, 세상아!</p>

4. Doctype 선언이 누락되었습니다

실수: !DOCTYPE html 선언을 생략하여 브라우저가 페이지를 퀵스 모드로 렌더링하고 일관성 없는 동작을 유발할 수 있습니다.

수정: HTML 문서의 시작 부분에 항상 !DOCTYPE html 선언을 포함하세요.

예시:

<!-- 잘못된 코드 -->
<!html>
<head>
  <title>문서</title>
</head>
<body>
  <p>Hello, World!</p>
</body>
</html>

<!-- 올바른 코드 -->
<!DOCTYPE html>
<html>
<head>
  <title>문서</title>
</head>
<body>
  <p>Hello, World!</p>
</body>
</html>

5. 인라인 스타일 과용

실수: 과도하게 인라인 스타일을 사용하여 HTML을 복잡하게 만들고 유지보수를 어렵게 만듭니다.

<!-- 잘못된 방법 -->
<p style="color: blue; font-size: 16px;">안녕, 세상아!</p>

<!-- 올바른 방법 -->
<style>
  .text-blue {
    color: blue;
    font-size: 16px;
  }
</style>
<p class="text-blue">안녕, 세상아!</p>

6. 양식 처리 부적절

실수: 양식에서 액션, 메소드 및 적절한 입력 유형과 같은 필수 속성을 포함하지 않은 것으로 인해 사용자 경험과 보안 취약성이 발생할 수 있습니다.

수정: 모든 양식 요소가 올바르게 정의되어 있고 적절한 속성이 포함되도록 합니다.

예시:

<!-- 잘못된 예시 -->
<form>
  <input type="text" name="name">
  <button>제출</button>
</form>

<!-- 올바른 예시 -->
<form action="/submit-form" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">제출</button>
</form>

7. 비의미론적 태그

실수: 의미가 없는 div나 span과 같은 태그를 과도하게 사용하여 내용에 의미와 구조를 제공하는 의미론적 HTML5 태그를 대신 사용하지 않은 것.

수정: 가독성과 접근성을 높이기 위해 header, footer, article, section과 같은 의미론적 태그를 사용하세요.

예시:

<!-- 잘못된 예 -->
<div>
  <div>Header</div>
  <div>Main content</div>
  <div>Footer</div>
</div>

<!-- 올바른 예 -->
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>

8. 요소의 부적절한 중첩

실수: HTML 요소를 부적절하게 중첩하여 렌더링 문제가 발생하고 문서 구조가 깨질 수 있습니다.

수정: 모든 HTML 요소가 적절하게 중첩되고 닫혀 있는지 확인하세요.

예시:

<!-- 잘못된 -->
<p>This is a <div>paragraph.</div></p>

<!-- 올바른 -->
<p>This is a <span>paragraph.</span></p>

결론

이러한 일반적인 HTML 실수를 피하면 더 깔끔하고 유지보수하기 쉬운 웹 페이지를 만들 수 있습니다. 최선의 방법을 준수하면 웹 사이트가 다양한 브라우저와 기기에서 잘 작동하여 더 나은 사용자 경험을 제공할 수 있습니다. 이러한 팁을 기억하면서 코딩하면 보다 나은 HTML을 작성할 수 있습니다.

확률 높은 HTML 실수 8가지와 해결 방법