프론트 엔드/HTML

[HTML] HTML - 21.HTML과 XHTML

Koras02 2023. 1. 26. 21:33

이번 시간에는 HTML과 거의 비슷한

XHTML에 대해 알아보도록 하겠습니다.

 

XHMTL(EXtensible HTML)

 

XHTML이라는 것은 EXtensible HTML의 

약자로 HTML과 거의 비슷하나

 

문법의 적용이 조금 더 엄격한 

특징을 가지고 있는 언어입니다.

 

좀 더 엄격한 XHTML을 사용하는 이유

 

오늘날 웹 콘텐츠는 기존의 PC 위주 

환경에서 벗어나 다양한 플랫폼이 더욱 

많이 이용되고 있습니다.

 

따라서 부정확한 HTML 문법을 

지원하는 데 필요한 자원이 부족한 환경이 

점차 생겨나기 마련이기에 

 

XHTML 문서는 하나의 XML 문서로 

문법적으로 정확하기 떄문에

 

표준 XML 라이브러리를 이용한 

자동화된 처리가 가능합니다.

 

XHML에 변경사항

 

문서의 구조적 측면

  • XHTML DOCTYPE을 반드시 명시
  • <html> 태그의 xmlns 속성을 반드시 명시
  • <html>, <head>, <title>, <body> 태그를 반드시 적용

문서의 요소적 측면

  • 모든 태그는 반드시 닫아야 함
  • 모든 태그는 순서대로 닫아아 한다.
  • 모든 요소는 반드시 소문자로만 이루어져야 함 
  • XHTML 문서는 반드시 하나의 root 요소를 포함해야 함 

문서의 속성적 측면 

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

HTML 과 XHTML의 차이점

다음 예제들은 HTML과 XHTML의 

차이점을 보여주고 있습니다.

 

  • 종료 태그가 없는 빈 태그(empty tag)는 반드시
    끝에 공백과 함께 슬래시(/) 포함
HTML  : <hr>
XHTML : <hr />
  • 비어있지 않은 요소는 반드시 종료 태그를 
    가져야 한다.
HTML : <p>첫 번째 문장</p><p>두 번쨰 문장 
XHTML : <p>첫 번째 문장</p><p>두 번째 문장</p>
  • 요소들은 반드시 열린 순서대로 
    닫혀야 한다.
HTML : <em><p>This is some Text</em></p>
XHTML : <em><p>This is some Text</p></em>
  • <img> 태그는 반드시 alt 속성이 기술되어야 함
HTML : <img src="../../examples/img_flag.png" />
XHTML : <img src="../../examples/img_flag.png" alt="flag" />
  • 모든 텍스트(text)는 반드시 태그로 감싸야 함
HTML: <body> 본문에 사용되는 텍스트 단락 </body>
XHTML: <body><p>본문에 사용되는 텍스트 단락</p></div>
  • 속석 값은 반드시 땀옴표로 감싸야 함 
HTML : <td rowspan=3>
XHTML :  <td rowspan="3">
  • 태그 이름이나 속성 이름에는 반드시 소문자를 사용해야 함 
HTML : <BODY><P>태그 이름과 속성</P></BODY>
XHTML : <body><p>반드시 소문자 사용</p></body>
  • 속성값 생략이 없으므로, 반드시 속성 값 명시

참고자료 

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

GitHub - HTML5-STR/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to HTML5-STR/html-study development by creating an account on GitHub.

github.com