HTML Tutorial

Write high-performance HTML applications

高洛峰

Feb 28, 2017 pm 01:14 PM

html

How can you improve web page performance?

Most developers will optimize through JavaScript and images, through server configuration, compressing files and merging files - even adjusting CSS (merging small images).

Poor HTML is always ignored, even though it has always been the core language of the Internet.

HTML is getting bigger and bigger. Each HTML page of the top 100 websites is mostly around 40K. Amazon and Yahoo use thousands of HTML pages. On the main page of youtube.com, there are as many as 3,500 HTML elements.

Reducing the complexity of HTML and the number of elements on a page does not significantly improve parsing time - but HTML is a critical factor in the success of building extremely fast web pages that adapt to different devices.
In this article, you will learn how to write concise and clean HTML, allowing you to create a website that loads quickly and supports multiple devices, and will be easy to debug and maintain.

There is no one way to write code - especially HTML. This is just a general experience, but it is not the only right choice.
HTML, CSS and JavaScript

HTML is a markup language used to represent structure and content.

HTML should not be used to display styles and styles. Don’t put text in title tags (h1~h6) to appear “bigger” or use blockquotes elements just for indentation. Instead, use CSS to change the appearance and layout of elements.

The default appearance of HTML elements is achieved through the browser's default style: Firefox, Internet Explorer and Opera are all different. For example, in Chrome the h1 element is rendered to a size of 32px by default.

　 Three basic principles:

Use HTML to express structure, and CSS to express different styles and themes. JavaScript to respond to user actions.

Use HTML, CSS when necessary, and JavaScript when necessary. For example: In many cases, you might use HTML forms for validation and CSS or SVG for animations.

Separate CSS and JavaScript from your HTML code. Making them cacheable makes the code easier to debug. In production, CSS and JavaScript can be minified and merged and should be included as part of your Build system. Note* See JavaScript Construction (Compilation) System Competition
Document document structure

Use HTML5 document type:

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>

  <h1 id="Pesto">Pesto</h1>
  <p>Pesto is good!</p>

</body>
</html>

At the top of the page Reference the CSS file internally, such as in the head element:

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

In this way, the browser can preload the style before parsing the HTML without rendering a confusing page layout.

Place JavaScript at the very bottom of the page, before the body is closed. This will improve page rendering time because the browser can render the page before the JavaScript is loaded:

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

</body>

Add event handling in JavaScript. Don't add it in HTML. This is very difficult to maintain, such as:

index.html:   

<head>
  ...   
  <script src="js/local.js">

</head>

<body onload="init()">
  ...   
  <button onclick="handleFoo()">Foo</button>
  ...   
</body>

This is much better:

<head>   
  ...   
</head>   

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

　　js/local.js:   

init();   
var fooButton =   
    document.querySelector(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();

Legal HTML

A major factor in the success of web pages is that browsers can handle invalid HTML. Browsers also have some standardized rules for how to render invalid code.

However, this is no reason for you to let it go. Valid HTML is easier to debug, tends to have smaller file sizes, is faster, and uses fewer resources because it renders faster. Invalid HTML makes responsive design difficult to implement.

It is especially important to write valid HTML when using templates.

Validate HTML in your BUILD system: Use validation plugins such as HTMLHint and SublimeLinter to check the syntax of your HTML.

Use HTML5 document type.

Be sure to keep your HTML hierarchical: nest elements correctly and make sure there are no unclosed elements. It helps debuggers add comments.

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

Please be sure to add a closing tag after the non-self-closing element. For example, the following will also work:

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

But the following will work Avoid mistakes and make paragraph hierarchy more obvious:

Pesto is good to eat...

...and pesto is easy to make .

The items element (li) does not have to be closed. Some very smart programmers will write it like this. However, the list element (ul) must be closed.

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

One thing you must pay attention to is the video and audio elements. They are not self-closing:

<!-- 错误: liable to cause layout grief -->
<video src="foo.webm" />

<!-- 正确 -->
<video src="foo.webm">
  <p>Video element not supported.</p>
</video>

Instead, the HTML page will become cleaner by removing unnecessary code

There is no need to add for self-closing elements "/", like img, etc.

Setting attributes has no value. If no attributes are added (in this case, it will not play automatically and there is no control control),

Video, It does not have any attributes

<video src="foo.webm">

The following two are better

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

This one is more readable

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

The stylet and script tags do not require the type attribute; the default is css and javascript

It is better to optimize the protocol address (remove http or https, it will Automatically configured according to the current protocol)

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

　　增强可读性，如，第一眼看上去就像是个标题

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

　　而这种则像个链接

Contact

　　应该使用小写

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

　　大小写混合看上去更恶心

<h2 id="Pesto">Pesto</h2>

　语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像

　　使用正确的元素表达正确的内容对于可访问性是有帮助的。

　　使用

,

代表标题，

或

　　注意

的标题应该以

开始

　　使用

写正文

　　使用和代替和 表示强调

　　表单使用元素，input 类型

　　混合文字和元素会导至布局的问题

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

　　最好用下面的表示

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

　布局

　　HTML应该使用有意义的组织结构，而不是通过样式来实现。

　　使用

元素代表文本，而不是用来布局。

　　避免使用
来换行，使用块级元素和CSS来代替。

　　避免使用水平分隔线

　　不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。

　　要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。

　　不要使用table来布局。

　　Flex box是被广泛推荐的，能用就用吧。

　　使用CSS的padding和margin，理解盒子模型。
　CSS

　　这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。

　　避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。

　　避免ID出现重复。

　　如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：

<!-- 有点笨 :( -->
<ul>
  <li class="ingredient">Basil</li>
  <li class="ingredient">Pine nuts</li>
  <li class="ingredient">Garlic</li>
</ul>

<!-- 更好 :) -->
<ul class="ingredients">
  <li>Basil</li>
  <li>Pine nuts</li>
  <li>Garlic</li>
</ul>

　可访问性

　　使用语义元素

　　提供向后兼容

　　在链接上添加title属性，而且应该避免与link文本出现相同的内容

　　在输入元素上添加type和placeholder属性

更多编写高性能HTML应用相关文章请关注PHP中文网！

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Saving in R.E.P.O. Explained (And Save Files)

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks agoByDDD

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.