08
19
스마트팩토리/HTML

HTML(Hyper Text Markup Language)

HTML

HTML은 웹페이지를 위한 마크업 언어를 의미한다. 웹페이지(Web Page)는 월드 와이드 웹 상에 있는 개개의 문서를 가리킨다. 간단히 웹(Web)이라 부르는 경우가 많다. 이 web이란 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 서로 다른 개념이다. 인터넷이라는 이름은 네트워크의 네트워크를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결(Inter Network)하고자 하는 의도에서 어원을 두고 있다. 

 

cf. 마크업 언어(markup language)

마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 한다.

 

DTD

HTML을 작성하려면 문서 타입이 필요하다. 문서 타입을 DTD라고 하며 DTD(DOCTYPE or Document type Definition)는 문서상 최상단에 선언해야 한다. 이러한 문서형 정의로 HTML5, HTML4, XHTML 세 가지 문서 유형이 존재하며 기술한 유형에 따라 마크업 문서의 요소와 속성(attribute) 등을 처리하는 기준이 되고 이것은 또한 유효성 검사에 이용된다. 문서형 정의를 생략하는 경우 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks mode)로 렌더링 되어 크로스 브라우징에 어려움을 겪는다.

DOCTYPE의 버전별선언에 따라서 HTML은 지원하는 태그가 조금씩 다르다. 그리고 DOCTYPE 태그가 아니라 선언문으로서의 역할이기 때문에 HTML 문서 최상위에 위치한다. 또한 DOCTYPE는 종료하는 태그가 없고 <!DOCTYPE>은 HTML 문서의 구성요소는 아니다.

최상단에 문서 타입을 지정한다. HTML이 어떤 버전으로 작성되었는지 미리 선언하여, 웹 브라우저가 내용을 올바르게 표시할 수 있또록 해주는 것이 DOCTYPE이다. 

 

html 태그

그리고 바로 다음에 html 태그가 오는데 이 태그의 속성으로 문서에서 다룰 언어를 지정해야한다. 언어 설정은 필수 속성으로 이 속성이 생략되어 있으면 안 된다. meta 태그(메타 태그, 문서 자체를 설명하는 정보)는 문서의 정보(웹페이지의 요약)를 브라우저와 검색엔진에게 이 문서가 어떤 정보를 가지고 있는지 알려주는 것을 명시한다. 즉, 문서 자체를 설명하는 정보를 담고 있는 것으로 그 문서의 핵심 키워드, 누가 만들었는지, 문자셋(언어 설정) 등은 어떤 것을 사용하고 있는지 등의 정보를 담고 있는 태그이다. html 태그 안에는 head 태그와 body 태그로 나뉘어 있다.

  • head 태그 : 콘텐츠를 표현하는 내용은 없지만 콘텐츠를 표현하기 위한 내용들을 포함
  • title 태그 : 문서의 정보를 브라우저에 표시하는 역할
  • link 태그 : 외부자원(external file)
  • body 태그 : 문서의 본문영역, 콘텐츠 영역, 웹 페이지에 표현되는 콘텐츠를 작성

cf. DOCTYPE 버전 정보

유효한(valid) HTML 문서를 만들기 위해서는 HTML 버전 정보를 명시해야 한다.

① HTML 4.01 문서 유형

  • The HTML 4.01 Transitional DTD : Strict DTD에서 deprecated 요소와 속성을 포함, 권장되지 않는 요소나 속성을 문서에 포함할 필요가 있을 때, 하위 호환성을 위해 이 선언문을 사용
  • The HTML 4.01 Strict DTD : Traditional DTD에서 deprecated 된 요소와 <frameset> 관련 요소 및 속성을 제외한 가장 엄격한 DTD
  • The HTML 4.01 Frameset DTD : Traditional DTD에 frameset을 포함, Frameset을 적용한 문서에서는 이 선언문을 사용, 가장 느슨한 문서 형식

② The XHTML 1.0 문서 유형

  • The XHTML 1.0 : XHTML 1.0에서는 HTML 4.01의 DTD와 유사하게 3가지 DTD 중 하나를 사용할 수 있다. HTML과 유사하지만 문법이 좀 더 엄격한 특징이 있다.
  • The XHTML 1.1 : XHTML 1.1에서는 하나의 DTD만 정의할 수 있다. 이것은 기존의 XHTML 1.0 Strict DTD를 기본으로 한다.

cf. 버전별 선언

HTML 5

<!DOCTYPE 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">

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">
저작자표시 (새창열림)

'스마트팩토리 > HTML' 카테고리의 다른 글

meta Tag  (0) 2022.10.20
Interactive, User Interaction, Metadata  (0) 2020.09.01
Tables, 폼(양식, Forms) 구성 요소  (0) 2020.08.21
Sections 요소, Main, Text Level, Grouping etc...  (0) 2020.08.20
HTML Element  (0) 2020.08.19
COMMENT
 

티스토리툴바