HTML Formatter
HTML Formatter

Html Formatter And Minifier

  • Html formatter is a free online tool, to format html with 2,3,4 and tab indent levels.
  • This tool contains a number of features like syntax highlighting, autocomplete recommendation, and minifying html.
  • You can also minify the html with css in style tag and javascript in script tag.

Example Html Structure 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Html</title>
</head>
<body>

</body>
</html>
  • This advanced html formatter tool is a full-fledged text editor in which you can search for particular text, jump to a particular line, delete all the contents of the editor, copy the text contents of the editor, wrap the line, and you can make the editor full screen and full-screen window mode.
  • This advanced editor supports html, css, javascript syntax highlighting for better understandability.
  • You can download the html in the editor as a text file, html file, and pdf file formats. All you need to do is to choose the file type from the dropdown and click on the Download Icon
    in the respective editor.
  • You can name the download file as you wish. Enter the download file name in the download file name text box.
  • You can format or beautify the html using the format/beautify button , Minify the html code using the minify button minify button.
  • You can auto-format or beautify the html by checking the auto-update on the edit checkbox Auto update on edit
  • In case of an accidental reload of this website, editor preserves the input html code and populate the editor with the last entered html.
  • This pretty print tool prettify the html.

Why Use HTML?

  • HTML is a hyper text markup language, which is used in web to structure the web page semantically.
  • HTML forms the skeleton of the webpage, which is rendered by browser (chrome,firefox,safari) to display the website.
  • HTML is always used with css and javascript, to have good visual experience and interaction.
  • HTML can have javascript embedded within script tag or can link to external source with url of the js file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Script Tag</title>
</head>
<body>
<script src="https://unpkg.com/browse/react@18.2.0/umd/react.production.min.js"></script>
</body>
</html>
  • HTML uses tags to describe its structure, in which you can load images,videos,audio etc.
  • Each html tags has some attributes which alters the default behaviour of the html tag.
  • HTML 5 is the latest version, with advanced features of playing videos, audios.

Minifier Options

  • removeComments – Removes the html comments.
  • collapseWhitespace – Collapses the whitespace between the html tags.
  • collapseBooleanAttributes – Removes the boolean value from the boolean attributes.
  • removeAttributeQuotes – Removes the quotes around the attributes value whenever possible.
  • removeRedundantAttributes – Removes the attributes, whenever attributes value matches the default value.
  • removeEmptyAttributes – Removes the attributes, whenever the value of the attributes is empty.
  • removeEmptyElements – Removes all the elements with empty contents.
  • minifyJS – Minifies the javascript code in script tag.
  • minifyCSS – Minifies the css in html.
  • html5 – Parse input according to HTML5 specifications.
  • Use Single Quote – Uses single quote around the attributes value whenever possible.
  • removeScriptTypeAttributes – Removes “text/javascript” from type attribute in script tag.
  • removeStyleLinkTypeAttributes – Removes “text/css” from type attribute in style and link tags.
  • sortAttributes – Sorts the attributes in alphabetical order.
  • sortClassName – Sorts the class name in alphabetical order.
  • caseSensitive – Treat attributes as case-sensitive.
  • conservativeCollapse – Collapses to 1 whitespace, never removes the whitespace entirely.
  • preserveLineBreaks – Collapses to 1 line break, whenever whitespace between the tags include multiple line breaks.

HTML Syntax

  • Html file starts with DOCTYPE html (optional), html tag and body tag.
  • Head tag contains the header information of the html file such as title, meta information and styles.
  • Body tag forms the body of the html page, which is visible to the user.
  • Mime type for html files is “text/html” as defined in MDN
    .
  • Extension for html file is fileName.html or filename.xhtml.

What You Can Do?

  • Format / Beautify HTML
  • Minify HTML with several options
  • Download the html as .html file, .txt file and as pdf file.

Limitations

  • When you try to upload file greater than 5MB, you will not be able to edit in the text editor as browser will not be able to handle large text and cause the browser to freeze.
  • But you can still format/beautify, minify, and download html.
  • If you try to download the large file as pdf, it may take some time to prepare the pdf. Please be patience.