HTML weight loss, streamlined HTML tags to create web pages_HTML/Xhtml

HTML weight loss, streamlined HTML tags to create web pages_HTML/Xhtml_web page production

WBOY

Release： 2016-05-16 16:42:43

Original

1439 people have browsed it

HTML 4

HTML (not XHTML), MIME type is text/html, allowing some tags to be omitted. With HTML 4 DTD, you can omit the following tags (those so-called avoidable elements are marked here with strikethrough)

<code><del><font face="Consolas" size="2"></area></font></del></code>

Copy after login

<code><del><font face="Consolas" size="2"></base></font></del></code>

Copy after login

<code><font face="Consolas" size="2"><body></font></code>

Copy after login

<code><font face="Consolas" size="2"></body></font></code>

Copy after login

<code><del><font face="Consolas" size="2"></br></font></del></code>

Copy after login

<code><del><font face="Consolas" size="2"></col></font></del></code>

Copy after login

<code><font face="Consolas" size="2"></colgroup></font></code>

Copy after login

<code><font face="Consolas" size="2"></dd></font></code>

Copy after login

<code><font face="Consolas" size="2"></dt></font></code>

Copy after login

<code><font face="Consolas" size="2"><head></font></code>

Copy after login

<code><font face="Consolas" size="2"></head></font></code>

Copy after login

<code><del><font face="Consolas" size="2"></hr></font></del></code>

Copy after login

<code><font face="Consolas" size="2"><html></font></code>

Copy after login

<code><font face="Consolas" size="2"></html></font></code>

Copy after login

<code><del><font face="Consolas" size="2"></img></font></del></code>

Copy after login

<code><del><font face="Consolas" size="2"></input></font></del></code>

Copy after login

<code><font face="Consolas" size="2"></li></font></code>

Copy after login

<code><del><font face="Consolas" size="2"></link></font></del></code>

Copy after login

<code><del><font face="Consolas" size="2"></meta></font></del></code>

Copy after login

<code><font face="Consolas" size="2"></option></font></code>

Copy after login

<code><font face="Consolas" size="2"></p></font></code>

Copy after login

<code><del><font face="Consolas" size="2"></param></font></del></code>

Copy after login

<code><font face="Consolas" size="2"><tbody></font></code>

Copy after login

<code><font face="Consolas" size="2"></tbody></font></code>

Copy after login

<code><font face="Consolas" size="2"></td></font></code>

Copy after login

<code><font face="Consolas" size="2"></tfoot></font></code>

Copy after login

<code><font face="Consolas" size="2"></th></font></code>

Copy after login

<code><font face="Consolas" size="2"></thead></font></code>

Copy after login

<code><font face="Consolas" size="2"></tr></font></code>

Copy after login

For example, your code is

<code><font face="Consolas" size="2"><li>List item</li></font></code>

Copy after login

can be written as

<code><font face="Consolas" size="2"><li>List item</font></code>

Copy after login

Another example is that a paragraph should end with

<code><font face="Consolas" size="2"></p></font></code>

Copy after login

At the end, you can just write

<code><font face="Consolas" size="2"><p>My paragraph</font></code>

Copy after login

You can even remove html, head, and body (make sure this is comfortable for you before adopting this as your coding standard).

After omitting the tag, the HTML is still valid and the file size is reduced. For typical pages, you can save 5-20%.

HTML 5

The ongoing development of HTML 5 provides some ways to reduce file size.

For example, page document type declaration

<code><font face="Consolas" size="2"><!DOCTYPE html></font></code>

Copy after login

Comparison

<code><font face="Consolas" size="2"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></font></code>

Copy after login

Apparently HTML 5’s DTD is shorter.

HTML 5 is easier to use and shorter when specifying the encoding for the page:

<code><font face="Consolas" size="2"><meta charset="utf-8"></font></code>

Copy after login

replaces

<code><font face="Consolas" size="2"><meta http-equiv="content-type" content="text/html; charset=utf-8"></font></code>

Copy after login

Normally, browsers handle HTML correctly.

Also, in today’s HTML 5, you can remove the type attribute that declares MIME types, such as

<code><font face="Consolas" size="2">type="text/css"</font></code>

Copy after login

<code><font face="Consolas" size="2">type="text/javascript"</font></code>

Copy after login

You can use

<code><font face="Consolas" size="2"><script></font></code>

Copy after login

substitute

<code><font face="Consolas" size="2"><script type="text/javascript"></font></code>

Copy after login

use

<code><font face="Consolas" size="2"><style></font></code>

Copy after login

substitute

<code><font face="Consolas" size="2"><style type="text/css"></font></code>

Copy after login

In all types of pages (even XHTHML) you can omit

<code><font face="Consolas" size="2">type="text/css"</font></code>

Copy after login

HTML 5 makes it easier.

Using all of the above methods at the same time will result in file savings of 10%-20% (or even more), depending on your coding style and the amount of text content in the page. The code will be cleaner and visitors will get the content of the website faster. We use many of these techniques in the Privacy Center project, saving 20% of the original file size.