-<!DOCTYPE>
:모든 웹 문서는 올바르게 DOCTYPE(DTD)를 선언하여 문서의 Type을 반드시 명시해야 한다. 웹 문서는 선언된 DOCTYPE의 형식에 따라 문법을 준수하여 작성되기 때문에 DOCTYPE을 반드시 선언해야 하며, W3C에서 제시하는 기본적인 웹 표준 필수 요소를 포함해야 한다.
DTD는 문서의 정보 모델을 구체적으로 서술한 것으로 엘리먼트 타입 선언, 어트리뷰트 리스트 선언, 엔티티 선언, 표기선언 등 4개의 부류로 구성되어 있다. DTD를 기준으로 하여 W3C에서 제공하는 문법 검사기(Validator)로 문서가 제대로 작성되어있는지를 확인할 수 있고, 이를 사용하여 문법 검사 및 유지보수가 가능하다.
DTD란?
DTD란 Document Type Definition의 약자로 strict(엄격한), transitional(과도적인), frameset(프레임셋)의 세가지 형태가 있다. 이 중 프레임셋은 프레임을 사용할 경우에 프레임셋이 되는 문서에만 사용하게 되며, 나머지 두가지의 경우는 해당 문서가 문법을 엄격하게 준수하는지 아닌지를 표시하게 된다. 브라우저는 Doctype과 DTD를 참조하여 문서의 표시형태를 결정하게 된다. 문서의 언어 버전만 사용하고 참조 DTD를 기입하느냐 아니냐에 따라서도 문서의 표시 형태가 달라질 수 있다.
W3C의 권장 DOCTYPE
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5
<!DOCTYPE html>
-<html>
:문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어를 태그(tag)라고 하는데 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있다. 또한 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다.
HTML 요소는 을 제외한 HTML, XHTML 문서의 모든 내용을 포함하는 가장 바깥 요소이자 최상위 요소로 쓰인다.
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns : 지정 네임 스페이스(XHTML 문서에서만 사용)
<html> 태그는 다음과 같은 표준 속성을 지원합니다.
dir : 요소 컨텐츠 내 문자의 표시 방향을 지정한다. "ltr" 은 왼쪽에서 오른쪽 방향(기본 설정)을 의미하며, "rtl"은 오른쪽에서 왼쪽 방향을 의미
lang : 콘텐츠의 언어 코드 지정
xml:lang : XHTML 형식에 문서의 언어 코드 지정
HTML과 XHTML의 차이점
XHTML에서는 xmlns속성이 필수 속성이지만, HTML에서는 생략해도 관계 없다.
xmlns속성을 정의하지 않아도 w3.org의 HTML validator에서 에러가 나지 않는 이유는, 기본값인 "xmlns=http://www.w3.org/1999/xhtml"을 포함하지 않더라도 <html>태그에 추가되기 때문이다.
-<body>
:문서 내 영역을 정의하는 요소로, 글자, 이동(하이퍼링크), 이미지, 테이블, 목록 등, 웹 브라우저에 표시할 HTML 문서의 모든 내용을 포함한다.
표준 속성
class : 요소의 클래스명을 지정한다. (예: class=”title”)
dir : 요소 컨텐츠 내 문자의 표시 방향을 지정한다. "ltr" 은 왼쪽에서 오른쪽 방향(기본 설정)을 의미하며, "rtl"은 오른쪽에서 왼쪽 방향을 의미
id : 요소에 고유한 이름을 지정
lang : 요소 항목에 관한 언어코드를 지정
style : 특정 경우에 사용할 수 있도록 요소에 인라인 스타일을 지정
title : 요소에 중요한 정보(타이틀)를 지정
xml:lang : XHTML 형식 문서의 언어코드를 지정
-<h1>~<h6>
:heading의 h : (페이지 위나 책의 한 부문에 붙이는) 제목, (연설・글의 부문별) 주제
<h1>~<h6>태그는 글자의 크기를 제어하며 HTML 문단의 제목을 지정한다.
<h1> 요소가 가장 크게 표시되며 <h6> 요소가 가장 작게 표시 되는데, <h1>부터 가장 중요한 제목에 사용하며 <h6> 요소는 가장 작은 제목을 나타낼 때 사용한다.
-<p>
:Paragraph 의 p : 단락, 문단, 절
div, ul 등과 같이 기본적인 마크업에 가장 많이 쓰이는 태그로 용어의 뜻에서 알 수 있듯이 글의 단락, 단락을 나타내고자 할 때 쓰인다.
<p> 내용 </p>
사용 예)
<h1>제목</h1>
<p>문단1 : 문서에 대한 각 문단, 문단을 묶어주는 태그로 p를 사용한다.</p>
<p>문단2 : 문서에 대한 각 문단, 문단을 묶어주는 태그로 p를 사용한다.</p>
<p>문단3 : 문서에 대한 각 문단, 문단을 묶어주는 태그로 p를 사용한다.</p>
-<br>
:break 의 br : 이어져 있는 줄을 깨트려 줄바꿈 시킨다는 의미
문서 내 줄바꿈에 쓰인다. 문단을 만들지는 못하며, 닫는 태그 없이 사용된다.
<br />
사용 예)
<p>문장이 너무 길어서 <br />여기서부터 줄바꿈 시켜야 겠습니다.</p>
*br 태그는 html4 에서는 <br>로 사용 가능하고, xhtml 버전에서는 <br />로 닫는 태그를 엄격이 지켜야 한다. 하지만 다시 html5 에서는 간단하게 <br> 로 표기해도 충분하다.
*br 태그를 사용할 때는 단락 내에서만 사용되어야 하며, 단락 자체를 구분하기 위해 사용되어서는 안된다(단락 자체를 구분하기 위해서는 p 태그를 사용하는 것이 올바른 사용법이다).
*일반적인 블로깅 툴들을 보면 글을 작성할 때 엔터(Enter)키를 누를 시 br 태그로 구분 되게 만들어져 있는데 이것은 잘못된 것이다. 글을 입력할 때 엔터(Enter)키를 사용하면 p 태그로 문단을 구분해주는 것이 올바른 마크업이며 대표적인 예로 wordpress blog 를 들 수 있다.
-<hr>
:horizontal 의 hr : 수평의, 가로선의
HTML 페이지 내에 수평선을 그어 내용 영역을 구분하며, 브라우저 별로 적절히 변환되어 보여진다. hr 은 단순히 문단의 구분이 아닌 전체 문서의 흐름에서 주제가 확연히 다른 영역끼리의 구분을 위해 사용한다.
<hr />
사용 예)
<p>첫 번째 칼럼입니다.</p>
<hr />
<p>두 번째 칼럼입니다.</p>
*hr 태그는 html4 에서는 <hr>로 사용 가능하고, xhtml 버전에서는 <hr />로 닫는 태그를 엄격이 지켜야 한다. 하지만 다시 html5 에서는 간단하게 <hr> 로 표기해도 충분하다.
*기본적으로 회색 수평선으로 표시되는데, 일반적으로 디자인적인 면을 위해 css로 브라우저에서 보이지 않게 처리하는 경우가 많다.
-<!-- -->
:주석 태그는 소스코드에 설명을 달 때 사용한다. 브라우저 상에서는 표시되지 않으며, 사용된 코드를 설명할 때 쓰이기 때문에 작업 후 소스코드를 수정할 때 용이하다. 주석에 프로그램별 정보를 저장할 수도 있는데, 이 경우 사용자를 위한 표시뿐만 아니라 지속적으로 사용 가능한 프로그램 정보를 표기해주어야 한다.
이전 브라우저에서 지원되지 않는 스크립트나 스타일이 쓰여지는 것을 사전에 방지하기 위해 일반적인 글자로 설명하는 것이 가장 좋은 활용법이다.
<!–– ––>
사용 예)
<!–– header ––>
<div id="header">
...
</div><!–– //header ––>
<!––<script type="text/script">
$(document).ready(function(){
alert();
});
</script>//––>
*필수요소는 아니지만 일반적으로 주석의 끝 부분을 나타낼 때에는 (//)를 함께 써주면 주석이 끝나는 부분이라는 것을 쉽게 알 수 있다.
*두 번째 예제처럼 html 문서 안에서 script 나 style 을 사용할 때 내부의 소스만 주석을 달려면 .css 또는 .js 파일에서 처럼 (//) 또는 (/* */) 주석을 사용해야한다.