HTML? XHTML?

김하영·2021년 8월 17일

HTML

목록 보기

1/1

HTML이란?

HTML : Hyper Text Markup Language

HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.

웹 페이지란?

웹 페이지(web page)는 월드 와이드 웹 상에 있는 개개의 문서를 가리킵니다.
.gif, .jpg, .Ai, .pdf, .doc, .hwp 이와 같은 확장자 포맷이 있듯이 HTML은 .htm, .html 확장자 포맷을 가지고 있습니다.
이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링해주게 되고 사용자는 view라고 하는 스크린을 통해 접하게 되는 것입니다.

HTML 문서인 웹 페이지는 head 영역과 body 영역으로 구성됩니다.
문서의 타이틀(title)은 웹 페이지의 제목으로 브라우저 탭에 표시됩니다.

HTML 용어

Element : 요소 (콘텐츠(요소포함)를 감싸는 태그(tag))
attribute : 속성
value : 값

DOCTYPE?

DOCTYPE이란?
결론부터 말하자면 HTML이 어떤 버전으로 작성되었는지 미리 선언하여, 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이 독타입(DOCTYPE)입니다.

HTML을 작성하려면 문서타입이란 것이 반드시 필요합니다.
문서 타입을 DTD라고 하며, DTD(DOCTYPE or DOCUMENT type Definition)는 DTD는 HTML 문서의 반드시 최상 위에 위치해야 합니다.
그리고 DOCTYPE 태그가 아니라 선언문으로서의 역할이기 때문에 HTML문서 최상위에 위치하는 것입니다.

문서형(DTD) 정의를 생략하는 경우 웹 브라우저가 표준모드가 아니라 비표준모드로 렌더링이 되어 크로스 브라우징에 어려움을 겪을 수 있습니다.
크로스 브라우징(cross browsing)?
웹 페이지 제작시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말합니다.
크로스 브라우징 작업이 필요한 원인은?

브라우저마다 렌더링 엔진이 다르기 때문.
=> 가장 점유율이 높은 브라우저에 초점을 맞추는 것이 좋음.
(1위 - 크롬, 2위 - 사파리, 3위 - 파이어폭스)

HTML 태그 안에는 크게 head와 body로 나누어져 있습니다.
태그는 일반적으로 시작태그와 종료(끝)태그로 이루어져 있으며 예외적인 태그들도 있습니다.
head 안에는 콘텐츠를 표현하는 내용은 없지만 콘텐츠를 표현하기 위한 내용들을 포함하게 됩니다.
meta(메타 태그)는 문서의 정보를 브라우저와 검색엔진에게 이 문서가 어떤 정보를 가지고 있는지 알려주는 것을 명시합니다. 위 코드의 메타 정보는 실제 문서가 다루고 있는 언어들의 문자셋을 정의하고 있습니다.
title은 문서의 정보를 브라우저에 표시하는 역할을 합니다.
link는 외부자원(external file)들을 연결하는 역할을 합니다.
마지막으로 문서의 본문영역 즉, 콘텐츠 영역을 의미하는 body태그에 웹 페이지에 표현되는 콘텐츠를 작성하게 됩니다.

HTML5 문서는

<!doctype html>

을 문서 최상단에 쓰면서 HTML5임을 정의합니다.

XHTML 문서는

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

와 같은 DOCTYPE을 사용합니다.

XHTML?

XHTML : EXtensible HTML

XHTML은 EXtensible HTML을 의미합니다.
HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있습니다.

XHTML을 사용하는 이유?

오늘날에는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 많이 이용되고 있기 때문에 기존의 부정확한 HTML의 문법들을 보완하고자 나온 것이 XHTML입니다.

문서의 구조적 측면

XHTML DOCTYPE을 반드시 명시해야합니다.
태그의 xmlns 속성을 반드시 명시해야 합니다.
, , , <body> 태그를 반드시 사용해야 합니다.

문서의 속성적 측면

속성 이름은 반드시 소문자로 사용되어야 합니다.
속성값은 반드시 따옴표로 감싸야 합니다.
속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 합니다.

HTML과 XHTML의 차이점

종료 태그가 없는 빈 태그는 반드시 끝에 공백과 함께 슬래시(/)를 붙여야 합니다.
```
HTML : <input type='text'>
XHTML : <input type='text' />
```

  
  2. 비어있지 않은 요소는 반드시 종료 태그를 가져야 합니다.

HTML :

안녕?

HELLO?
XHTML :

안녕?

HELLO?


  3. <img> 태그에는 반드시 alt 속성이 기술되어야 합니다.

HTML :
XHTML : 고양이