HTML to Markdown 변환이란?

HTML은 <h1>, <strong>, <a href>처럼 태그로 문서 구조를 표현하는 언어입니다. 반면 마크다운(Markdown)은 #, **, [텍스트](주소)처럼 짧은 기호로 같은 구조를 나타내는 훨씬 간결한 표기법입니다. 이 도구는 태그로 빼곡한 HTML 코드를 읽어, 사람이 보고 쓰기 편한 마크다운 문법으로 바꿔 줍니다.

웹페이지에서 복사한 본문, 워드프레스나 티스토리에서 내보낸 글, 이메일 서식 코드처럼 HTML로 된 글을 깃허브 리드미(README)나 노션, 블로그 마크다운 편집기로 옮길 때 특히 유용합니다. 태그를 하나하나 지우고 다시 쓰는 수작업 없이, 붙여넣고 버튼 한 번이면 마크다운 초안이 만들어집니다.

사용 방법

1. 위쪽 편집기에 변환할 HTML 코드를 붙여넣습니다. 웹페이지 소스나 서식이 담긴 코드 조각을 그대로 넣으면 됩니다.
2. 아래의 변환 버튼을 누르면 잠시 후 마크다운 결과가 나타납니다.
3. 결과 편집기 오른쪽 위의 복사 버튼으로 마크다운을 클립보드에 담아 원하는 곳에 붙여넣습니다.

결과 편집기는 읽기 전용이라 실수로 지워질 걱정이 없습니다. 원본 HTML을 조금 고쳐서 다시 변환하고 싶다면 위쪽 편집기 내용만 수정한 뒤 변환 버튼을 다시 누르면 됩니다. 입력한 HTML은 접속한 분의 브라우저 안에서만 처리되고 서버로 전송되지 않으니, 외부에 공개하기 곤란한 코드도 안심하고 넣을 수 있습니다.

어떤 태그가 어떤 기호로 바뀌나요?

주요 HTML 태그가 마크다운으로 어떻게 대응되는지 정리하면 다음과 같습니다.

표 태그(<table>)와 취소선, 할 일 목록(체크박스) 같은 확장 문법도 함께 변환되도록 설정되어 있어, 단순한 문단뿐 아니라 표가 들어간 문서도 마크다운 표 문법으로 바꿔 줍니다.

자주 묻는 질문

반대로 마크다운을 HTML로 바꿀 수도 있나요?

네, 방향만 반대인 마크다운 → HTML 변환 도구를 따로 준비해 두었습니다. 마크다운으로 쓴 글을 웹페이지에 넣을 HTML로 바꾸고 싶을 때 그 도구를 사용하시면 됩니다.

변환 결과가 원본과 조금 다를 수 있나요?

마크다운은 HTML보다 표현 범위가 좁기 때문에, 복잡한 표나 특수한 서식은 완벽히 옮겨지지 않을 수 있습니다. 변환 후에는 제목 단계, 링크 주소, 목록 들여쓰기 정도를 눈으로 한 번 확인하고 필요한 부분만 손보는 것을 권합니다.

스타일(색상·글꼴)이나 <div> 같은 태그는 어떻게 되나요?

마크다운에는 글자 색이나 글꼴 같은 시각적 서식을 담는 문법이 없습니다. 그래서 style 속성이나 의미 없는 <div>·<span>은 대체로 사라지고, 제목·강조·링크·목록처럼 구조를 나타내는 부분만 마크다운으로 남습니다. 이것이 마크다운의 장점이자 한계입니다.

표·코드·하위 목록·체크박스는 어떻게 옮겨지나요?

<table>은 첫 줄을 머리글로 삼아 마크다운 표(| A | B |)로 바뀝니다. <thead> 없이 <tr>만 쓴 표도 첫 줄이 머리글이 되며, 칸 안의 줄바꿈은 공백 하나로 합쳐집니다. <pre> 코드는 ```로 감싼 코드 블록으로, <code> 안의 <·>는 글자 그대로 남습니다. 목록 안의 목록은 4칸 들여쓰기로, 체크박스는 [ ]·[x]로 바뀝니다. 화면에 보이지 않는 <script>·<style>·<meta> 같은 태그는 결과에 넣지 않습니다.

변환한 마크다운을 다시 웹에 쓰려면 어떻게 하나요?

마크다운을 깃허브·노션처럼 마크다운을 지원하는 곳에 넣으면 그곳이 알아서 화면에 표시해 줍니다. 직접 HTML이 필요하다면 위에서 안내한 마크다운 → HTML 도구로 다시 변환하면 됩니다.

근거: showdown 변환 규칙과 마크다운 표준 문법(CommonMark 계열). 대응 표기는 html-to-markdown 뷰 실측. 마지막 검토: 2026년 7월 11일.