The comment specification of HTML5

Author：Chuan Chen 阅读数：51111人阅读分类： HTML

Basic Syntax of HTML5 Comments

HTML5 comments start with , with the comment content placed between these markers. Comments are not displayed in the browser but appear in the source code.

<!-- This is a single-line HTML comment -->

Multi-line comment syntax:

<!-- 
  This is a multi-line HTML comment
  It can span multiple lines
  Suitable for longer descriptions
-->

Common Uses of Comments

Code Function Explanation

<!-- Main navigation bar starts -->
<nav class="main-nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<!-- Main navigation bar ends -->

Marking Code Blocks

<!-- Product display section -->
<section id="products">
  <div class="product-card">
    <h3>Product Name</h3>
    <p>Product Description</p>
  </div>
</section>

Temporarily Disabling Code

<!--
<aside class="sidebar">
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</aside>
-->

Best Practices for Comments

Comment Placement Standards

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding declaration -->
  <meta charset="UTF-8">
  
  <!-- Viewport settings -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Document Title</title>
</head>

Comment Content Standards

<!-- 
  User login form
  Includes username and password input fields
  Submit button triggers AJAX request
-->
<form id="login-form">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

Conditional Comments (Deprecated but Worth Knowing)

<!--[if IE]>
  <p>You are using Internet Explorer</p>
<![endif]-->

Notes on Comments

Special Characters in Comments

<!-- Be cautious when using special characters in comments -->
<!-- This comment contains < > & and other special characters -->

Nested Comment Issues

<!-- 
  Outer comment
  <!-- Inner comment will cause problems -->
  Outer comment continues
-->

Comments and SEO

<!-- Search engines do not index comment content -->
<!-- Important keywords should not be placed solely in comments -->

Comments in Team Collaboration

Code Review Markers

<!-- TODO: Add mobile style adaptation -->
<div class="responsive-box">
  <!-- FIXME: Layout issue in IE11 -->
  <div class="ie-fallback"></div>
</div>

Version Change Logs

<!-- 
  Change log:
  2023-05-01 - John - Initialized component
  2023-05-15 - Jane - Added animation effects
  2023-06-01 - Mike - Fixed edge-case bug
-->
<div class="animated-widget"></div>

Comments and Frontend Frameworks

Comments in Vue.js

<template>
  <!-- Main container -->
  <div class="container">
    <!-- User profile display -->
    <user-profile v-if="userLoggedIn" />
  </div>
</template>

Comments in React JSX

<div className="app-container">
  {/* Navigation bar component */}
  <NavBar />
  
  {/*
    Main content area
    Includes article list and sidebar
  */}
  <main>
    <ArticleList />
    <Sidebar />
  </main>
</div>

Comment Tools and Automation

Documentation Generation Tools

<!-- 
  @module UserProfile
  @desc User profile display component
  @prop {Object} user - User data object
  @prop {String} user.name - Username
  @prop {Number} user.age - User age
-->
<div class="user-profile">
  <h2>{{ user.name }}</h2>
  <p>Age: {{ user.age }}</p>
</div>

Removing Comments During Build

// Webpack configuration example
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          minimize: {
            removeComments: true
          }
        }
      }
    ]
  }
}

Comments and Accessibility

ARIA Label Comments

<!-- 
  Use aria-label to provide additional info for screen readers
  Visually labeled elements may not need this
-->
<button aria-label="Close popup" class="close-btn">×</button>

Skip Link Comments

<!-- Skip navigation link to help keyboard users jump quickly -->
<a href="#main-content" class="skip-link">Skip to main content</a>

Performance Considerations for Comments

Impact of Excessive Comments

<!-- While comments don't affect rendering performance -->
<!-- Excessive comments increase file size -->
<!-- Consider this in mobile network environments -->
<!-- Production builds can remove them via tools -->

Sensitive Information Leaks

<!-- Avoid including sensitive info in comments -->
<!-- Such as API keys, internal IPs, etc. -->
<!-- This info will be exposed client-side -->

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTML5的字符编码设置

下一篇：HTML5的空白与换行处理