HTML5 02-1 HTML5 기초 HTML, XHTML
HTML과 XHTML
1. HTML의 정의와 특징
HTML과 XHTML
HTML이란 Hyper Text Markup Language의 약어로 Hyper Text 기능을 가진 문서를 만드는 언어를 말합니다. 여기서 말하는 Hyper Text란 웹 페이지에서 다른 페이지로 이동할 수 있는 것을 말하는데요
이처럼 HTML은 Hyper Text기능을 포함한 텍스트와 이미지 등을 웹 브라우저에 표시할 수 있도록 도와주는 역할을 합니다.
이러한 HTML은 다음과 같은 특징을 갖습니다.
첫째, HTML은 웹 문서의 표준 포맷입니다.
둘째, HTML문서는 Markup 언어입니다. Markup이란 문서에 포함된 문장, 표 소리 등과 같은 문서의 내용에 대한 정보가 아닌, 문장과 그림, 표가 어떻게 배치되고, 글자는 어떤 모양과 크기를 가지고 있으며, 들여쓰기, 줄 간격, 여백 등은 어느 정도인지에 대한 정보를 의미합니다.
셋째, HTML은 ASCII코드로 구성된 일반적인 텍스트파일입니다. 아스키 코드란 정보교환용 미국 표준 부호로 컴퓨터는 숫자밖에 기억하지 못하기 때문에 문자, 숫자, 구두점, 기타 특수문자에 수치를 부여하여 만든 부호체계를 말합니다. 표준 아스키 부호 집합에서는 0~127까지 128개의 문자부호를 제공합니다.
넷째, 컴퓨터 시스템이나 운영체제에 독립적입니다.
2. HTML의 구성 요소
HTML문서의 구성요소에 대해 살펴보겠습니다. HTML문서는 요소, 태그, 속성, 변수로 구성되어 있는데, 이들에 대해 하나씩 살펴보겠습니다.
먼저 요소란 HTML에서 시작태그와 종료태그로 이루어진 모든 명령어들을 의미합니다.
다음으로 태그에 대해 살펴보겠습니다. 태그란 요소의 하나로서 시작태그와 종료태그의 두 종류로 나뉘어집니다.
다음의 예문을 보며 살펴볼까요? 대한민국 파이팅이라는 문장의 앞과 뒤에는 각각 양쪽 꺾쇠 안에 p와 /p가 있습니다. 이처럼 문장 앞에 위치하여 양쪽 꺾쇠 안에 있는 문자 P를 시작태그라고 하며, 문장의 뒤쪽에 위치하여 양쪽 꺾쇠 안에 있는 문자 /p를 종료태그라고 합니다.
속성은 조금 더 구체화된 명령어로서 요소의 시작태그 안에서 사용합니다.
예를 들어 예문의 시작태그 부분에 align=“center”를 입력하면, 시작태그 안에 중앙정렬이라는 속성을 사용하게 되어 “대한민국 파이팅＂이라는
문장은 가운데로 정렬됩니다.
변수는 속성과 관련된 값을 의미합니다.
다음과 같은 예문에서 align=“center”는 align이라는 속성을 정의하고, 이 속성에 대한 변수로 center라는 변수를 사용한다고 할 수 있습니다.
3. XHTML 이란?
XHTML은 eXtendible HyperText Markup Language의 약어로, HTML을 대체하기 위한 목적으로 만들어진 언어입니다.
XHTML은 HTML의 문법에 따르지만, 좀 더 명확하고 구조적인 특징과 함께 다음과 같은 주요 특징을 갖습니다.
첫째, 종료태그가 없는 빈 태그는 스스로 종료를 합니다.
둘째, 빈 태그를 제외한 모든 태그는 반드시 종료태그를 써야 합니다.
셋째, 코드를 작성할 때는 소문자로 입력하고, 속성태그를 사용했다면 반드시 값을 입력해야 하며, 속성값은 반드시 “ ”안에 작성해야 합니다.
XHTML을 사용해야 하는 이유는 무엇일까요? 여러가지 이유가 있겠지만, 주된 이유 3가지에 대해 살펴보겠습니다.
먼저 호환성 및 확장 가능성이 우수합니다. XHTML은 HTML과 XML을 결합한 구조적인 HTML이기 때문에 기계가 쉽게 이해할 수 있습니다.
여기서 말하는 기계가 쉽게 이해한다는 것은 색상, 글꼴 형식, 레이아웃 등 사람의 눈으로 보는 표현적인 요소가 완전히 배제되어 있다는 뜻으로, 이러한 구조는 높은 확정성을 갖게 된다는 장점이 있습니다.
두 번째는 유지 비용의 감소와 재생산성이 확대된다는 것입니다. 기존의 HTML로 웹 페이지를 구성할 경우 디자인을 바꾸기 위해서는 모든 HTML 문서를 수정해야 했습니다. 하지만 XHTML은 구조와 표현이 분리되어 있기 때문에 CSS파일만 수정하면 전체적인 디자인 변경이 가능하죠.
마지막으로 세 번째는 XHTML은 경량화를 통해 로딩 속도를 향상 시킬 수 있다는 점입니다. XHTML은 구조화된 문서이기 때문에 가독성이 높을 수 있으며, 표현 요소를 분리할 경우 웹 페이지의 로딩 속도를 향상 시킬 수 있습니다. 실제로 Yahoo의 경우 기존의 웹 페이지를 XHTML로 전환함으로써 전체 파일의 크기를 1/3 가량 줄일 수 있었습니다.
4. HTML/XHTML 기본 구조
HTML과 XHTML의 기본구조에 대해 설명 드리겠습니다.
HTML과 XHTML의 구조는 기본적으로 동일합니다. 그림에서 보여지는 바와 같이 문서 구조나 소스 구조가 동일하다는 것을 알 수 있을 것입니다.
하지만, 문법에서 약간 차이는 있습니다.
HTML과 XHTML은 여러 가지 태그로 모든 내용을 표현합니다.
<html>를 사용하여 문서의 시작을 정의하고, </html>를 사용하여 문서의 끝을 나타내며, 그 안에는 <head>및, </head> 부분과 <body> 및</body> 부분으로 나뉘어 있는데, <head> 부분에는 문서의 제목을 넣고, <body> 부분에는 문서의 실제 내용을 넣습니다.
이렇게 코딩을 하게 되면 다음과 같은 화면을 확인할 수 있습니다.
5. HTML과 XHTML의 차이점
HTML과 XHTML은 기본적인 구조는 동일하나 문법에서 약간의 차이가 있습니다. 그럼 어떤 차이들인지 하나씩 살펴보겠습니다.
먼저 종료태그입니다. HTML은 종료태그가 없는 것을 허용하지만, XHTML은 종료태그를 허용하지 않기 때문에 반드시 종료태그를 사용해야 합니다.
두 번째로 잘못된 중첩입니다. HTML은 잘못된 중첩이 되어도 이상이 없지만, XHTML은 이 부분이 직접적인 영향을 미치기 때문에 반드시 중첩되지 않도록 해야 합니다.
세 번째는 소문자 표기의 허용으로서, HTML은 대소문자를 구분하지 않지만, XHTML에서는 대소문자를 구분하기 때문에 이 부분을 확인을 해야 합니다. 네 번째는 속성값의 따옴표입니다. HTML에서는 속성값에 따옴표를 사용하지 않아도 됩니다. 그러나 XHTML에서는 속성값에 반드시 따옴표를 사용해야 합니다.
다섯 번째는 속성과 값의 단축 표기로서 HTML에서는 속성과 값의 단축표기가 가능하나, XHTML에서는 이 부분을 허용하지 않습니다.
6. XHTML 일반 문법 준수
XHTML 문서 작성을 할 경우에는 다음과 같이 8가지의 문법을 준수해야 합니다.
첫 번째는 정확한 문서 구조의 준수로, 문서의 루트 요소는 HTML이 되어야 하며, 이 HTML요소는 XHTML의 네임 스페이스를 지정해야 합니다.
여기서 네임 스페이스란 작성된 페이지가 XHTML로 작성되었음을 알려주는 것으로 HTML문서는 <html>로 시작하지만 XHTML문서는 <html xmlns = “http://www.w3.org/1999/xhtml”>로 문서를 시작하는데, XHTML 네임 스페이스를 지정하게 되면 확장성 있는 XML 형식의 문서를 지원할 수 있습니다. 또한 표준문서에는 head, title, body의 구조 요소가 포함되어야 합니다.
두 번째로 모든 요소는 완벽하게 중첩되어야 합니다. XHTML에서는 모든 요소들이 완벽하게 내포 되어야 하는 것이 필수적이나, 중첩이 부적합하더라도, 기존 웹 브라우저들에게 널리 관대하게 사용된 케이스도 있는데, 다음 예문은 바로 그것입니다.
이 예문은 중첩이 부적합함에도 불구하고 기존 웹 브라우저에서 문제없이 구동됩니다.
세 번째 준수사항으로는 모든 속성 값은 인용 부호인 “ ”로 묶여야 합니다. 즉, 코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 큰 따옴표로 묶어서 사용합니다.
네 번째는 모든 요소와 속성의 구성은 소문자만 사용해야 합니다. XHTML 코드를 생성하거나 정리 할 때에는 태그 및 속성 등의 환경 설정과 상관없이 HTML요소 및 속성의 이름을 소문자로 강제 설정해야 합니다. 이는 XML이 대수문자를 구분하기 때문입니다.
다섯 번째로 모든 요소는 닫아야 합니다. 이는 모든 요소에는 종료 태그가 포함되어야 한다는 뜻으로 코드를 생성하거나, XHTML을 정리할 때에는
닫기 태그를 코드에 삽입해야 하는 것을 의미합니다. 하지만 빈 요소의 경우에는 종료태그가 포함되거나, 시작태그가 />로 끝나야 하며,
XML을 사용할 수 없는 이전 브라우저의 호환성을 위해서는 아래 예시와 같이 /> 앞에 공백이 있어야 합니다.
여섯 번째 준수사항으로는 모든 속성값은 속성이 함께 선언되어야 한다는 것입니다. 다시 말해 모든 속성은 최소화되어 표기되어서는 안된다는 뜻으로, XML은 속성의 최소화를 지원하지 않기 때문에 속성값의 짝들은 모두 작성되어야 한다는 것입니다.
일곱 번째는 모든 script 및 style 요소에는 type 속성이 포함되어야 합니다. HTML4 이후로는 script 요소의 type 속성을 반드시 지정해야 합니다.
그렇기 때문에 코드 생성 및 XHTML 정리 시에는 script 요소에서 type 및 language 속성을 설정하고 style 요소에서 type을 다음 예시와 같이 설정해야 합니다.
마지막 여덟 번째 준수사항은 모든 img 및 area 요소에는 alt 속성이 포함되어야 합니다. 따라서 코드를 생성하거나 XHTML을 정리할 때에는 이들 속성을 설정해야만 하죠.
'Web프로그래밍' 카테고리의 다른 글
| HTML5 - 03 HTML5와 HTML4.01의 차이 (0) | 2016.04.20 |
|---|---|
| HTML5 02-2 HTML5 기초 - HTML5 표준문서 (0) | 2016.04.19 |
| HTML5 01-2 HTML5 개요 웹 개발 방법론의 이해 (0) | 2016.04.19 |
| HTML5 01-1 HTML5 개요 웹 표준의 기본 지식 (0) | 2016.04.19 |
| PHP 배열, 문자열 (0) | 2016.02.15 |
