HTML is a very popular scripting or coding language used to create web pages. HTML provides different tags in order to create different units like textbox, color, paragraph, list, etc. While using HTML we may need to put some information about the code and tags. In this tutorial, we will learn how to create comments.
Single Line Comment
HTML comments are created with the <!-- and --> tags. <!-- is used to specify the start of the comment. --> is used to specify the end of the comment. The content between start and end tags of comment will be omitted by the browser and they will not show to the browser tab to the user. We can create a single line comment by using comment tags in the same line.
<!DOCTYPE html>
<html>
<head> <!-- Document Header -->
<title>This is document title</title>
</head>
<body> <!-- Document Body -->
<p>Document content goes here.....</p>
</body>
</html>Multiline Comment
We can use HTML comments in a multiline way. If we have a lot of information to write into comment we can use HTML multiline comment. The start tag <!-- and end tag --> will surround multiple lines like below. We will see that we can use comment tags in the same line of the comment text or in a new line too.
<!DOCTYPE html>
<html>
<head> <!-- This is a
Multiline HTML Tag
-->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
<!-- This
is a
Multiline
HTML
Tag -->
</body>
</html>Conditional HTML Comment
Conditional HTML comments are only supported y the Microsoft Internet Explorer and Edge. They are supported from version 5 of the Internet Explorer and all versions of the Edge. Conditional HTML comments will only exist if the running browser is Microsoft Internet Explorer. If not there will be no comment in the HTML code. We will put [if IE 6] after HTML comment the start tag.
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comment Examples</title>
<!--[if IE 6]>
Only avaible for the Microsoft Internet Explorer
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>Invalid Comment Examples
Up to now, we have learned different types of comments. But while using comments we may create invalid or error-prone comments. In this part, we will list some generally error-prone comment examples.
<! -- There is a space between the exclamation mark and dash -->
<!-- There is a space between the dash and bigger sign -- >
<-- The exclamation mark does not exist -- >Comment Tag
Up to now, we have used <!-- and --> as comment start and end. HTML supports and as comment tag. But this support is dropped with the HTML version 5. So using this type of comment is very error-prone.
Comment HTML Tag/Code
We generally assume that comments should contain human-readable or normal language text. But we can use comments to comment on normal HTML code or tags too. This can be useful if we want to try some HTML elements and tags by enabling and disabling the element and tag. In this following example, we will comment on the button HTML tag.
<!DOCTYPE html>
<html>
<head>
<title>Comment HTML Tag</title>
</head>
<body>
<!-- <button type="button">Click Me!</button> -->
<!--
<button type="button">Click Me Too!</button>
-->
</body>
</html>Comment JavaScript Code/Script
JavaScript is a defacto web scripting language where the code is executed on the client browser. While developing JavaScript code we may want to comment on the code in order to make some tests and checks. We can use HTML Comment tags to JavaScript code as below.
<!DOCTYPE html>
<html>
<head>
<title>Commenting JavaScript Code</title>
<script>
<!--
document.write("Hello Poftut!")
//-->
</script>
</head>
<body>
<p>This is the body</p>
</body>
</html>Comment CSS Code
Cascading Style Sheet or CSS can be commented with the HTML comment tags too. This will disable the CSS code effect on the HTML code and can be useful to test some CSS code easily without coding again and again.
<!DOCTYPE html>
<html>
<head>
<title>Commenting CSS</title>
<style>
<!--
.test {
border:2px solid #5a7d49;
}
//-->
</style>
</head>
<body>
<div class = "test">Hello , Poftut!</div>
</body>
</html>