1. p+tab
<p + enter
2. 태그는 소문자로 쓴다. (대문자 X)
실행은 된다. 초기에는 대문자로 썼지만 지금은 소문자로만 쓴다.
3. 속성은 시작태그에 쓸 것.
시작태그의 속성을 쓸 때는 ""를 한다. 따옴표
4. 종료태그는 /가 붙어있음
- input은 종료태그가없음. 끝에 /를 넣어줌. (시작이면서 종료태그)
<br/>
<hr/>
html5이상(!DOCTYPE)에서는 종료를 하지 않아도 중요하지 않음.
만약 xhtml로 할 때는 꼭 종료를 해주어야한다.
종료태그가 없어도 실행은 되지만 꼭 종료해줄 것
table은 종료태그가 생략될 수 없다.
tr, td는 생략해도 오류가 나지는 않음. 그러나 써주는 게 좋다.
5.
tab 들여쓰기
shift tab 들여쓰기 취소
space바를 쓰지 말것.
예)
<!-- 종료가 없는 태그의 작성 -->
- xhtml 에서는 종료가 필수입니다. 종료태그가 없는 요소는 마지막에 '/'를 넣어줍니다.
<hr> <!-- html (O) -->
<hr /> <!-- html (O) -->
<hr /> <!-- xhtml (O) -->
<hr> <!-- xhtml (X) -->
<p><input type="text"></p> <!-- html (O) -->
<p><input type="text" /></p> <!-- html (O) -->
<p><input type="text"></p> <!-- xhtml (X) -->
<p><input type="text" /></p> <!-- xhtml (O) -->
<!-- 대문자로 태그작성 금지 -->
- html 태그는 소문자로 작성합니다.
<p>Pellentesque habitant morbi.</p> <!-- html (O) -->
<P>Pellentesque habitant morbi.</P> <!-- html (X) -->
<p>Pellentesque habitant morbi.</p> <!-- xhtml (O) -->
<P>Pellentesque habitant morbi.</P> <!-- xhtml (X) -->
<!-- 속성의 값은 인용부호로 감싸기 -->
- 속성의 값은 인용부호 " " 또는 ' ' 로 감싸야 합니다.
<p class="abc">Pellentesque habitant.</p> <!-- html (O) -->
<p class='abc'>Pellentesque habitant.</p> <!-- html (O) -->
<p class=abc>Pellentesque habitant.</p> <!-- html (X) -->
<p class="abc">Pellentesque habitant.</p> <!-- xhtml (O) -->
<p class='abc'>Pellentesque habitant.</p> <!-- xhtml (O) -->
<p class=abc>Pellentesque habitant.</p> <!-- xhtml (X) -->
<!-- 'Well Formed'으로 작성하기 -->
- html은 부모요소와 자식요소가 Well Formed의 구조로 작성되어야 합니다.
<p><em>Pellentesque habitant.</em></p> <!-- html (O) -->
<p><em>Pellentesque habitant.</p></em> <!-- html (X) -->
<p><em>Pellentesque habitant.</em></p> <!-- xhtml (O) -->
<p><em>Pellentesque habitant.</p></em> <!-- xhtml (X) -->
<!-- 종료태그의 생략 여부 -->
- html에서는 종료태그를 생략해도 되는 요소가 있습니다. 하지만 생략하지 않는 것이 구조적으로 더 낫습니다.
<table>
<tr>
<td>Pellentesque habitant.</td>
</tr>
</table> <!-- html (O) -->
<table>
<tr>
<td>Pellentesque habitant.</td>
</tr>
</table> <!-- xhtml (O) -->
<table>
<tr>
<td>Pellentesque habitant.
</table> <!-- html (O) -->
<table>
<tr>
<td>Pellentesque habitant.
</table> <!-- xhtml (X) -->
<!-- 문자코드의 표현 -->
- 일부 특수문자는 화면에서 표현되지 않을 수 있기 때문에 코드로 풀어 쓰는 것을 권장합니다.
<p>Copyright ⓒ All rights..</p> <!-- html (X) -->
<p>Copyright ⓒ All rights..</p> <!-- xhtml (X) -->
<p>Copyright © All rights..</p> <!-- html (O) -->
<p>Copyright © All rights..</p> <!-- xhtml (O) -->
<!-- 공백지정하지 말아야 하는 경우 -->
- textarea 요소는 태그 사이를 띄울 경우 브라우저에서 공백이 표현됩니다.
<p>
<textarea cols="50" rows="6"></textarea>
</p> <!-- html (O) -->
<p>
<textarea cols="50" rows="6"></textarea>
</p> <!-- xhtml (O) -->
<p>
<textarea cols="50" rows="6">
</textarea>
</p> <!-- html (X) -->
<p>
<textarea cols="50" rows="6">
</textarea>
</p> <!-- xhtml (X) -->
'Front > Html' 카테고리의 다른 글
[HTML] 3-3. 단의어 정의와 약어, 작품의 제목 표현. (0) | 2020.11.05 |
---|---|
[HTML] 3-2. 구문강조, 하이라이팅 (0) | 2020.11.05 |
[HTML] 3-1. 문자 실체잠조와 수치 문자 참조 적용 (0) | 2020.11.05 |
[HTML] 2-4. html템플릿 작성하기 (0) | 2020.11.05 |
[HTML] 2-3. 메타요소 알아보기 (0) | 2020.11.05 |
[HTML] 2-2.문서형 선언, 언어 지정, 문자 코드 셋 지정하기 (0) | 2020.06.15 |
[HTML] 1. 웹표준 (0) | 2020.06.15 |
[HTML] 0. 더미 텍스트, 이미지 만들기 (0) | 2020.06.15 |