checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

HTML Comments

HTML Comments

HTML comments are an essential part of web development. They allow you to include notes and explanations within your HTML code without affecting the appearance or functionality of the web page. Comments are especially useful for documentation, collaboration, and debugging. Here's how to use HTML comments effectively:

Syntax

HTML comments are enclosed within <!-- and -->. Anything between these delimiters is considered a comment and is not displayed on the web page. For example:

<!-- This is a comment -->

Purpose of Comments

  1. Documentation: You can add comments to explain how your code works, describe the purpose of specific elements, or provide instructions for other developers (including your future self).

    <!-- This div contains the site's header -->
<div id="header"></div>

  2. Debugging: Comments can help you identify and address issues within your code. You can temporarily "comment out" sections of code to isolate problems.

    <!-- <p>This paragraph is temporarily commented out</p> -->

  3. Collaboration: When working on a project with others, comments can help communicate ideas, clarify code, and maintain a consistent coding style.

    <!-- TODO: Add responsive design for mobile -->

Comment Best Practices

  1. Be Descriptive: Write comments that are clear, concise, and informative. Make it easy for others (and yourself) to understand your intentions.

  2. Avoid Redundancy: Comments should add value. Avoid stating the obvious; focus on explanations and insights.

  3. Update Comments: Keep comments up to date as you make changes to your code. Outdated comments can lead to confusion.

  4. Maintain Consistency: Establish a consistent style for your comments and stick to it throughout your code. This improves readability.

Conditional Comments

In older versions of Internet Explorer (before version 11), you could use conditional comments to target specific IE versions. However, conditional comments are no longer supported in modern browsers.

<!--[if IE 9]>
  <p>This is only visible in Internet Explorer 9</p>
<![endif]-->

In modern web development, it's generally recommended to use feature detection or other techniques instead of conditional comments to address browser-specific issues.

HTML comments are a valuable tool for web developers, helping with documentation, debugging, and collaboration. By incorporating clear and informative comments into your code, you can enhance the readability and maintainability of your web pages.

Previous The `<body>` Element
Next Headings (<h1> to <h6>)