Как отформатировать html файл

HTML Formatter / Minifier

HTML Formatter / Minifier is a free online developer tool to beautifully format messed up HTML code as well as internal CSS and JavaScript code or minify HTML code to make it compact for production.

This tool is split into two modes: HTML Formatter and HTML Minifier .

You can either browse an HTML file locally from your device, fetch an HTML file from the internet, or enter HTML code manually.

HTML Formatter — Formats messed up HTML code to make it more human-friendly and readable with 2 space indentation. Suitable for development purposes.

HTML Minifier — Minifies HTML code by removing all the unnecessary whitespace characters, attribute quotes, and comments if any, including decoding HTML entities and minifying internal CSS and JavaScript code.

The output HTML code will be properly optimized, compact, and performant for production use.

When you’re done formatting or minifying HTML code, you can either copy the result to your clipboard using the copy button or download it as an HTML file to your device using the download button.

Documentation

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 Exampletitle> 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 pagesp> 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 . 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> 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> 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> 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 timestamp

Adding 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> 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 Exampletitle> 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 pagesp> 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 Exampletitle>style>bodybackground:#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 pagesp>body>html>

Related Tools

CSS Beautifier / Minifier

Beautifully formats messed up CSS code with your preferred indentation level or minifies CSS code to make it compact for production.

JavaScript Beautifier / Minifier

Beautifully formats messed up JavaScript code with your preferred indentation level or minifies JavaScript code to make it compact for production.

JSON Formatter / Minifier

Beautifully formats messed up JSON data with your preferred indentation level or minifies JSON data to make it compact for production.

XML Formatter / Minifier

Beautifully formats messed up XML data with your preferred indentation level or minifies XML data to make it compact for production.

SQL Formatter / Minifier

Beautifully formats messed up SQL statements with your preferred indentation level or minifies SQL statements to make it compact for production.

Источник

Web Formatter

Format your HTML, XML, CSS, JavaScript, PHP and JSON code in a few easy steps. Paste your code into the text box, select the tab spacing that you want and click the format button.

Paste your code or drag a file here

Some coders are very organized. Their code always looks elegant and clean and it is very easy to read. Some coders are not like this and their code can look quite messy. This can make it difficult for other people to read this coder’s work, which is why a web formatter tool can be quite handy! This tool can automatically add tabbed indents to lines of code to make them better for human consumption.

Web formatter tool: What does it do?

This tool does three things. First, it analyzes the code you give it and determines what kind of code it is. Then, it adds tabs to the various lines to make it more pleasant for humans to read. Finally, it gives you a few export tools to then grab this better-looking code so you can save it, share it, or archive it.

If you’re concerned about privacy and security, don’t be. Our tool performs all of its functions locally within your browser. Your code never gets uploaded to a server and nothing is saved on any system other than your own.

Why would you need to use this web formatter?

Fundamentally, a computer doesn’t care how your code looks. As long as the code is written accurately, the computer is going to ignore tabs, spaces, and other white spaces (unless, of course, you’re writing in a code that uses that space, such as Python).

However, a human reading your code is going to appreciate indents to help separate out the lines and make it easier to read. This web formatter tool is perfect for coders who have a file that doesn’t have indentations, as the tool can add desired indentations quickly and automatically. This tool is also helpful if you’re trying to fix up some code you found online or got from someone else who wasn’t nice enough to fix it up for you.

How to use this web formatter tool?

The first step for this tool is to give it some code. You can do this in one of four ways. You can hit the BROWSE button to upload a file from your computer. Alternatively, you could drag and drop a file onto the code field or just paste some code you previously copied. Finally, you could also hit the LOAD URL button to select a web page to upload. However, for that to work, the page in question needs to support cross-origin requests.

Whichever method you use, our tool should automatically detect what kind of code it is. Our tool supports HTML, XML, CSS, JavaScript (JS), PHP, and JSON. If for some reason our tool doesn’t accurately select the appropriate code type, you can manually select it before you upload by using the buttons above the code field.

When your code is ready, hit the FORMAT button. This will add tabbed indents to the appropriate lines. If you want your indents to be more or less than the default amount (which is 4), you can change this number in the TAB SIZE field. Change this number and then hit FORMAT again to see what a difference this makes.

Once your code looks formatted to your liking, it’s time to export it. You can do this one of three ways. You can simply select all the text in the code field and then copy and paste it somewhere. A faster method would be to hit the COPY button which puts the whole code field onto your clipboard. A third method would be to hit the DOWNLOAD button, which downloads a file with your newly formatted code.

Ready to use the web formatter again? Simply hit the CLEAR button and start the process over.

Источник

Форматирование HTML кода

Довольно часто при написании HTML кода ваши отступы, интервалы и другие элементы форматирования могут стать немного дезорганизованными.

С помощью данного инструмента вы можете легко сделать ваш код красивым и легко читаемым. Особенно важно соблюдать единый стиль форматирования когда над проектом работают нескольких разработчиков.

Если Вам приходится разбираться в чужом, минимизированном или неряшливо написанном коде, этот инструмент тоже для Вас.

• Проверка тИЦ и PR
• Проверка Яндекс ИКС
• Проверка сайта на вирусы
• Реестр запрещённых сайтов
• Whois-сервис
• Punycode-конвертер
• Проверка IP-адреса
• Узнать IP-адрес сайта
• Сайты на одном IP
• Просмотр HTTP-заголовков
• Проверка Last-Modified
• Редактор HTML кода
• Шифрование HTML кода
• Форматирование HTML кода
• Валидатор HTML кода
• Сжатие JavaScript кода
• Форматирование JavaScript кода
• Генерация robots.txt
• Генерация пароля
• Шифрование MD5
• Проверка орфографии
• Подсчет количества символов
• Транслит переводчик

Поставьте к себе на сайт

Сервис для улучшения читабельности HTML кода

Введите сокращенный, или запутанный HTML-код в поле ниже, чтобы мы его почистили и сделали красивым. Сервис также поддерживает нумерацию строк и подсветку синтаксиса. С помощью настроек форматирования вы можете адаптировать код под ваши личные вкусы.

Форматирование внутри тегов и :

Переформатировать HTML Копировать

Переформатировать HTML Копировать

Примеры

Исходный сжатый HTML-код:

HTML-код после преобразования:

Источник