Hello I am new to Emacs and I am currently using it for web development projects. I am currently using Laravel and VueJS on my development. I search online what is the best major mode for this web development tools. I found out that web-mode is good for this.

But as I code I found out that it didn't detect.That I have a missing > on my html tags. enter image description here

As you can see above I have a missing > on my div. But the syntax highlighting below it is still the same.

I was using Sublime text 3 before and it has the functionality.

enter image description here

I wan't something like Sublime text 3. that can detect missing > and it will display different syntax highlighting below it.

I really want this functionality because I am coding html most of my works.

What is the tool that is good for this on Emacs?

EDIT: This file is a .vue file. Which is a component file for VueJS.

  • Have you tried C-c C-d d? It should be able to find malformed HTML.
    – user12563
    Mar 6, 2018 at 7:25
  • I just tried it and it says 0 errors detected Mar 6, 2018 at 9:10
  • BTW. I am on a .vue file. Which is a component file for VueJS. Mar 6, 2018 at 9:12
  • You can try html-check-frag.el available via melpa.
    – Tobias
    Mar 6, 2018 at 23:28
  • flycheck also uses Tidy HTML5.
    – Tobias
    Mar 6, 2018 at 23:34

2 Answers 2


Use builit flymake plus old cli tidy. tidy is available on Mac/Linux/Windows, tested on Emacs 24.4 and Emacs 25.3:

(defun flymake-html-init ()
       (let* ((temp-file (flymake-init-create-temp-buffer-copy
              (local-file (file-relative-name
                           (file-name-directory buffer-file-name))))
         (list "tidy" (list local-file))))

(defun flymake-html-load ()
  (when (and (not (null buffer-file-name)) (file-writable-p buffer-file-name))
    (set (make-local-variable 'flymake-allowed-file-name-masks)
         '(("\\.html\\|\\.ctp\\|\\.ftl\\|\\.jsp\\|\\.php\\|\\.erb\\|\\.rhtml\\|\\.vue" flymake-html-init))
    (set (make-local-variable 'flymake-err-line-patterns)
         ;; only validate missing html tags
         '(("line \\([0-9]+\\) column \\([0-9]+\\) - \\(Warning\\|Error\\): \\(missing <\/[a-z0-9A-Z]+>.*\\|discarding unexpected.*\\)" nil 1 2 4))
    (flymake-mode t)))

(add-hook 'web-mode-hook 'flymake-html-load)
(add-hook 'html-mode-hook 'flymake-html-load)
(add-hook 'nxml-mode-hook 'flymake-html-load)
(add-hook 'php-mode-hook 'flymake-html-load)

The trick is tidy will output some extra errors/warnings on modern HTML5 files. We use Elisp to ignore them.

I know there is tidy-html5 but I'm too lazy to compile and install it.


enter image description here

UPDATE: I tested https://github.com/TobiasZawada/html-check-frag which also works fine. There is only one difference. When you insert an open html tag without ending tag, my solution will highlight the open tag on the spot. For some reason, html-check-frag will highlight the last ending tag in the whole file. Maybe this is a bug of html-check-frag?

flymake: enter image description here

html-check-frag: enter image description here

  • Awesome! Thanks for all your effort answering my question. This is the answer I am looking for. Mar 7, 2018 at 12:35
  • Maybe both tags should be highlighted, the div-tag and the closing body-tag. The div-tag is the non-closed tag and the body-tag is the closing tag which does not match the div-tag. Thanks for checking out html-check-frag by the way.
    – Tobias
    Nov 5, 2020 at 19:25

web-mode maintainer here. I've pushed a fix to use web-mode-html-tag-unclosed-face instead of web-mode-html-tag-face as long as the tag remains unclosed. This face can be customised (e.g. adding a red background to it)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.