HTML - 문법과 주의사항

HTML 문법과 주의사항

---

HTML 태그

HTML 태그는 웹 문서에 표시하려고 하는 내용을 전달하는 언어이다 때문에 정확하게 사용해야 하며, HTML 문서 만들기 전에 기억해야 할 몇 가지 사항을 알아보겠습니다.

태그는 소문자로 씁시다

HTML 태그는 대소문자를 구별하지 않고, HTML4 이전에는 태그를 대문자로 표시하기도 하였지만 XHML에서는 모두 소문자로 쓸 것을 권고하였고 HTML5에서도 소문자로 표시하고 있습니다.

좋은 예	나쁜 예
<img src="test.jpg">	<Img src="imgtest.jpg">

여는 태그와 닫는 태그를 정확히 입력

대부분의 태그는 <p>와 </p>처럼 여는 태그와 다는 태그가 하나의 쌍으로 이루어져 있습니다.

브라우저가 여는 <p> 태그 를 만나면 이제부터 텍스트 단락이 시작되는구나. 라고 인식해서 <p> 태그 다음에 오는 내용을 텍스트 단락으로 처리합니다. 그리고 닫는 태그 </p>를 만나면 이제 텍스트 단락이 끝나는구나 라고 인식하면 단락을 마무리 합니다.

좋은 예	나쁜 예
<img src="test.jpg"> <p> HTML 문서입니다. </p>	<Img src="imgtest.jpg"> <p> HTML 문서입니다.

적당하게 들여쓰기를 합니다

HTML 태그는 기본 속성상 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식합니다.

따라서 HTML 소스를 작성할 때 태그 사이의 포함 관계에 따라 단계별로 들여쓰더라도 웹 브라우저에서는 단지 한 칸만 인식합니다. HTML 소스 단꼐별로 들여쓰게 되면 소스를 작성하기도 쉽고 다른 사람이 소스를 읽기 쉬울 뿐만 아니라, 태그 안에 다른 태그를 포함시켰을때 여는 태그와 닫는 태그와 포함 관계가 엉키는 일도 줄일 수 있습니다.

좋은 예	나쁜 예
<ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul>	<ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul>

태그는 속성과 함께 사용됩니다

HTML 태그는 단순히 태그 하나만 사용되는 것이 아니라. 태그에 여러 기능을 추가해 주는 속성과 함께 사용됩니다.

<태그속성="속성값" 속성="속성값" .....>형태로 사용할 수 있습니다. 예로 웹문서에 이미지를 삽입할 경우 <img> 태그를 사용하는데, <img> 태그에는 이미지 파일의 경로를 알려주는 src 속성과 이미지의 크기를 알려주는 width 속성, height 속성, 이미지에 보조 설명을 붙여주는 alt 속성 등 여러 가지 속성들이 함께 사용됩니다

모든 태그마다 태그에서 사용할 수 있는 속성들이 다르기 때문에 태그와 속성을 함께 익혀 두어야 합니다.

인코딩 방식은 utf-8

웹 서버는 영어를 기본으로 하고 있기 때문에, 웹 문서에서 한글을 표시할 수 있도록 하려면 한글을 화면에 나타내기 위한 문자세트를 지정해 주어야 합니다. 이것을 '문자 인코딩'이라고 하는데, 예전에는 웹사이트를 만들더라도 한글과 영문 페이지 정도만 필요했기 때문에 cur -kr 방식을 많이 사용했습니다.

euc -kr은 한글이나 영어 외에 프랑스어나 기타 언어들은 표현할 수 없지만, euc -kr을 주로 사용했기 때문에 많이 사용하곤 했습니다. 하지만 최근에 와서는 utf-8방식을 사용합니다.

utf-8 방식은 한글과 영문뿐만 아니라 모든 언어를 표시할 수 있는 문자세트이며, 지금처럼 웹문서 안에 다양한 내용을 담아내야 할 때 한글과 영문으로만 제한다면 화면에 표시할 수 없는 글자들이 많을 것입니다.