How to write efficient HTML_html/css_WEB-ITnose

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 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, 684271ed9684bde649abda8831d4d355 title tags just to make the text larger, and don't use the b8a712a75cab9a5aded02f74998372b4 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 4a249f0d628e2318394fd9b75b4636b1 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 8b05045a5be5764f313ed5b9168a17e6 , like this:

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

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>

Introduce JavaScript files at the end of the 6c04bd5ca3fcae76e30b72ad730ca86d 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>

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>

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

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

***js/local.js***

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

代码校验

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

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

尽量采用HTML5标准；

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

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

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

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

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

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

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

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

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

39000f942b2545a5315c57fa3276f220和b97864c2e0ef2353a16c4d64c7734e92元素必须要有结束标签：

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

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

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

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

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

<video src="foo.webm">

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

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

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

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

• 这样写会更易读：

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

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

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

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

良好的代码排版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<H2>Pesto</h2>

语义化设计

语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d和c787b9a589a3ece771e842a6176cf8e9。
为了是你的代码更易理解，一定要针对内容使用相应的语义化元素：

标题使用4a249f0d628e2318394fd9b75b4636b1 (c1a436a314ed609750bd7c7d319db4da, 684271ed9684bde649abda8831d4d355…)，列表使用ff6d136ddc5fdfeffaf53ff6ee95f185或者c34106e0b4e09414b63b2ea253ff83d6；

23c3de37f2f9ebcb477c4a90aac6fffd内容中的标题应该从4a249f0d628e2318394fd9b75b4636b1开始；

在适当的地方使用HTML5的新元素，比如1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9和15221ee8cba27fc1d7a26c47a001eb9b；

正文中的文本内容要用e388a4556c0f65e1904146cc1a846bee标签，内容的结构化可以使用HTML5的新元素（或者dc6dce4a544fdca2df29d5ac0ea9906b），不要颠倒；

修改文字样式时，907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143要比5a8028ccc7a7e27417bff9f05adf5932和a4b561c25d9afb9ac8dc4d70affff419更好些，因为前者语义更加明显；

ff9c23ada1bcecdd1a0fb5d5a0f18437中要包含2e1cf0710519d5598b1f0f14c36ba674元素，input元素要有type、placeholder以及其他必要的属性，即使值为空都可以；

不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：

<div>    Name:     <input type="text"></div>

这样写会更好些：

<div>    <label>Name:</label>    <input type="text"></div>

布局

首先再次强调一遍：

样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式。

布局需要注意的问题有这些：

e388a4556c0f65e1904146cc1a846bee元素用来放文字，而不是用来布局。在浏览器自身的样式表中默认e388a4556c0f65e1904146cc1a846bee有margin和其他样式；

想实现换行可以使用11606cc87d8fd89bcb19e3fd11c7bb4b元素或者CSS的display属性，尽量避免使用0c6dc11e160d3b678d68754cc175188a来换行。文字内容中的换行可以用0c6dc11e160d3b678d68754cc175188a，但通常也很少这样用，有时在诗文中会把0c6dc11e160d3b678d68754cc175188a作为标点来使用；

避免使用f32b48428a809b51f04d3228cdf461fa，因为这个元素对语义和结构都没有太大帮助，反而f32b48428a809b51f04d3228cdf461fa极差的灵活性对布局和显示都有很大的影响；

不要滥用dc6dce4a544fdca2df29d5ac0ea9906b，W3C对dc6dce4a544fdca2df29d5ac0ea9906b的描述是这样的：当没有其他元素可用时才能使用dc6dce4a544fdca2df29d5ac0ea9906b。如果想让2cdf5bf648cf2f33323966d7f58a7f3f和a1f02c36ba31691bcfe87b2722de723b这类元素能够在结尾换行，可以在样式中添加display: block，这样要比把它们放进dc6dce4a544fdca2df29d5ac0ea9906b或者使用0c6dc11e160d3b678d68754cc175188a来换行要好得多;

必须知道哪些是块级元素，这样就可以避免把块级元素放到dc6dce4a544fdca2df29d5ac0ea9906b里面，比如列表就不需要放到div里面；

f5d188ed2c074f8b944552db028f98a1是用来放表格数据的，不是用来布局的；

Flex box现在越来越流行，学一学没有坏处；

盒模型一定要掌握，必须知道什么时候该用padding，什么时候该用margin；

使用margin的规则：通常情况下，margin都是添加在元素的bottom和right，有时也可以是top或者left。无论如何，尽量避免同时在bottom和top，或者right和left添加margin。可以用last-of-type选择器来去掉最后一个子元素的margin。

CSS方面

这篇文章虽然是讲HTML的，但也有些CSS的注意事项想说一说：

不要将多句CSS写在同一行；

不要重复使用同一个id；

有时候给父元素添加class要比给子元素添加更简洁易维护（class的命名方式可以采用BEM规则），像这样：

<!-- 这样看着好累>o< --> <ul>      <li class="ingredient">Basil</li>      <li class="ingredient">Pine nuts</li>      <li class="ingredient">Garlic</li> </ul> <!-- 看起来舒服多了^v^ --> <ul class="ingredients">      <li>Basil</li>      <li>Pine nuts</li>      <li>Garlic</li> </ul>

易用性

要多为用户考虑，不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验：

尽可能的使用语义化元素；

要准备好备用内容：比如给9bf7cbf2c39baa37076a22499de2f6ed元素添加说明和副标题，给39000f942b2545a5315c57fa3276f220和b97864c2e0ef2353a16c4d64c7734e92元素添加备用的文字或者图片，视频内容配上相应的截图或海报，每张图片都要加alt属性（如果图片只是用来装饰页面的话可以给alt赋空值）;

链接要加title属性，title必须要有意义，不要只是链接的复述；

在d5fd7aea971a85678ba271703566ebfd元素中要加入type和placeholder；

设计时要尽量加入ARIA (Accessible Rich Internet Application)。

其他建议

符号的转义，比如0725adfcec0f6eeff1a2a038a9ca5204HTML & JavaScript6e916e0f7d1e588d4f442bf645aedb2f；

有些符号不需要转义，比如破折号（如：4-5 weeks）还有货币符号（如：¢,?）；

在代码中作用不明显的地方适当的添加注释（注释在重构时的作用性举足轻重，优秀的HTML代码，无论多么复杂都可以很好的阅读和理解）；

有时全大写的标题会起到吸引注意力的作用，但没必要在HTML中真的输入大写的文字，可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处，就是当用户复制这段文字时，他们可能不想要全大写的，像下面的3f7b3decd2dcafb07b84d2d3985d9f40，当用户复制文字内容时，得到的是大小写混合的文字：
HTML

<h4>W3C Web Accessibility Initiative ARIA guidance</h4>

CSS

h4 {    font-variant: small-caps;}

测试

重中之重，就是一定要做测试！
在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备，不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器（如： Lynx）或者屏幕阅读器（如：ChromeVox）来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。