HTML Formatter / Minifier
serverDocumentation
What is HTML?
HTML is an acronym standing for HyperText Markup Language. HTML is the standard markup language for designing web pages using HTML elements in combination with CSS and JavaScript to be rendered properly in a web browser. The file extensions for HTML are .htm and .html which the latter is mostly preferred. The MIME type for HTML is text/html.
The following is an example of basic HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
<link rel="stylesheet" href="style.css">
<script src="bundle.js"></script>
</head>
<body>
<h1>What is HTML?</h1>
<p>HTML is the standard markup language for designing web pages</p>
</body>
</html>There are three main parts in the HTML code; i.e. html, head, and body.
- html - The main HTML tag describes a web page. It contains all the HTML elements that forms the whole web page.
- head - The head tag of an HTML document describes the information of a web page, such as the title, meta data, links to external CSS and JavaScript files, and more.
- body - The body tag describes the visible part of a web page where the user can interact with.
Moreover, each HTML page must have the document type declaration written at the top most of the page. For example, the document type for HTML5 is <!DOCTYPE html>. If omitted, the browser will render HTML code in the quirk mode for backward compatibility.
How to add an external CSS file to HTML code
When working with CSS, you can keep all the CSS code in one single file and add it to your HTML pages using the link element. When you make changes to the CSS file, it will affect all the HTML pages using this CSS file at once. Therefore, you don't have to copy and paste all the same CSS code on every single HTML page.
This is an example of how to add an external CSS file to an HTML page using the link tag. The path in the href attribute is the root path of your public directory where the CSS file resides in.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HTML body goes here. -->
</body>
</html>This is the external CSS file named style.css added to the HTML page above.
/** style.css **/
body {
background: #fff;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
}Using an external CSS file in the HTML code above is equivalent to the following HTML code.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #fff;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 1.5em;
}
</style>
</head>
<body>
<!-- HTML body goes here. -->
</body>
</html>How to add an external JavaScript file to HTML code
Similar to adding an external CSS file to HTML code, you can also add a JavaScript file as well. In the head tag of a web page, you can use the src attribute of a script tag to add an external JavaScript file to HTML code. When you make changes to the JavaScript file, all the web pages using the same external JavaScript file will be affected instantly without the need of editing each of them manually one by one.
<!DOCTYPE html>
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- HTML body goes here. -->
</body>
</html>This is the aforementioned JavaScript file added to the HTML code above.
/** bundle.js **/
var now = new Date().valueOf();
console.log(now); // Current time in UNIX timestampAdding JavaScript code to a script tag in the HTML code as in the following example is exactly the same as using an external JavaScript file.
<!DOCTYPE html>
<html>
<head>
<script>
var now = new Date().valueOf();
console.log(now); // Current time in UNIX timestamp
</script>
</head>
<body>
<!-- HTML body goes here. -->
</body>
</html>Why minify HTML code (and internal CSS and JavaScript code)
HTML minification is the process of removing unnecessary whitespace characters including comments and internal CSS and JavaScript code from HTML code. HTML minification significantly helps reduce the page load time and bandwidth usage in production. Therefore, it results in a better user experience for your website.
HTML minification also minimizes internal CSS and JavaScript code found in the HTML code. Other than removing all the unnecessary whitespace characters and comments, it also renames long variable names in JavaScript code to be compact in order to reduce the total file size.
For example, renaming function add(num1, num2) {} to function a(b,c){}. The minified HTML code will be reduced into one single line and unreadable while it's still functional as the original HTML code.
This is an example of normal HTML code a web developer would write in development with internal CSS and JavaScript code embedded as well as comments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
<style>
/** TODO: Add more styles **/
body {
background: #fff;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 1.5em;
}
</style>
<script>
function add(num1, num2) {
return num1 + num2;
}
var num = add(2, 3);
// Print the result to console.
console.log(num);
</script>
</head>
<body>
<h1>What is HTML?</h1>
<p>HTML is the standard markup language for designing web pages</p>
<!-- TODO: Add more HTML elements -->
</body>
</html>The HTML code above can be minimized into one single line with all the unnecessary characters completely removed as seen in the following resulting in a much smaller file size.
<!doctype html><html lang=en><head><meta charset=UTF-8><title>HTML Example</title><style>body{background:#fff;color:#333;font-family:Roboto,sans-serif;font-size:1.5em}</style><script>function add(n,d){return n+d}var num=add(2,3);console.log(num)</script></head><body><h1>What is HTML?</h1><p>HTML is the standard markup language for designing web pages</p></body></html>