왼쪽에 HTML을 붙여넣고 "변환"을 클릭하세요 — 정형식 XML로 바꿔드립니다HTML 붙여넣기

이 도구가 하는 일

복사-붙여넣기한 HTML 조각을 XSLT 파이프라인이나 엄격한 XML 파서에 집어넣어야 했던 적이 있다면 그 고통을 이미 아실 겁니다. 브라우저는 관대한 것으로 유명해서, WHATWG 사양의 HTML 파서<li> 태그를 조용히 닫아주고, 따옴표 없는 속성을 받아들이며, 빠진 </p>에 어깨를 으쓱할 뿐입니다. XML 파서는 그러지 않습니다. 같은 마크업을 넘기면 3행에서 파싱 오류가 납니다. 이 도구는 실제 세계의 HTML — CMS나 레거시 템플릿에서 실제로 붙여넣는 그런 것 — 을 받아 표준 준수 파서가 한 번에 받아들이는 XML로 바꿉니다.

단순히 태그를 닫는 것 이상입니다. 이 변환기는 HTML을 느슨하게 만들고 XML을 엄격하게 만드는 모든 것들을 처리합니다. <br>, <img>, <hr> 같은 빈 요소는 <br/>로 자기 닫힘 처리되고, checkeddisabled 같은 불리언 속성은 checked="checked"로 확장되고, 따옴표 없는 속성값은 큰따옴표로 감싸지고, 일관성을 위해 태그 이름은 소문자로 바뀌며, XML이 모르는 몇 안 되는 이름 있는 HTML 엔티티(&nbsp;, &mdash;, &pound;, &times; 등)는 모든 XML 파서가 이해하는 &#160; 같은 숫자 엔티티로 변환됩니다.

주석은 그대로 통과합니다. <script><style> 안의 CDATA 섹션도 보존됩니다. 출력은 실제로 읽을 수 있도록 정돈되어 나오며, XML 문서로서 W3C 검증을 통과하거나 XHTML 1.0 워크플로에 그대로 끼워 넣을 수 있습니다. 진짜 원하는 것이 XHTML Strict라면 이미 95%는 온 셈입니다 — 맨 위에 doctype과 네임스페이스만 직접 추가하면 됩니다.

사용 방법

세 단계입니다. 문단 하나를 붙여넣든 페이지 템플릿 전체를 붙여넣든 동일하게 동작합니다.

1

HTML 붙여넣기 (또는 샘플 사용)

왼쪽 에디터에 HTML을 있는 그대로 넣으세요. 닫히지 않은 태그, 맨몸의 불리언 속성, 따옴표 없는 값, 자기 닫힘 없는 빈 요소 — 모두 괜찮습니다. 실제처럼 엉망인 예를 먼저 보고 싶다면 샘플 불러오기를 클릭하세요.

수작업으로 고칠 필요 없습니다. 이 도구의 존재 이유가 바로 그 정리를 대신 해주는 것입니다. CMS, Word 문서, 레거시 템플릿에서 나온 그대로 붙여넣으세요.

2

변환 누르기

녹색 변환 버튼을 클릭하세요. 도구는 관대한 파서로 HTML을 파싱한 다음 XML 라이터를 통해 다시 직렬화합니다. 모든 태그가 닫히고, 모든 속성이 따옴표로 감싸지고, 모든 엔티티가 유효한 XML이 됩니다.

3

XML 복사

오른쪽 패널이 들여쓰기된 정형식 XML로 채워집니다. XSLT 입력, DOM 테스트 픽스처, EPUB 빌드, 또는 엄격한 파서가 막히지 않는 마크업이 필요한 어디든 복사하세요.

실제로 유용한 상황

HTML을 XSLT 또는 XML 파이프라인에 넣기

콘텐츠를 PDF, 피드, 기타 포맷으로 바꾸는 XSLT 스타일시트가 있는데 입력은 XML이 아니라 CMS의 HTML일 때 — 먼저 변환, 다음에 변형.

XHTML 엄격 검증

