Some tips for writing high-performance HTML applications

How can you improve web page performance?

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

Poor HTML is often overlooked, even though it has always been the core language of the web.

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

Reducing HTML complexity and the number of elements on a page will not significantly improve parsing time - but HTML is a critical factor in building fast web pages that adapt to different devices and affect success.
In this article, you’ll learn how to write concise and clean HTML that will enable you to create websites that load quickly, support multiple devices, and will be easy to debug and maintain.

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

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

HTML should not be used to display style and appearance. Don't write text in heading tags (h1-h6) just to make it appear "bigger" or use blockquotes just for the sake of 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 default h1 element renders at a size of 32px.

Three basic principles:

HTML is used to represent the structure, and CSS is used to express different styles and themes. JavaScript to respond to user actions.

Use HTML, with CSS where necessary, and JavaScript when necessary. For example, in many cases you might use HTML forms for validation and CSS or SVG for animation.

Separate CSS and JavaScript from your HTML code. Allowing them to be cached makes the code easier to debug. In production, CSS and JavaScript can be minified and combined and should be part of your build system. Note* See JavaScript build (compilation) system competition Document structure

Using HTML5 document type:

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

This way, the browser can preload the styles before parsing the HTML without rendering a messy page layout.

Put JavaScript at the very bottom of the page, before closing the body. This will increase page rendering time, as the browser can render the page before JavaScript is loaded:

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

This is much better:

Valid HTML

A major factor in the success of Web pages is the browser's ability to process invalid HTML. Browsers also have some standardized rules for how to render invalid code.

But this is not a reason for you to let it go. Valid HTML is easier to debug, tends to be smaller files, faster, and takes up less resources because it renders faster. Invalid HTML makes responsive design difficult to implement.

Writing valid HTML is especially important 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 doctype.

Make sure to maintain the HTML hierarchy: nest elements correctly and make sure there are no unclosed elements. It can help debuggers add comments.

Be sure to add a closing tag after non-self-closing elements. For example, the following will work:

But the following way of writing can avoid mistakes and make the paragraph hierarchy more obvious:

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

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.

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

On the contrary, by removing unnecessary code, the HTML page will become cleaner.

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

Setting the property has no value, if you don't add the property (in this case, it will not play automatically and there are no controls),

video, which has no attributes

The following two are better

This is more readable

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

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

Improve readability, e.g., it looks like a title at first glance

This is like a link

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

Should use lowercase

Mixing uppercase and lowercase letters looks even worse.

Semantic markup

"Semantics" means related to meaning

HTML should mark up meaningful content: elements should match the content they describe.

HTML5 introduces some new 'semantic elements' like <header>, <footer> and <nav>.

Using the right elements for the right content helps with accessibility.

Use <h1>, <h2>, <h3> for titles, <ul> or <ol> for lists

Note that the title of <article> should start with <h1>

Using <header>, <footer>, <nav> and <aside>

Use <p> to write the body text

Use <em> and <strong> instead of <i> and <b> for emphasis

The form uses the <label> element, input type

Mixing text and elements can cause layout problems

It is best expressed as follows

layout

HTML should be structured with meaning, not style.

Use the <p> element for text, not layout.

Avoid using <br> to wrap lines, use block-level elements and CSS instead.

Avoid using horizontal dividers <hr>. Use CSS border styles to control.

Don't use unnecessary DIVs. W3C defines DIV as the last element in the sorting order.

Be aware of which elements are block-level elements and avoid placing unnecessary block-level elements inside a DIV. It is not necessary to put a list inside a div.

Don't use tables for layout.

Flex box is widely recommended, so use it if you can.

Use CSS padding and margin, and understand the box model.
CSS

This post is about HTML, but here are some basic CSS tips.

Avoid inline CSS. For performance reasons, CSS can be embedded into your web pages at BUILD time.

Avoid duplication of IDs.

If you want to apply a style to multiple elements, use a class, preferably on the parent element rather than on the children:

Accessibility

Using semantic elements

Provides backward compatibility

Add a title attribute to the link, and avoid using the same content as the link text.

Add type and placeholder attributes to the input element