1. HTML과 XHTML 이란?
HTML(HyperText Markup Language)과 XHTML(eXtensible HyperText Markup Langauge)는 웹 페이지를 구성하기 위한 마크업 언어로 서로 다른 차이점을 가지고 있습니다.
- 문법 규칙
- HTML: 유연한 문법을 가지고 있어 태그를 닫지 않거나 대소문자를 구분하지 않아도 됨
- 예: <br> 태그 또는 <BR>, <li> 태그는 닫지 않아도 됨
- XHTML: XML 기반언어로, 더욱 엄격한 문법을 요구함, 모든 태그를 반드시 닫아야 하고, 대소문자를 구분함
- 예: <br />, <li><li/> 반드시 태그르 썻다면 닫아야함
- HTML: 유연한 문법을 가지고 있어 태그를 닫지 않거나 대소문자를 구분하지 않아도 됨
- DOCTYPE 선언
- HTML: 다양한 DOCTYPE을 사용할 수 있으며, HTML5에서는 <!DOCTYPE html>을 사용
- XHTML: 반드시 XHTML 1.0 또는 XHTML 1.1의 DOCTYPE을 사용해야함
- 속성 값:
- HTML: 속성 값은 큰 따옴표나 작은따옴표 없이 사용 가능
- XHTML: 반드시 큰따옴표 또는 작은따옴표로 감싸야함
- 에러 처리:
- HTML: 브라우저는 오류가 발생해도 페이지 렌더링에 지장이 없다.
- XTML: 오류가 발생하면 페이지가 제대로 렌더링되지 않을 수 있음
2. HTML 사용 예제
HTML5의 기본 구조를 가진 예제입니다. 평소 사용하는 HTML5로 익숙한 코드 구성이 되어있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 예제</title>
</head>
<body>
<header>
<h1>Hello</h1>
</header>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
<main>
<article>
<h2>첫번째</h2>
<p>HTML5로 작성된 예시</p>
</article>
</main>
<footer>
<p>@ 2025-02-16</p>
</footer>
</body>
</html>3.XHTML 사용 예제
XHML에서 모든 태그를 닫지 않는 다면 어떤 문제가 발생할까요?
<!-- eslint-disable-next-line -->
<!-- prettier-ignore -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content='width=device-width, initial-scale=1.0' />
<title>XHTML</title>
</head>
<body>
<div id="header">
<h1>hello</h1>
</div>
<div id="nav">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
<div id="main">
<article>
<h2>first</h2>
<p>XHTML use Example</p>
<img src='../html.png' alt="" >
</article>
</div>
</body>
</html>
기본적인 XML의 코드방식입니다. 이렇게 작성하면 이상없이 작동됩니다. 근데 여기서 닫혀있던 </p> 태그를 지워보겠습니다.
- p태그 지우기전
- 닫힌 </p> 태그를 지운다면
XML은 이렇게 닫히지 않은 p태그로 인해 오류를 발생시키도 페이지 p태그가 닫히지 않아 img 태그까지 끌어들여오는 현상을 볼 수 있습니다.
요약
- XHMTL에서는 모든 태그를 반드시 닫아야함, self-closing 태그는 슬래시(</>)로 마무리, HTML에서는 닫지 않아도 됨
- XHTML에서는 태그와 속성이 반드시 소문자로 작성되어야함, 반드시 규칙을 준수하는 것이 좋음
- 대부분 HTML5를 사용하는 것이 적합할 수 있음, HTML5가 더 많은 기능을 제공하고 개발에 용이함
- XHTML은 특정 요구 사항이나 환경에서 유용할 수 있음
LIST
'Front-End > HTML' 카테고리의 다른 글
| [HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법 (0) | 2025.02.26 |
|---|---|
| [HTML] Canvas와 SVG의 차이점 (0) | 2025.02.16 |
| [HTML] 6.HTML nav, ol, option, span, strong (0) | 2025.02.01 |
| [HTML] 5.HTML label 요소, legend, 리스트, 링크 스타일,메뉴 (1) | 2025.02.01 |
| [HTML] 4.HTML form 요소 , dl, 텍스트 강세, 제목, 헤더, footer (1) | 2025.01.29 |