Doctype in Pug View Engine
Last Updated :
08 Mar, 2024
In web development, the term “doctype” stands for Document Type Declaration. It’s a key part, of defining the document type and telling the browser how to use it.
In Pug, a template engine used with NodeJS, knowing the doctype helps create good HTML codeÂ.
Basic Syntax of HTML Doctype in Pug View Engine:
doctype html
This statemeÂnt tells the browser it’s an HTML5 fileÂ. HTML refers to the type of webpage file. While you can use other types, HTML5 is useÂd and suggested the most.
Syntax of multiple Doctypes in Pug:
1. For HTML 1.0 Strict:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
The Syntax will be:
doctype strict
2. For HTML 1.0 Transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
The Syntax will be
doctype transitional
3. For HTML 1.0 Frameset:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
The Syntax will be
doctype frameset
4. For XHTML 1.0 Strict:
<?xml version=”1.0″ encoding=”utf-8″ ?>
The Syntax will be
doctype xml
5. For XHTML 4.0 Transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
The Syntax will be
doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
6. For XHTML 4.0 Frameset:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
The Syntax will be
doctype html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"
7. For XHTML 4.0 strict :
<!DOCTYPE xml PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
The Syntax will be
doctype xml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
Note: HTML5 is the most used and suggeÂsted now.
Custom Doctypes in Pug View Engine:
Additionally, in Pug, you have the flexibility to define your own custom doctype by providing a string literal:
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">
What is Doctype Option in Pug View Engine?
Besides being buffered in the output, a doctype declaration in Pug can influence compilation in various ways. For instance, the termination of self-closing tags with /> or > depends on whether HTML or XML is specified. Additionally, the rendering of boolean attributes may be impacted.
In cases where it’s not feasible to utilize the doctype keyword, such as when rendering HTML fragments, but you still want to specify the doctype of the template, you can achieve this using the doctype option.
const pug = require('pug');
const source = 'img(src="gfg.png")';
pug.render(source);
// Output: '<img src="gfg.png"/>'
pug.render(source, { doctype: 'xml' });
// Output: '<img src="gfg.png"></img>'
pug.render(source, { doctype: 'html' });
// Output: '<img src="gfg.png">'
Example of Doctype in Pug View Engine
Code: Below is an example of doctype in pug.
HTML
doctype html
html(lang="en")
head
title Pug Doctype Example
body
h1 This is an HTML5 doctype
doctype xml
html(lang="en")
head
title Pug Doctype Example
body
h1 This is an XML doctype
doctype transitional
html(lang="en")
head
title Pug Doctype Example
body
h1 This is a Transitional HTML doctype
doctype strict
html(lang="en")
head
title Pug Doctype Example
body
h1 This is a Strict HTML doctype
|
Javascript
const express = require('express');
const path = require('path');
const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.get('/html5', (req, res) => {
res.render('index', { doctype: 'html' });
});
app.get('/xml', (req, res) => {
res.render('index', { doctype: 'xml' });
});
app.get('/transitional', (req, res) => {
res.render('index', { doctype: 'transitional' });
});
app.get('/strict', (req, res) => {
res.render('index', { doctype: 'strict' });
});
const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...