HTML formatter
<link as="script" rel="preload" href="/webpack-runtime-7fdc72ea9c6db8b5c0ac.js" />
<link as="script" rel="preload" href="/framework-89ba0b46983eb9172b4c.js" />
<link as="script" rel="preload" href="/app-6f02242c5ece0ee32bd6.js" />
<link as="script" rel="preload" href="/styles-407fe62976dc5310c43e.js" />
<link as="script" rel="preload" href="/19980f8108e1b1d8516c4bab92767ad88df0e8ce-06b28b8f58f4de25a636.js" />
<link as="script" rel="preload" href="/7b245d5dfc72c5b4eb786c0bdc9eead625af9414-3f404ddc48c90de022e9.js" />
<link as="script" rel="preload" href="/component---src-pages-json-formatter-js-a57f70249ce301f164d6.js" />
<link as="fetch" rel="preload" href="/page-data/json_formatter/page-data.json" crossorigin="anonymous" />
<link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous" />
</head>
<body>
<div id="___gatsby">
<div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper">
<div class="m-0 p-0 flex flex-column flex-1" style="min-height:100%">
<nav class="devtool-navbar pl-4 pr-4 navbar navbar-expand-sm navbar-light"><span class="navbar-brand"><a class="text-black" href="/"><span class="text-indigo-400"><</span><span class="font-semibold">Devtools</span><span class="text-indigo-400">/></span> daily</a></span><button type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed"><span class="navbar-toggler-icon"></span></button>
<div class="justify-content-end navbar-collapse collapse">
<div class="justify-content-center navbar-nav" style="height:auto">
<div class="nav-item"><a aria-current="page" class="nav-link link-active" href="/json_formatter/">JSON Formatter</a></div>
<div class="nav-item"><a class="nav-link" href="/xml_formatter/">XML Formatter</a></div>
<div class="nav-item"><a class="nav-link" href="/sql_formatter/">SQL Formatter</a></div>
<div class="nav-item"><a class="nav-link" href="/timestamp/">Timestamp</a></div>
</div>
</div>
</nav>
<div class="flex flex-column flex-1 p-4">
<h1 class="m-0 p-0">JSON<!-- --> Formatter</h1>
<div class="flex flex-1">
<div class="flex flex-column flex-1 w-full">
<div class="flex-row input-button-pane"><span>Your <!-- -->JSON</span>
<div class="button-container"><button type="button" class="btn btn-link">Upload file</button><button type="button" class="btn btn-link">Try example</button></div>
</div><textarea class="form-control code-input w-full flex-1 flex" placeholder="{"what":"JSON","where":"here","why":"to make pretty"}"></textarea>
</div>
</div><input type="file" id="hiddenFile" style="position:absolute;left:-100rem" />
</div>
</div>
</div>
<div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div>
</div>
<script id="gatsby-script-loader">
/*<![CDATA[*/
window.pagePath = "/json_formatter/"; /*]]>*/
</script>
<script id="gatsby-chunk-mapping">
/*<![CDATA[*/
window.___chunkMapping = {
"polyfill": ["/polyfill-a0ac0fe6433808a0be64.js"],
"app": ["/app-6f02242c5ece0ee32bd6.js"],
"component---src-templates-blog-template-js": ["/component---src-templates-blog-template-js-9d4d5ba1a0136f530fd5.js"],
"react-syntax-highlighter/lowlight-import": ["/react-syntax-highlighter/lowlight-import-ba510df50fb53bda1155.js"],
"react-syntax-highlighter_languages_highlight_xl": ["/react-syntax-highlighter_languages_highlight_xl-e5e5c54645edea765d59.js"],
"react-syntax-highlighter_languages_highlight_xml": ["/react-syntax-highlighter_languages_highlight_xml-7eadf72dccbf12690863.js"],
"react-syntax-highlighter_languages_highlight_xquery": ["/react-syntax-highlighter_languages_highlight_xquery-faa4de9a3e7f438b4145.js"],
"react-syntax-highlighter_languages_highlight_yaml": ["/react-syntax-highlighter_languages_highlight_yaml-b10d7262a06ffe7de2f5.js"],
"react-syntax-highlighter_languages_highlight_zephir": ["/react-syntax-highlighter_languages_highlight_zephir-aa4b8c3339c352b7fab0.js"]
}; /*]]>*/
</script>
<script src="/polyfill-a0ac0fe6433808a0be64.js" nomodule=""></script>
<script src="/component---src-pages-json-formatter-js-a57f70249ce301f164d6.js" async=""></script>
<script src="/7b245d5dfc72c5b4eb786c0bdc9eead625af9414-3f404ddc48c90de022e9.js" async=""></script>
<script src="/19980f8108e1b1d8516c4bab92767ad88df0e8ce-06b28b8f58f4de25a636.js" async=""></script>
<script src="/styles-407fe62976dc5310c43e.js" async=""></script>
<script src="/app-6f02242c5ece0ee32bd6.js" async=""></script>
<script src="/framework-89ba0b46983eb9172b4c.js" async=""></script>FAQ
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides a way to structure and organize the content of a webpage, including text, images, videos, and links. HTML consists of a series of elements, each represented by a tag, which can be nested within one another to create the overall structure of the page. The most common elements include headings, paragraphs, lists, images, and links. HTML documents are rendered by web browsers, which interpret the HTML code and display the content of the webpage to the user.
HTML is typically minified in order to reduce the size of the file and improve the performance of the website. Minification is the process of removing unnecessary characters, such as white space, comments, and line breaks, from the code without changing its functionality. This can significantly reduce the file size, which in turn can lead to faster load times for the webpage. Minifying the HTML can also reduce the amount of data that needs to be transferred over the internet, which can be especially beneficial for mobile users or users with slow internet connections. Additionally, minifying the HTML can make it more difficult for others to read and understand the source code, which can provide an extra layer of security for the website.
CSS: Cascading Style Sheets is a style sheet language that is used to separate the presentation of a web page from its content. It can be used in conjunction with HTML to create more visually appealing web pages.
JavaScript: JavaScript is a programming language that can be used to create interactive web pages and dynamic user interfaces. It can be used in conjunction with HTML and CSS to create more interactive and responsive web pages.
