How to write efficient HTML

Personal translation, welcome to reprint!
Original English text: https://samdutton.wordpress.com/2015/04/02/high-performance-html/
This is my first time translating a foreign blog post. Any comments and suggestions are welcome!

How can we improve the performance of web pages?

When seeing this question, most developers will think of image optimization, JavaScript optimization, server configuration upgrade, file compression and even CSS compression. . However, the core language of web pages, HTML, has been ignored.

Nowadays, the burden of HTML is getting heavier and heavier. Among the top 100 websites in the world, the average HTML code size of each page is about 40k, of which Amazon and Yahoo have an average of several thousand HTML codes per page. OK, Youtube’s homepage even has 3500 HTML elements. Although reducing the complexity of HTML per page and reducing the number of elements will not improve the loading time of the page a lot, good HTML coding habits are an important basis for improving the loading speed of web pages. The reason why I wrote this article is to tell you how to write clean and tidy HTML code, so that your web pages can load and run quickly and normally on many devices. In this process, you can learn how to build websites and apps that are easy to maintain and debug.

There are many ways to write code, especially HTML. This article only makes the relatively best suggestions based on our experience. It does not mean that every suggestion can achieve the effect under any circumstances. It is for reference only.

Content introduction

• Each one performs its own duties: it is enough to control the style with CSS, do not use HTML elements to forcefully obtain the desired style;
• Meticulous: be sure to add code verification tools during the development process to ensure that the code does not have any grammatical and logical errors;
• Clean and tidy: use automatic typesetting tools to maintain the consistency of code structure and format;
• Language proficiency: You should understand the usage of all elements and use more semantic elements in HTML;
• Treat everyone equally: All situations must be considered during the design process, and backup plans are very important. You should even use ARIA (Accessible Rich Internet Application) specifically for special groups to ensure that your website can be displayed through a screen reader or a plain text browser;
• Comprehensive testing: test your website through various tools How the website performs on different devices and different screen sizes.

Three Friends of the Web

There shouldn’t be much explanation on the meaning of HTML, please go to Baidu Encyclopedia.
The first thing I want to say is that although the two brothers HTML and CSS are passionate about each other, they cannot make the relationship too complicated. It is enough to control the style with CSS. Do not use HTML elements to forcefully obtain the desired style. , for example, don't use the

,

,

title tags just to make the text larger, and don't use the

tag just to indent it.
Chrome, Firefox, Internet Explorer and Opera all have their own default style sheets, and the default display mode of HTML elements is determined by these default style sheets. For example, the default style of

in Chrome is 32px bold, and the font is Times.
Three principles of friends:

HTML is used to establish the structure, and CSS is used For rendering styles, JavaScript is used to control behavior;

First complete the design of HTML, then design CSS according to style requirements, and finally design JavaScript when really needed;

Combine CSS and Archive the JavaScript files separately from the HTML files (this not only helps with page caching, but also makes later debugging easier). Afterwards, the CSS and JavaScript are linked to the HTML, and the CSS and JavaScript codes can be compressed as needed. encryption.

Structure construction

You need to pay attention to these when building the structure of HTML:

When adopting the HTML5 standard, the beginning should be added with , like this:

<!DOCTYPE html><html>    <head>         <title>Recipes: pesto</title>    </head>    <body>          <h1>Pesto</h1>          <p>Pesto is good!</p>    </body></html>

Copy after login

The CSS file should be introduced in the head tag, so that the browser can get the CSS information before outputting HTML:

<head>    <title>My pesto recipe</title>    <link rel="/css/global.css">    <link rel="css/local.css"></head>

Copy after login

Introduce JavaScript files at the end of the tag, so that the JavaScript files can be compiled after the page is displayed to speed up page reading, and at the same time help JavaScript operate on elements in the page, like Like this:

<body>      ...      <script src="/js/global.js">      <script src="js/local.js"></body>

Copy after login

Operations on elements should be added in JavaScript code, not in HTML. The following example is wrong and will be difficult to maintain later.

• 比如这样写就不太好：
  index.html

<head>    ...     <script src="js/local.js"></head><body onload="init()">    ...     <button onclick="handleFoo()">Foo</button>    ...</body>

Copy after login

• 这样写就好多了：
  index.html

<head>    ...</head><body>     ...    <button id="foo">Foo</button>    ...     <script src="js/local.js"></body>

Copy after login

***js/local.js***

Copy after login

javascriptinit(); var fooButton =  document.querySelector('#foo');fooButton.onclick = handleFoo();

Copy after login

代码校验

虽然现在浏览器的容错力越来越高，但这不能成为代码粗制滥造的借口。不管什么时候，正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少，而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时，正确有效的HTML就更显得尤为重要，也许一个正常运行的模块会在其他环境中出现可怕的异常。
如何才能提高HTML的正确性呢？可以有这些方式：

在项目中加入校验过程：可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件，也可以在build的时候使用HTMLHint with Grunt这类校验工具，还可以通过W3C HTML validator等网站来在线检测代码；

尽量采用HTML5标准；

确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候，如下所示：

<div id="foobar">    ...</div> <!-- foobar ends -->

Copy after login

在所有不能自动结束的元素末尾添加结束标签；

• 比如这个例子，这样写也可以可以正常运行：

<p>Pesto is good to eat...<p>...and pesto is easy to make.

Copy after login

• 不过还是下面这样比较不容易出错：

<p>Pesto is good to eat...</p><p>...and pesto is easy to make.</p>

Copy after login

结束标签不是必须的，所以有些人认为可以不写，这可以接受，但是和标签一定要加：

<ul>      <li>Basil      <li>Pine nuts      <li>Garlic</ul>

Copy after login

<!-- 这样写不好 --><video src="foo.webm" /><!-- 还是这样写吧 --><video src="foo.webm">      <p>Video element not supported.</p></video>

Copy after login

另一方面，要去掉冗余代码：

像和这一类元素可以不加结束标签;

布尔型的属性可以不赋值，只要该属性出现，值就为true；

• 下面这样是可以运行的（没有加autoplay和controls）：

<video src="foo.webm">

Copy after login

• 这样就不能运行，因为这两个属性值必须是true：

<video src="foo.webm" autoplay="false" controls="false">

Copy after login

• 这样改一下就可以运行了：

<video src="foo.webm" autoplay="true" controls="true">

Copy after login

• 这样写会更易读：

<video src="foo.webm" autoplay controls>

Copy after login

CSS和 JavaScript链接不需要type属性，他们就是他们；

外部链接可以省略协议部分（如http,ftp），这样可以避免内容太长而引起问题。像这样写是可以的：

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

Copy after login

良好的代码排版

保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：

在项目中保持统一的HTML代码风格；

使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier；

在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了；

缩进可以通过空格或者Tab来实现，但一定不要两者同时使用；

用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：

<h2><a href="/contact">Contact</a><h2>

Copy after login

这样写的话就更像是一个链接：

<a href="/contact"><h2>Contact</h2></a>

Copy after login

元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行；

统一所有引号的使用规则，不要这里用双引号，那里又单引号；

使用小写字母来写标签和属性，大写字母很不易读，像这样：

<A HREF="/">Home</A>

Copy after login

混合式的写法简直就是反人类：

<H2>Pesto</h2>

Copy after login

语义化设计

语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如

,