This is the 25th day of my participation in Gwen Challenge. For more details, see Gwen Challenge.

HTML hypertext Markup Language (HTML) is a standard markup language for creating web pages. HTML is a fundamental technology that, along with CSS and JavaScript, is used by many websites to design user interfaces for web pages, web applications, and mobile applications.

HTML is a skeleton of a WEB application, although very easy to use, but still many need to be aware of the rules, probably because of not following the rules lead to the practice of the WEB application is affected, now for the project development, a lot of rules can be done automatically by program, for beginners or it is necessary to look at.

1. Avoid inline styles

While modern browsers or other assistive devices may be able to handle inline attributes and tags effectively, some older devices cannot, which can result in some strange web page displays. Extra characters and text can affect search engines’ ability to include web pages, and inline styles can make maintenance difficult. The only time inline styles are used is to change styles dynamically, such as some style manipulation done from the Javascript side, rather than as a way to set HTML styles.

2. Add key styles first, then others

If you put all the styles of your site in one file, it can take a long time to fetch and parse, which can delay your site rendering. It is best practice to include the main and base styles of the site in the style tag in the header, or to load a smaller style sheet first, loading only the styles required for the first rendering, and then adding the Deferred attribute to the secondary style file.

Secondary styles can be styles used for user interaction, such as pop-up layers, drop-down lists, and notification components, or for content that the user needs to scroll to the bottom of the page.

3. Lazy loading of images

Some browsers will only load images in the view, if you have a page of 100 images, only the images in the view will be loaded, and as the user scrolls, other images will load accordingly. The best practice is to specify load properties with lazy values. If you want to use this feature in all browsers, you can use Polyfill.

4. Avoid excessive HTML

Too much HTML is not good, use a strategy that allows enough HTML to be loaded for initial rendering and the rest to be placed on a different page or retrieved later by scrolling or clicking buttons in Javascript. Because too much HTML means longer parsing times and is often unnecessary.

5. Stop supporting Internet Explorer of earlier versions

In WEB projects, support for various compatibility issues, especially for lower versions of IE is a hell of an experience. I recommend that you discontinue compatibility with lower versions of IE, and guide users to upgrade unless they absolutely have to. The good news is that Microsoft will discontinue support for IE11 in mid-2021.

6. Add fit to the image

The Image TAB allows you to specify multiple resources for different window sizes, which makes it faster to load the appropriate image and use different images for the appropriate view size. This makes it faster to load smaller images for mobile devices and larger images for desktops.

<picture>
    <source srcset="apple-360.jpg" media="(min-width: 800px)">
    <img src="apple.jpg" alt=""/>
</picture>
Copy the code

7. Specify multiple backup sources for the media

For video and audio, always set up multiple sources.

< Audio controls> <source SRC ="audio. Mp3 "type="audio/mpeg"> <source SRC ="audio. Ogg" type="audio/ogg"> <p> Your browser does not support HTML5 Audio tag </p> </audio> < Video controls width="360"> <source SRC ="movie.webm" type="video/webm"> <source SRC ="movie.mp4" Type ="video/mp4"> <p> Your browser does not support HTML5 video tag </p> </video>Copy the code

8. Always specify preloading options for the video

The preload attribute can be used to lazily load the video on the page. It is best practice to always include this attribute because different browsers have different default values. Preload =” None “will prevent the browser from loading the video immediately with the poster set image.

<video controls preload="none" poster="movie.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>
Copy the code

9. Always specify the button type

Simple rule that always specifies the type of button. If you do not specify a button, the default submit type will be used, which is probably not the behavior you want. In general, the button type is always specified, even if it is the default.

</button> <input type="text"/>Copy the code

10. Videos are sometimes better than GIFs

Usually when you need to show animated content, the first thing that comes to mind is giFs rather than videos, thinking that GIFs can be smaller and videos bigger. However, depending on the format of the video, the video may not be bigger than the GIF file. In this case, the video may be a better choice, so please compare the video and GIF before making a decision.