아직도 XHTML 1.0 Strict를 요구하는 레거시 인트라넷? 에디터가 뱉어낸 엉성한 HTML을 붙여넣고, XML을 복사하고, 위에 doctype을 얹으면 끝.

블로그 마크업을 EPUB / 전자책 리더용으로 변환

EPUB은 속이 XHTML이라 <code>&lt;/p&gt;</code>가 빠지면 바로 거부합니다. 패키징 전에 한 챕터 분량의 블로그 HTML을 한 번의 붙여넣기로 정리하세요.

아카이브 시스템용 정리

오래된 HTML을 XML 기반 아카이브(DSpace, Fedora Commons, JATS 계열 등)에 넣으시나요? 엄격한 스키마는 브라우저에서 잘 렌더링되는지 따위 상관하지 않습니다 — 먼저 변환하세요.

자주 묻는 질문

실제로 무엇이 HTML을 "느슨하게", XML을 "엄격하게" 만드나요?

큰 세 가지. 첫째, HTML에는 닫는 태그가 없어야 하는 빈 요소(<br>, <img>, <input>, <hr>, <meta>, <link>)가 있습니다 — XML은 <br></br> 또는 <br/>을 요구합니다. 둘째, HTML은 <li><p> 같은 요소의 닫는 태그를 완전히 생략할 수 있게 허용합니다. 파싱 알고리즘이 채워주기 때문입니다. 셋째, HTML은 따옴표 없는 속성(class=foo)과 값 없는 속성(disabled)을 허용합니다. XML은 이 셋 모두 거부합니다.

`checked`, `disabled` 같은 불리언 속성은 어떻게 되나요?

XHTML 형식으로 확장됩니다. <input type=checkbox checked disabled><input type="checkbox" checked="checked" disabled="disabled"/>가 됩니다. 모든 속성은 이름 AND 따옴표로 감싼 값을 갖게 되며, 이것이 바로 XML이 요구하는 것입니다 — XML에는 값 없는 속성이란 존재하지 않습니다.

`&nbsp;`, `&mdash;` 같은 HTML 엔티티는 어떻게 처리되나요?

XML이 기본적으로 아는 이름 있는 엔티티는 다섯 개뿐입니다 — &amp;, &lt;, &gt;, &quot;, &apos;. 나머지 — &nbsp;, &mdash;, &pound;, &copy; — 는 숫자 형식(&#160;, &#8212;, &#163;, &#169;)으로 변환되어 DTD 없이도 어떤 XML 파서든 받아들입니다.

주석은 왕복 후에도 살아남나요?

네. <!-- 검토 필요 -->를 넣으면 같은 것이 나옵니다. 주석은 HTML과 XML 모두에서 동일한 구문으로 유효하므로 손대지 않고 통과합니다 — 편집 메모나 빌드 시점 마커로 쓰신다면 편리합니다.

태그와 속성 이름을 소문자로 바꾸나요?

네, 기본적으로. <DIV Class="Foo"><div class="Foo">가 됩니다. 태그와 속성 이름은 XHTML 1.0 관례에 맞추기 위해 소문자로 바뀝니다. 속성 "값"은 그대로 둡니다 — 따옴표 안에 넣은 내용은 당신의 데이터이기 때문에 건드리지 않습니다.

이것으로 충분하지 않은 경우 — 이 도구가 처리하지 않는 케이스는?

임의의 <script> 내용은 텍스트로 보존되지만, JavaScript를 XML-안전하게 다시 쓰려고 시도하지는 않습니다. JS가 맨몸의 <& 문자를 사용한다면 직접 <![CDATA[...]]>로 감싸야 합니다(기존 CDATA는 보존합니다). 문서 조각은 괜찮습니다. <?xml ?> 선언이나 doctype을 합성하지 않습니다 — 하위 소비자가 원한다면 직접 추가하세요.

함께 쓸 만한 다른 도구

HTML to XML은 퍼즐의 한 조각입니다. 이 도구들과 잘 어울립니다: