In-depth analysis of the role of HTML  comment tags

When we check the source code of many websites, we will find a lot of comments, especially the Sina.com comment tag which is used to insert comments in the source document. The comment text is generally used as a reference for programmers, especially for the source code of large-scale websites developed by multiple people. If there are no comments, the code written by Programmer A cannot be recognized by Programmer B. In this way, if Programmer A leaves, the code he wrote will be difficult to maintain. With comments, it will be easier to understand the code.

Sina.com source code HTML comments (green text is comments)

HTML comments are ignored by the browser, and HTML comments written directly inside the website source code will not be displayed on the front end. As shown in the figure above, the green parts are comments and will not be displayed. Through the green text above, we can know what this code means and where the code starts and ends. The HTML comment format is as follows:

Copy code

The code is as follows:

Advanced functions of HTML comments

As the name suggests, HTML comments are a type of comment that explains the internal structure of a program. In fact, this is only the most basic function, but it is precisely because of these functions that are ignored by front-end browsers that modern web programs have conducted more in-depth exploration of annotations, making annotations more and more useful.

Effect on CSS/JS in the page

HTML comments are also used for Javascript and CSS codes within a page. Many older browsers or browsers that cannot recognize Javascript and CSS will often display text if the code is written directly, which greatly affects reading.

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
body{color:#F00}
</style>
<script type="text/javascript">
alert('Welcome to www.jb51.net');
</script>
</head>
<body>
<p>Jbzj!</p>
</body>
</html>

The above code does not use HTML comments. If it is accessed in some old mobile browsers and versions below IE6, the following text will be displayed:

Copy code

The code is as follows:

body{color:#F00} alert('Welcome to www.jb51.net');</p> <p>Jbzj!

Even if these older browsers do not recognize tags such as <style> and <script>, these tags will not be displayed according to the tag non-display principle and will be treated as unrecognizable custom tags. The text inside these tags will be displayed directly. There is no doubt that these CSS and Javascript codes do not want to be displayed, so if you use the following commented code, CSS and Javascript will not be displayed.

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
<!--
body{color:#F00}
--!>
</style>
<script type="text/javascript">
<!--
alert('Welcome to www.jb51.net');
--!>
</script>
</head>
<body>
<p>Jbzj!</p>
</body>
</html>

HTML comments are used in MVC design

Many modern open source code projects, especially those in the MVC web design style, insert some comments into the traditional HTML code, and then add content such as advertisements to these comments.

Discuz uses HTML comments to insert code and judge Discuz code