웹 서비스의 HTML 문법 체커는 업무에서 이용할 수 있는가?
웹 서비스의 HTML 문법 체커는 업무에서 이용할 수 있는가?
조금 큰 HTML이되면 태그를 닫는 것을 잊어 버리는 등을 감지하는 것이 어렵습니다. 작은 태그의 실수라면 Chrome이나 Firefox에서 아무 일도 없이 동작해 줍니다만, IE에서는 움직이지 않는 일이 있습니다.
이런 버그는 육안 확인으로 수정하는 것은 힘들기 때문에, 업무 용도에서도 문제 없을 것 같은 HTML 문법 체커가 없는지, Web 서비스＋α를 조사해 보았습니다. (라이센스적인 것은 조사하고 있지 않습니다)
HTML 문법 체커의 종류
HTML 체커에는 여러 가지 유형이 있습니다.
카테고리
대표적인 것
웹 서비스
W3C Markup Validation Service, Another HTML Lint – Gateway, DirtyMarkup
브라우저
HTML 오류 검사기 (Chrome 확장)
신청
HTML Tidy
웹 서비스는 확인할 URL을 지정하거나 HTML 파일을 업로드하는 유형이 있지만 개발중인 비밀 정보가 유출될 수 있으므로 사용할 수 없습니다. 텍스트를 붙여 넣는 타입은 그 구현 나름입니다.
또, 브라우저의 확장 기능, 어플리케이션도 그러한 구현에 달려 있습니다. 이러한 구현에 대해 간단히 조사했습니다.
검증에 이용한 html(body 태그의 닫는 타입 미스)<html>
<head>
<title>Hello world !</title>
</head>
<body>
Hello world !
</body1>
</html>
W3C Markup Validation Service
[Validatie by URI] 탭, [Validate by File Upload] 탭의 기능은 서버측에서의 처리가 명백하고 정보 유출의 우려가 있으므로 이용할 수 없습니다.
브라우저의 개발자 도구로 확인하면 알 수 있지만 [Validate by Direct Input]에서 텍스트를 직접 붙여 넣은 경우도 마찬가지로 웹 서비스에 대해 POST 메소드로 전체 텍스트가 전송되고 있으며 업무 이용에는 적합 아니.
Markup Validation Service
Another HTML Lint – Gateway
Another HTML Lint도 W3C Markup Validation Service와 마찬가지로 URL 탭, FILE 탭의 기능이 있지만, 이들은 당연히 정보 유출의 위험이 있습니다.
[DATA] 탭에서 체크 버튼을 누르면 웹 서비스에 대해 POST 메서드가 호출되므로 "W3C Markup Validation Service"처럼 업무 사용에는 적합하지 않습니다.
Another HTML Lint – Gateway
DirtyMarkup
텍스트를 붙여 넣는 것과 동시에 문법을 체크해 에러 개소를 가시화해 줍니다.
이 시점에서는 서버와 통신은 행해지고 있지 않고, JavaScript에 의해 클라이언트측에서 체크하고 있습니다.
단, [Clean] 버튼으로 성형할 때는 서버와의 통신이 들어가므로 이 기능의 이용은 피하는 편이 좋다고 생각됩니다. 간단한 태그 보정 기능도 갖추고 있기 때문에 아쉬운 곳입니다.
DirtyMarkup
HTML 오류 검사기
Chrome 브라우저 확장 프로그램입니다. 소프트의 사양에 「JS로 소스를 확인하기 때문에, 외부 송신은 실시하고 있지 않습니다」라고 있습니다. 또 개발자 툴로 검증해도 특별한 통신은 없고, 업무 이용은 문제 없을 것 같습니다.
그러나 편집 중인 소스도 웹 서버를 통해 로드해야 합니다. (JavaScript의 제약으로 로컬 파일을 마음대로 처리할 수 없으니까?)
HTML 오류 검사기
HTML Tidy
Windows 바이너리가 없기 때문에 Linux에서 검증했지만, 앱 단독으로 체크하고 있습니다. 심플하지만 웹 앱 가게에게는 사용하기 어려운 느낌입니다.
root@ubuntu-vm:/tmp# tidy hello.html
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 7 column 1 - Warning: discarding unexpected </body1>
Info: Document content looks like HTML5
Tidy found 2 warnings and 0 errors!
HTML Tidy
요약
이번 검증 범위에서는 외형도 깨끗하고 사용하기 쉬운 DirtyMarkup 또는 Chrome 확장 HTML 오류 검사기의 2가지가 되었습니다.
특히 Chrome에서 HTML 오류 검사기를 지속적으로 사용하고 평소에 사용하는 경우 세상의 사이트는 오류가 많다는 것을 알 수 있습니다.
Reference
이 문제에 관하여(웹 서비스의 HTML 문법 체커는 업무에서 이용할 수 있는가?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nekobake/items/f654c054b1759c658985
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<title>Hello world !</title>
</head>
<body>
Hello world !
</body1>
</html>
root@ubuntu-vm:/tmp# tidy hello.html
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 7 column 1 - Warning: discarding unexpected </body1>
Info: Document content looks like HTML5
Tidy found 2 warnings and 0 errors!
Reference
이 문제에 관하여(웹 서비스의 HTML 문법 체커는 업무에서 이용할 수 있는가?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nekobake/items/f654c054b1759c658985텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