11. Avoid writing Javascript

Many SDKS add their script code to the tag of the site, but you can actually put this code in an external script file, load it externally, and control how it loads. In general, you should avoid mixing Javascript code with HTML.

12. The script tag is placed at the bottom of the page

This rule is unavoidable for browsers that do not support some optimization properties, such as defer and Async. In general, if HTML and CSS are not asynchronous or delayed, it is best to leave the script tags last to ensure that the browser does not block when it has finished parsing and rendering the HTML and CSS. Script tags block HTML parsing.

13. Reduce the number of external links

Always try to combine external stylesheets and script files into a compressed file and set dnS-prefetch, preload/prefetch, defer, Async properties to tell the browser what to do with them.

  • dns-prefetch: DNS for pre-resolving the ADDRESS of the CDN
  • prefetch: Preloads resources (images, videos, JS, and CSS) that may be used by users to the disk during the idle time of the browserdiskReads the
  • preload: You can preload scripts, styles, and other resources needed for the current page and store them in memory without waiting for them to be parsedscript 和 linkTags are loaded. This mechanism allows resources to be loaded and available earlier and is less likely to block initial rendering of the page.
  • defer: After all elements are parsed, the DOMContentLoaded event is triggered.
  • async: After the current Javascript script is loaded (execute immediately after loading, execution order is not fixed, suitable for independent and undependent code)
 <link rel="dns-prefetch" href="//www.devpoint.cn" />
 <link rel="preload" href="./app.css" as="style" />
<link rel="preload" href="./app.js" as="script" />
<link rel="prefetch" href="./app.js" />
<script async />
<script defer/>
Copy the code

14. Always add image Alt

If the image fails to load, the Alt tag displays alternate text, providing additional context for the image, which is SEO friendly.

15. An H1 tag

You are advised to use one H1 tag for each HTML page. If the website logo is used, you can include the LOGO in the H1 tag. Of course, there is no problem if multiple H1 tags are used.

16. Font preloading

If the page has a font file, it is recommended to use the prefetch/preload attribute in the tag.

17. Define reactive meta

You should always make sure your site is responsive so that users can navigate the content smoothly and clearly, regardless of what device they are using.

<meta name="viewport" content="width=device-width, initial-scale=1" />
Copy the code

18. Always specify DOCTYPE

Including HTML attributes in the DOCTYPE ensures that the browser renders the content correctly.

<! DOCTYPE html>Copy the code

19. Page language

Specifying the language of the site will help screen readers choose the right language to render, browsers can also use it to determine whether the site should be translated automatically, and the lang attribute should describe the language in which most of the content of the site is used.

<html lang="zh">
Copy the code

20. Use it correctlydata-*

The tag data attribute is the way most frameworks or plug-ins prefer to pass data, but do not use the data attribute to pass sensitive data; other attributes may be more appropriate.

21. The use oftimeThe label

An important time is displayed using the Time TAB, which makes it easy to click to add to the calendar.

<time datetime="20:00">20:00</time>
Copy the code

22. Add the favicon

The browser automatically gets the page icon for you, and you don’t even need to specify a link for the Favicon, just put it in the root of the site. Whatever you do, always be sure to include site ICONS of various sizes and targets for your site, and set different ICONS for different devices and browsers, using online tools to make different sizes.

23. Valid DOM tags

Modern browsers try to pair tags, but it may not be correct. Therefore, it is recommended that all HTML tags be lowercase and closed (this can be done automatically with development tools).

24. Use title correctly

Use a

tag for the page, the title is displayed in the browser TAB, and the title can be clearly retrieved when sharing the URL.

25. Escape special characters

HTML has some special characters “HTML Special Symbol Comparison Table”, must be escaped when using, otherwise, may damage the page rendering.

conclusion

The above suggestions are general rules, making large and complete HTML rules is of great significance for team project development.