HTML 편집하기 (부분)

=== 실수하기 쉬운 것들 ===
==== 태그 닫기 깜빡하기 ====
가장 흔한 실수다. 특히 div 태그는 중첩해서 많이 쓰다 보면 어디서 닫아야 할지 헷갈린다. 요즘 에디터들은 자동으로 닫아주긴 하지만... 그래도 실수는 한다. 또한 브라우저에서도 자동으로 처리는 해 주지만, 같은 태그를 여러번 사용했을 때, 한 부분만 닫지 않는 경우에는 해당 부분 전체가 영향을 받는다.

<tabber>
|-|HTML 코드=
<syntaxhighlight lang="html">
<div>
    <div>
        여기에 뭔가를 쓰고...
    <!-- div 닫는 태그를 깜빡했다! -->
</div>
  <p>다만 이렇게 <b>여러개의 같은 태그를 <b>중복해서 겹치면</b> 부모 태그의 끝까지 속성이 모두 적용 됩니다.</p>
</syntaxhighlight>
|-|결과=
<codepen>https://codepen.io/gaon12/pen/PwYEOOe</codepen>
</tabber>

===== 태그 자동 보정 =====
HTML은 관용적(Permissive) 언어라 오류가 발생해도 최대한 올바르게 보정하려는 태그 자동 보정(Tag-auto closing)을 브라우저에서 수행한다. HTML5에서는 해당 방식에 대한 [https://html.spec.whatwg.org 가이드라인]이 존재한다.

다만 [[DOM]] 생성 과정 별 브라우저별로 다를 수 있으며, [[Internet Explorer]] 6와 같이 HTML5를 지원하지 않는 브라우저의 경우에도 다르게 동작할 수 있다.

==== 대소문자 섞어쓰기 ====
HTML은 대소문자를 구분하지 않는다. DIV나 div나 DiV나 모두 같은 태그로 인식한다. 하지만 보기 좋으려면 통일하는 게 좋다. 보통은 소문자로 통일한다.

==== 속성값에 따옴표 빼먹기 ====
class나 id 같은 속성의 값에는 따옴표를 써야 한다. 안 써도 작동은 하지만... 선배 개발자가 보면 또 달걀을 던질지도 모른다.

<tabber>
|-|HTML 코드=
<syntaxhighlight lang="html">
<!-- 나쁜 예 -->
<div class=main-content>
<!-- 좋은 예 -->
<div class="main-content">
</syntaxhighlight>
|-|결과=
<codepen>https://codepen.io/gaon12/pen/NPKXXGQ</codepen>
</tabber>