HTML comments are notes written inside the source code. Browsers ignore them, so they do not appear on the web page. Developers use comments to explain sections, temporarily disable markup, leave reminders, or make a long document easier to scan.
A comment starts with <!-- and ends with -->. Everything between those two markers is treated as a comment by the browser.
<!-- This text is a comment. The browser will ignore it. -->
<h1>Welcome to My Page</h1>
<p>This paragraph is visible in the browser.</p>
A comment can stay on one line or span multiple lines. Single-line comments are useful for short notes. Multi-line comments are useful when explaining a larger section or temporarily hiding a block of HTML during testing.
<!-- Single-line comment -->
<p>This paragraph is active.</p>
<!--
Multi-line comment:
The following tl-card is used on the home page.
Keep the heading short on mobile screens.
-->
<article>
<h2>HTML Tutorial</h2>
<p>Learn the building blocks of web pages.</p>
</article>
Comments are often used while debugging. You can wrap an element in a comment to stop it from rendering without deleting the code. This is helpful when testing layouts, ads, scripts, or optional content.
<h2>Product Details</h2>
<p>This content is visible.</p>
<!--
<div class="promo-banner">
<p>Limited-time offer!</p>
</div>
-->
Comments should make code clearer, not noisier. Write comments when the reason behind the markup is not obvious. Avoid repeating what the tag already says.
<!-- Good: explains why this section exists -->
<!-- Featured articles are shown above the fold for editorial campaigns. -->
<section>
<h2>Featured Articles</h2>
</section>
<!-- Bad: repeats the obvious -->
<!-- This is a paragraph -->
<p>Read our latest guide.</p>
HTML has semantic elements for quotations and source references. These elements do more than style text: they describe the meaning of the content. Use them when you quote a person, article, book, website, report, or any other source.
The main quotation-related elements are <q>, <blockquote>, <cite>, <abbr>, and <address>.
The <q> element is used for short quotations that appear inside a sentence or paragraph. Most browsers automatically add quotation marks around the quoted text.
<p>
The teacher said, <q>Practice a little HTML every day.</q>
</p>
The <blockquote> element is used for longer quotations that stand apart from the surrounding paragraph. When the quote comes from an online source, add a cite attribute with the source URL.
<blockquote cite="https://www.w3.org/">
<p>The power of the Web is in its universality.</p>
</blockquote>
The <cite> element represents the title of a creative work, such as a book, article, research paper, poem, movie, song, website, or painting. It should not be used for a person's name by itself.
<p>
My favorite programming book is <cite>The Pragmatic Programmer</cite>.
</p>
<blockquote>
<p>Programs must be written for people to read.</p>
<footer>From <cite>Structure and Interpretation of Computer Programs</cite></footer>
</blockquote>
The <abbr> element marks an abbreviation or acronym. Add a title attribute to show the full form. This helps readers, search engines, and assistive technologies understand shortened terms.
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is used to structure web pages.
</p>
<p>
<abbr title="World Wide Web Consortium">W3C</abbr> publishes web standards.
</p>
The <address> element represents contact information for the nearest article or page. It can contain an author's email, website, physical address, social profile, or support contact. It should not be used for every postal address on a page unless that address is contact information.
<article>
<h2>HTML Comments and Quotations</h2>
<p>Written for beginners learning semantic HTML.</p>
<address>
Written by <a href="mailto:editor@example.com">Tutorial Editor</a><br>
Visit: <a href="https://example.com">example.com</a>
</address>
</article>
Use the correct element based on the meaning of the text. The browser may style these elements differently, but their main purpose is semantic structure.
| Element | Purpose | Example Use |
|---|---|---|
<q> |
Short inline quotation | A quote inside a paragraph |
<blockquote> |
Long block-level quotation | A quoted passage from an article |
cite attribute |
Machine-readable source URL | <blockquote cite="..."> |
<cite> |
Title of a creative work | Book, article, movie, report, website title |
<abbr> |
Abbreviation or acronym | HTML, CSS, API, W3C |
<address> |
Contact information | Author email or organization contact |
The following example combines comments, quotations, citations, abbreviations, and contact information in one semantic article section.
<!-- Article introduction for the HTML learning series -->
<article>
<h1>Why Semantic HTML Matters</h1>
<p>
<abbr title="HyperText Markup Language">HTML</abbr> gives meaning
to the structure of a web page.
</p>
<p>
As many developers say, <q>Good markup is the foundation of good websites.</q>
</p>
<blockquote cite="https://www.w3.org/">
<p>The Web is designed to work for all people, whatever their hardware, software, language, location, or ability.</p>
<footer>Source: <cite>World Wide Web Consortium</cite></footer>
</blockquote>
<address>
Contact the editor at
<a href="mailto:editor@example.com">editor@example.com</a>.
</address>
</article>
HTML comments are not displayed on the page, but users can still see them by viewing the page source or inspecting the HTML. Never put sensitive information in comments.
<q> is for short inline quotes inside a sentence. <blockquote> is for longer quotes that should stand as a separate block.
The cite attribute stores the source URL for a quote. It is machine-readable metadata and is usually not shown visually by browsers.
No. The <cite> element marks the title of a work, while the cite attribute provides a source URL for <q> or <blockquote>.
Explore 500+ free tutorials across 20+ languages and frameworks.