1.여는 태그(OpeningTag)와 닫는 태그를 정확히 입력합니다. 대부분의 태그는 <p>와</p>처럼 여는 태그와 닫는 태그가 하나의 쌍으로 이루어져 있습니다.
2.닫는 태그(Closing Tag): 이것은 요소의 이름 앞에 슬래쉬(/)가 있는것을 제외하면 여는 태그와 같습니다.이것은 요소의 끝 (이 경우 단락의 부분)에 위치합니다.닫는 태그를 적어주지 않은 것은 흔한 초심자의 오류이며,이것은 이상한 결과를 초래합니다.
3.내용(Content): 요소의 내용이면, 이 경우 단순한 텍스트입니다.
4.요소(Element): 여는 태그 닫는 태그 내용을 통틀어 요소라고 합니다.
5.적당히 들여쓰기 합니다. HTML 태그는 기본 속성상 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식합니다. 따라서 HTML 소스를 작성할 때 태그 사이의 포함 관계에 따라 단계별로 들여쓰기라도 웹 브라우저에서는 단지 한칸으로 인식합니다.
| 좋은 예 | 나쁜 예 |
| <ul> <li>메뉴1</li> <li>메뉴2</li> </ul> | <ul> <li>메뉴1</li> <li>메뉴2</li> </ul> |
6.태그는 속성과 함계 사용됩니다. HTML 태그는 단순히 태그 하나만 사용되는 것이 아니라, 태그에 여러 기능을 추가해 주는 속성과 함께 사용됩니다. 즉 <태그 속성 = “속성 값” 속성 = “속성 값”……..> 형태로 사용할 수 있습니다.
예를 들어, 웹 문서에 이미지를 삽입할 경우 <img>태그를 사용하는데</img>태그에는 이미지 파일의 경로를 알려주는 src 속성과 이미지의 크기를 알려주는 width 속성, height 속성, 이미지에 보조 설명를 붙여주는 alt 속성 등 여러 가지 속성들과 함께 사용됩니다.
7.인코딩 방식은 UTF-8로 합니다. <mata charset=”UTF-8″>
8.특수 기호 입력 및 사용하기
HTML 문서에는 한글이나 영문, 숫자 등 사용자가 이볅하는 텍스트를 화면에 보여주지만, 지금부터 설명하는 방법을 이용하면 키보드에 없는 특수 기호를 입력할 수 있습니다. HTML 문서에는 특수 문자를 사용하려면 키보드에서 한글 자음을 누른 후 한자모양를 누르면 마우스 커서 바로 아래 흑은 화면 오른쪽 구석에 특수 문자가 표시됩니다.
HTML 문서의 특성상 여러 개의 공백 문자, 즉 띄어쓰기를 입력하더라도 한 칸만 인식하기 때문에, 여러 개의 공백을 나타내려면 공백을 나타내는 특수 기호를 여러 개 입력합니다. 또한 따옴표를 화면에 표시하려고 할 경우, 소스 창에 그대로 따옴표를 입력하면 <img src=”bg.jpg”>에서 사용하는 속성 값의 따옴표 처럼 인식해 버리기 때문에 그대로 따옴표를 입력하면 안 되고 따옴표를 대신하는 특수 기호를 사용해야합니다.'<‘ 같은 꺽쇠 괄호를 화면에 표시할 때에도 그대로 입력하면 태그로 인식 하므로 태그가 아닐 경우 특수 기호로 입력합니다.
9. 기본 구조와 HTML 문서 만들기
HTML 편집기(Edit) Brackets(download)사용하여 기본 구조 편집
<! docpype html>
<html lang = “ko”>
<head>
<meta charset=“UTF-8”>
<title>내가 처음 만드는 HTML</title>
</head>
<body>
<p>HTML 기본 구조 </p>
</body>
</html>
10.HTML 문서와 DOCTYPE
웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용하는 것이 ‘문서 유형(document type)’을 지정하는 <!doctype>입니다. 문서 유형은 웹 브라우저에서 “이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라”고 알려주는 것입니다.
11.언제나 시작은 <html></html> 태그
문서의 유형을 선언 후에 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html> 태그입니다. <html> 태그는 웹 문서가 시작된다는 뜻이고 </html> 태그는 웹 문서가 끝났다는 뜻입니다.<html> 태그에서는 lang이라는 속성을 사용해 문서에 사용할 언어를 지정할 수 있습니다. 예를들어 한국어라면 korea의 약자인 ko를 사용하면 됩니다.
국가별 언어 코드는 다음과 같습니다.
| 코드 | de | en | fr | ja | ko | zh |
| 언어 | 독일 | 영어 | 프랑스 | 일본어 | 한국어 | 중국어 |
11.브라우저에게 정보를 주는 <head> 태그
웹 브라우저 화면에 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 무도 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다. <head>태그와 </head> 태그 사이에서 문서 정보를 표시하기 위해 사용할 수 있는 주요 태그들은 다음과 같습니다.
<title>태그 – 문서 제목
<title> 문서 제목 </title>
<meta>태그 – 문자 인코딩 및 문서 키워드, 요약 정보
<body> 태그- 문서의 몸통 주요 내용 들어갈 부분입니다.