Summary of some HTML code writing style suggestions

Omit the protocol of the resource file

It is recommended to omit the protocol part (http:, https:) in the URL of images, media files, styles and scripts. After omitting the protocol part, the resource file will inherit the protocol of the page URL. Not only can it prevent the problem of mixed content, but also reduce the size of the page. For example: to reference a JavaScript file, you can write it in the following way.

Why are h4, h5, and h6 tags rarely used?

Title tags include h1 to h6. We often use h1, h2, h3, but rarely use h4, h5 and h6.

In a website that is semantically sound and dares to run naked (not using CSS for layout), the title tag not only has semantics but also has some style functions. But with the popularity of CSS today, there is actually not much difference between using h1 and h6, and the appearance can be adjusted anyway.

As a title tag, it has a more powerful function. The title element means a high-value keyword on the page, so h1, h2 and h3 are frequently used to weight keywords. However, the weights of h4, h5 and h6 are not high, even lower than strong and em, so they are rarely used. It is estimated that their authority levels are as follows:

h1 > h2 > h3 > strong > em > h4 > h5 > h6

When to use thead, tbody or tfoot?

I originally thought that thead is used as a table header to place table title units, such as th; tbody is used to place table content, and tfoot is used for table description. In fact, my understanding is not quite correct. These tags are actually dispensable.

Because the browser generally needs to download the entire table before it starts to display, which affects the user's reading in the era of table layout. Therefore, these tags are used to divide the table into multiple parts, and the downloaded part can be displayed. In addition, it is also for the header and footer to appear on each page when printing long tables.

Omit optional tags

Those who have used Dreamwave should remember that when you create an HTML file, the default code is as follows.

We will put the title, external CSS and JavaScript references in the head area, and the content displayed on the page in the body, but in fact, html, head and body are all optional tags.

After removing these optional tags, it looks weird, but the page is displayed normally and can pass the W3C check. I have already done this on my blog. But one thing to note is that if you want to write the page in XHTML, please keep the html tag because you still need the following code as a declaration.

b label and i label

Many people think that the fate of the b tag and the i tag is the same as the u tag, and they are classified as "deprecated tags" by W3C. However, in the HTML5 specification, these two tags are still recommended for use. I have always known this and have argued with my friends about it. But I have never understood how they are defined in HTML5.

hr tag

hr is a line, a horizontal line that divides the content. I always think hr is a lame thing, the line drawn is not easy to handle with CSS, and it is useless. In fact, hr is the dividing line of the article in semantics, which completely divides the context of the article and makes them unrelated.

Its function is like the dividing line in many log blog posts, except that hr is also semantically understandable to crawlers.

Why do we usually use a tag as a button?

It's understandable that it's not input type="button" because the hover effect can't be seen on lower versions of IE. But why is it an a tag instead of a span? Is it right to make an a tag into a button without an href? I haven't thought about it yet. I used to do it like a reflex.

Afterword

Google's HTML/CSS Code Style Guide is a short and concise code writing manual with suggestions. It is very useful, but please don't be superstitious. For example, there is an item in it that recommends using two spaces for indentation, which may not be feasible in many teams. Our team is still using tabs.

Many HTML suggestions in this manual are for HTML5, but here we use HTML style instead of XHTML style. In many places, the code is omitted to weaken the readability of the code. You should make your own judgment on the trade-offs.