불필요한 HTML 소스, 태그나 속성 정리해주는 사이트

Api를 지원해주는 블로그에서 아래한글이나 워드로 작성한 후 업로드 할 수가 있는데, 아래한글이나 워드로 작성한 문서를 티스토리 블로그로 올린 후, HTML보기로 자세히 살펴보면 불필요한 태그가 많이 생성됩니다.

이런 불필요한 태그들을 정리해주는 사이트가 있는데, 바로 wordoff와 국내 사이트의 html.segio.com이 있습니다.

✓ wordoff

♦ wordoff : http://wordoff.org/

wordoff에선 화면의 입력란에 HTML을 복사해서 붙여넣어 준 후, 버튼을 클릭하면 자동으로 태그들을 정리해줍니다. 테스트 삼아 티스토리 블로그에 올린 글 중 하나를 정리해줬습니다. 실행해 주니 이것 저것 많이 정리해서 깔끔하게 정리된 HTML이 나옵니다.

이 정리된 HTML을 다시 티스토리 블로그로 옮겨 어떤 식으로 나오는지 살펴봤습니다.

원본

wordoff 실행 후 옮긴 글

글자색이나, 글자크기 및 이미지 정렬에 들어간 태그가 모두 삭제된 것 같습니다. 대충 아래와 같은 사항이 변경된다고 합니다.

• 불필요한 여백이나 연속으로 줄바꿈 같은 경우 삭제

• <span>이나 <div> 태그 삭제

✓ html.segio.com

wordoff와 비슷하게 태그를 정리해주는 국내 사이트로 html.segio.com가 있습니다.

이 사이트에서는 미리보기 기능 및 속성별, 태그별로 특정 태그 및 속성을 삭제해주고, 삭제할 태그를 입력해줄 수 도 있습니다. 여러모로 이곳이 더 편리할 것 같습니다.

♦ HTML 태그 및 속정 정리 : http://html.segio.com/

미리보기 기능으로 실시간으로 변경내용을 확인할 수 있다

wordoff 같은 경우는 태그가 자동으로 삭제돼서 문서편집을 해도 디자인이 모두 변경되고 어떤 부분이 변경되는지 미리보기가 없어 불편하고, 제대로 활용하기가 쉽지 않더군요. 반면 html.segio.com 사이트의 경우는 원하는 태그와 속성만 삭제가능하고 어떤 부분이 변경되었는지 아래 미리보기 창으로 확인이 가능해서 쓸만하다는 생각이 듭니다.

외부 에디터로 블로그에 글을 올리는 분들은 특히나 어떤 태그가 불필요한지 위의 두 사이트를 통해서 한번 쯤은 확인해 보는게 좋을 것 같습니다. 쓸데없이 지저분한 태그를 줄이게 되면 그만큼 로딩도 빨라지고, 검색엔진에 최적화 되는 효과를 얻을 수 있습니다.