HTML/헤더
HTML > 헤더
입력 예
+/-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>HTML/헤더</title>
</head>
<body>
</body>
</html>
필수 요소
+/-- html
- HTML 문서인 것을 나타내는 요소. HTML 문서의 처음(DTD 다음)에 <html>, 마지막에 </html>를 한쌍으로 입력한다.
- 시작 요소에는 lang 속성을 사용해서 사용언어가 뭐인지를 지정하는 것이 바람직하다. lang 속성을 지정하는 것으로 적절한 폰트가 지정되며, 글자 깨짐 등을 방지할 수 있다. 한국어 환경에 대하는 lang="ja" 등 언어환경과 사용언어가 같은 경우에는 속성 지정으로 그다지 눈에 띌 효과를 얻을 수 없을지도 모르지만, 언어 환경과 사용언어가 다른 경우에는 속성 지정으로 적절한 효과를 얻을 수 있는 것이 많다.
- head
- <head>〜</head>を<html>〜</html> 중에서 한쌍으로 입력한다. 여기에서는 title 요소나 meta 요소 등 문서에 관한 정보를 기술한다. 여기서 적은 정보가 직접 표시되는 것은 아니지만, 딱 맞는 표시를 행하기 위해서 브라우저 측에 필요한 정보를 넘겨주는 역할이 있다.
- body
- <body>〜</body>を<html>〜</html> 중에서 한쌍으로 입력한다. 여기서는 직접 브라우저에 표시시키고 싶은 문장을 입력한다.
- title
- 페이지의 제목을 나타내는 요소. 일반적인 브라우저에서는 타이틀바에 표시된다.
- <head>~</head> 중에 한쌍으로 입력하고, ~ 부분에 제목을 입력하는 것으로 지정된다. 제목은 그 문서가 뭔지를 나타내는 것으로 검색결과에 표시시킬 때나 즐겨찾기(북마크) 등록을 했을 때에도 보통 그 내용이 뭔지 알게 하는 것이 바람직하다.
- 예를들면, “Naver Coperation”의 회사 소개이면 “회사소개”가 아닌 “NAVER : NAVER소개 : NAVER”로 해야하는 것이다.
DTD
+/-HTML은 DTD(Document Type Definition = 문서 형식 정의)라는 스키마 언어를 채용하고 있다. HTML의 DTD에는 HTML로 사용할 수가 있는 요소나 속성 등이 정의되고 있다. 예를들면, HTML 4.01에는 3종류의 DTD가 존재한다.
- Strict
- 가장 엄밀한 DTD에서 이론적인 마크업 목적을 중심으로 구성되어있으며, HTML 3.2와 비교하면 시각적이 되는 요소가 대부분이 제거됐다.
- Transitional
- HTML 3.2부터 4.01로의 과도기로 사용하는 DTD이다. Strict로의 이행에 따라사 제거된 요소를 이전의 버전과의 호환성을 위해서 포함시킨다. 하지만, 인라인 프레임 이외의 프레임은 사용할 수 없다.
- Frameset
- 프레임 정의용의 DTDで이다. 프레임 정의 외의 목적으로 사용할 수가 없고, 또 <html>~</html>에 직접 <body> 요소를 포함시킬 수 없다. (<noframes>〜</noframes> 중에 적는 요소가 있다. )
DTD는 문서의 머릿말에 하나만 적는다. 잠깐 생략시키지만 정식 HTML의 문서에는 필요한 것이며, 일자일구 틀리지않고 입력할 필요가 있다.
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">
또한, 일부 웹 브라우저에서는 위의 내용 대로 기술하면 규격에 따른 표준준거 모드가 되지만, 말미에 있는 URL 부분을 생략하면 그 문서는 후방호환모드가 되며, 웹 브라우저의 독자적 확장을 사용할 수 있게 된다. 다만, Strict에서는 후방호환모드에서도 독자적 확대를 이용할 수 없는 실장계가 많다.
meta 요소
+/-meta 요소는 문서 자체의 여러 정보(메타더이터)를 적는다.
http-equiv 속성
+/-본래라면 HTTP로 교환시킬 정보를 미리 파일에 적을 수가 있다. 이 속성에 대응하고 있는 WWW 서버나 웹 브라우저가 이 정보를 읽어들이고 페이지의 작성자가 바라는 HTTP 상의 동작을 실현시킬 수가 있다.
다만, 본래라면 HTTP 리스폰스 헤더로 지정해야만 하기 때문에, 입력하는 것으로 오류가 일어날 경우도 있다.
문자 부호화 방식의 지정
+/-<meta http-equiv="Content-Type" content="text/html;charset=문자 부호화 방식">
문서가 text/html형식으로 쓰여져있는 것을 나타냄과 동시에 문서 중에서 사용되고 있는 문자 부호화 방식을 지정한다. 문서 중에 사용되고 있는 문자 부호화 방식과 같은 부호화 방식을 설정할 필요가 있다. 문서 중에 사용되고 있는 문자 코드와 다른 것을 지정한 경우, 글자 깨짐의 원인이 되기에 주의가 필요하다.
스타일 시트 스크립트의 타입 지정
+/-<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
페이지 내에서 스타일 시트, 스크립트를 사용하고 있는 경우에 사용하고 있는 스타일 시트, 스크립트의 종류를 각각 지정한다. 생략으로도 웹 브라우저가 text/css, text/javascript로 자동적으로 인식하지만, 지정하는 것이 바람직하다.
자동적으로 페이지를 읽어드리기
+/-<meta http-equiv="Refresh" content="초수">
<meta http-equiv="Refresh" content="초수;url=URL">
HTTP의 Refresh 헤더를 지정하는 것에 따라서, 페이지가 읽어드리고나서 자동적으로 다시 읽어드리기를 하는 것을 클라이언트로 지정한다. URL를 지정한 경우에는 지정한 URL의 읽어들리기가 행해진다. 다만, 접근성의 면에서는 이용을 권장하지 않는다. 서버 측에서 직접적인 처리를 행하는, 보통의 링크로 이행시키는 등의 방법으로 대용하는 것이 바람직하다.
셀프 연령제한
+/-<meta http-equiv="Pics-Label" content='(pics-1.1 "URL" l r (v 0 s 0 n 0 l 0))'>
컨텐츠에 연령제한에 관한 정보를 적는다. pics-1.1 "URL"의 부분에 Pics-Label의 사양이 쓰여져있는 페이지의 URL을 지정하고, l r ()의 부분(L과 R의 소문자 사이에 반각 띄어쓰기)에 사양에 따른 연령제한을 4단계 평가로 행한다. 사양은 복수로 정할 수 있기 때문에, 자시늬 따르는 형식의 작성법에 따라서 항목을 지정한다.
예를들면, 영국 비영리 단체 ICRA(Internet Content Rating Association)가 정한 형식에 따른 경우에는 아래와 같은 형식이 된다.
| 연령제한이 되는 요소 | 규제 Lv0 | 규제 Lv1 | 규제 Lv2 | 규제 Lv3 | 규제 Lv4 |
|---|---|---|---|---|---|
| v=violence(폭력) | 문제 없음 | 다툼, 장애 | 살인 행위등의 묘사 | 피를 동반하는 살인이나 사체 | 과격한 폭력, 살인 |
| s=sex(섹스) | 보통의 키스 등 | 이성과의 애무 행위(페팅) | 성행위를 연상시키는 표현이나 묘사 | 성행위를 선명히 묘사 | |
| n=nude(누드) | 노출도가 높은 의상 | 수영복이나 속옷 등 비교적 노출이 높은 의상의 묘사 | 전라 등의 묘사 | 성기 등의 강조된 나체의 묘사 등 | |
| l=language(단어) | 비교적 온화하지만 품위 없는 말이나 욕 | 모독 등의 욕 | 성적인 표현. | 비방중상이나 과경한 에로. | |
| URL의 지정 | http://www.rsac.org/ratingsv01.html | ||||
그 외의 정보를 기재하기
+/-<meta name="정보의 종류" content="정보">
그 외의 구체적으로 HTML로 규정되고 있지 않은 메타 정보에 대해서는 name 속성과 content 속성(과 scheme 속성)을 사용해서 적는다.
| 정보의 종류 | 정보 | |
|---|---|---|
| 작성자 | author | 작성자의 이름(실명이나 아니여도 됨) |
| generator | 작성 소프트웨어 | |
| reply-to | 연락처(메일 주소를 쓰는 것이 일반적) | |
| tel | 전화번호 | |
| fax | FAX 번호 | |
| copyright | 저작권 | |
| 일시 | creation date | 작성일 |
| date | 작성일 또는 갱신일 | |
| expires | 유효기간 | |
| 대상 | distribution | 다른 meta태그의 대상 범위 global:외부 local:내부 |
| language | 사용 언어 | |
| coverage | 상품이나 서비스의 제공 범위 worldwide:전세계 | |
| targeted geographic area | 웹 페이지의 대상 범위 | |
| rating | 대상 연령 general:일반적 safe for kids:어린이가 봐도 안심 adult:어른 child:어린이 용 | |
| classification | 페이즈의 장르 business:사업용 computers:컴퓨터 관련 entertainment:연예계 internet:인터넷 관련 miscellaneous:이것 저것 personal:개인적인 페이지 | |
| 검색 로봇 | keywords | 키워드(“,”로 구분한다) |
| description | 페이지 내용의 요약 | |
| robots | 검색시킬지 않을지(“,”로 구분한다) index:그 페이지를 검색시킨다 noindex:그 페이지를 검색시키지 않는다 follow:링크를 검색시킨다 nofollow:링크를 검색시키지 않는다 | |
| revisit_after | X days:X일 후에 재검색 | |
link 요소
+/-문서에 관한 다른 리소스를 적는 요소. 외부 스타일 시트의 지정이나 사이트 내의 링크에 관한 정보 지정등에 사용된다. 사이트 내에 관한 링크의 정보는 시몽키나 오페라 등 일부의 브라우저가 내비게이션 정보로 취득 내용을 브라우저의 툴바에 표시한다.
<link rel="페이지와의 관계" href="주소" type="파일 종류">
<link rev="링크와의 관계" href="주소" type="파일 타입">
rel 속성은 URL로 나타낸 페이지 측에서 본 이 페이지와의 관계를, rev 속성은 이 페이지 측에서 본 URL로 나타낸 페이지의 관계를 나타낸다. 외부 파일을 페이지 내에 삽입할 경우에는 type 속성도 적는다.
| 값 | 개요 |
|---|---|
| stylesheet | 외부 파일의 스타일 시트 |
| alternate stylesheet | 외부 파일의 대체 스타일 시트 |
| alternate | 문서의 다른 버전. RSS나 Atom을 지정하는 것에 이용되며, 여기서 지정된 내용은 RSS 대응 브라우저가 자동적으로 정보를 취득해서 툴바 등으로 통지시킨다. 복수로 지정할 경우, 브라우저가 내용을 식별할 수 있게 title 속성을 붙이는 것이 바람직하다. |
| shortcut icon | Favicon. icon과 같이 지정하는 것이 바람직하다. |
| icon | Favicon. shortcut icon과 맞춰서 지정하는 것이 바람직하다. |
| made | 작성자의 연락처. |
| start | 탑 페이지 |
| next | 다음 페이지(지정된 페이지에 내용의 이어짐이 있는 것을 나타낸다) |
| prev | 전 페이지(이 페이지에서의 내용이 이어지고 있는 것을 나타낸다) |
| search | 검색에 관한 정보의 장소. 위키미디어 프로젝트처럼 OpenSearch 형식의 xml 파일을 지정해서 파이어폭스 등의 검색 플러그인을 읽어드려지는 경우도 있다. |
| contents | 목차 |
| index | 색인 |
| glossary | 용어집 |
| copyright | 저작권에 대한 페이지 |
| made | 저작자의 연락처를 rev 소속으로 지정. mailto:로 메익 주소를 저는 것이 일반적이지만 작성자와 연락을 취할 수 있는 것이면, 메일 폼 등의 페이지를 지정해도 좋다. |
| chapter | 장 |
| section | 절 |
| subjection | 항 |
| appendix | 부록 |
| help | 도움말 페이지 |
| bookmark | 문서 내의 북마크 |
base 요소
+/-<base href="URL">로, 페이지 내의 모든 링크가, 지정된 URL을 기준으로 한다. <base href="URL" target="타켓">과 같이 해서 target 속성도 지정하는 것이 가능. 가령 아래의 웹페이지가 http://ko.wikipedia.org/ 라고 해서,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>위키책으로의 링크</title>
<base href="http://ja.wikibooks.org/">
</head>
<body>
<p><a href="./wiki/HTML">HTML의 교과서</a></p>
</body>
</html>
로 입력하면, http:// ko.wikipedia.org/wiki/HTML 가 아닌, http://ko.wikibooks.org/wiki/HTML 로 링크된다.