How to write high-performance HTML web pages
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 in a page does not significantly improve parsing time - but HTML is a critical factor in building extremely fast web pages, adapting to different devices and affecting success.
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 styles: 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:
HTML is used to express the structure, and CSS is used 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>Pesto</h1> <p>Pesto is good!</p> </body> </html>
Copy after login
Quote the CSS file at the top of the page, such as in the head element:
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"> </head>
Copy after login
In this way, the browser can preload the styles 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>
Copy after login
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>
Copy after login
This is much better:
<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
Copy after login
js/local.js:
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();Copy after login
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.
But 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 -->
Copy after login
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.
Copy after login
But the following writing method can avoid errors and make the paragraph hierarchy more obvious:
<p>Pesto is good to eat...</p> <p>...and pesto is easy to make.</p>
Copy after login
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>
Copy after login
One thing you must pay attention to is the video and audio elements. They are not self-isolated:
<!-- 错误: liable to cause layout grief --> <video src="foo.webm" /> <!-- 正确 --> <video src="foo.webm"> <p>Video element not supported.</p> </video>
Copy after login
On the contrary, the HTML page will become cleaner by removing unnecessary code
There is no need to add "/" to 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 are no control controls),
Video, it does not have any attributes
<video src="foo.webm">
Copy after login
The following two are better
<video src="foo.webm" autoplay="false" controls="false"> <video src="foo.webm" autoplay="true" controls="true">
Copy after login
This is more readable
<video src="foo.webm" autoplay controls>
Copy after login
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 setting http or https, it will be automatically configured according to the current protocol)
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
Copy after login
Enhance readability, for example, it looks like a title
at first glance<h2><a href="/contact">Contact</a><h2>
Copy after login
而这种则像个链接
<a href="/contact"><h2>Contact</h1></a>
Copy after login
应该使用小写
<A HREF="/">Home</A>
Copy after login
大小写混合看上去更恶心
<H2>Pesto</h2>
Copy after login
语义标记
“语义”意思是跟含义相关
HTML应该标记有意义的内容：元素和描述的内容相符。
HTML5引入了一些新的‘语义元素’像
使用正确的元素表达正确的内容对于可访问性是有帮助的。
使用
,代表标题， 或代表lists
注意的标题应该以
使用,
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
Copy after login
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
Copy after login
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的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>
Copy after login
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
The above is the detailed content of How to write high-performance HTML web pages. For more information, please follow other related articles on the PHP Chinese website!
代表标题， 或代表lists
注意的标题应该以
使用,
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
Copy after login
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
Copy after login
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的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>
Copy after login
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
The above is the detailed content of How to write high-performance HTML web pages. For more information, please follow other related articles on the PHP Chinese website!
- 代表lists
注意
使用
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
Copy after login
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
Copy after login
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的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>
Copy after login
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
The above is the detailed content of How to write high-performance HTML web pages. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
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
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution
4 weeks ago
By DDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
3 weeks ago
By DDD
Where to find the Crane Control Keycard in Atomfall
4 weeks ago
By DDD
Roblox: Dead Rails - How To Complete Every Challenge
1 months ago
By DDD
How to fix KB5055523 fails to install in Windows 11?
2 weeks ago
By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
