[HTML] 2-1. html 태그 작성 문법, 메타태그

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 &copy; All rights..</p> <!-- html (O) -->
<p>Copyright &copy; 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) -->