More than 5 years have passed since last update.

pugで書いたhtml中の空要素が" />"で閉じられてしまっていた原因

Last updated at 2016-05-12Posted at 2016-05-11

doctype宣言の記述に誤りがあり、
空要素が**" />"**で閉じられて出力されていた。
html5だし、レギュレーション的にもこれだと困る。

html

<meta />
<img />

そもそも、古いリファレンスに倣っていたせいで、
警告：「unexpected text "!!!5"」と言われてしまい、

index.pug

!!!5
html(lang="ja")
head
  meta(charset="UTF-8")
  title Document
body

下記のようにdoctype宣言をして、
js-beautify整形後に無理やりgulp-replaceで書き換えていた。

index.pug

<!DOCTYPE html>
html(lang="ja")
head
  meta(charset="UTF-8")
  title Document
body

gulpfile.js

.pipe(replace(/ \/\>/g, '>'))

pug（最近のjade記法）では下記のように「doctype html」と記述するようだ。
これだと空要素に"/"が付かない。

index.pug

doctype html
html(lang="ja")
head
  meta(charset="UTF-8")
  title Document
body

逆にもしも、html5で空要素を" />"で出力させたい場合は
****と記述すればOKですね!!