HTML Comments and Quotations

Comments

Comments are ignored by the web browser and are not displayed on the web page. The comment tag is used to insert notes or explanations in the HTML source code, which helps when editing the code later.

Single Line Comment

<!-- This is a single line comment -->
<p>This paragraph is visible.</p>

Multi-Line Comment

<!--
    This is a
    multi-line comment
-->
<p>This paragraph is visible.</p>

Quotations

HTML provides two elements for marking up quotations — one for short inline quotes and one for longer block-level quotes.

The <q> Tag: Used for short inline quotations. Browsers automatically add quotation marks around the content.

Inline Quote — <q>

<p>She said, <q>Good Morning!</q></p>

The <blockquote> Tag: Used for longer block-level quotations. Add a cite attribute to reference the source URL.

Block Quote — <blockquote>

<blockquote cite="https://www.w3.org/">
    <p>The Web is more a social creation than a technical one.</p>
    <footer>— <cite>Tim Berners-Lee</cite></footer>
</blockquote>

Other Semantic Text Elements

HTML provides several semantic elements for marking up text with specific meaning — useful for SEO and accessibility.

Semantic Text Elements

<!-- Abbreviation with tooltip -->
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language.</p>

<!-- Citation - title of a work -->
<p>I read <cite>The Pragmatic Programmer</cite> last week.</p>

<!-- Definition term -->
<p><dfn>Semantic HTML</dfn> means using elements that convey meaning.</p>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

<!-- Inline code -->
<p>Use the <code>console.log()</code> function to debug.</p>

<!-- Sample output -->
<p>The program outputs: <samp>Hello, World!</samp></p>

<!-- Variable -->
<p>The area formula is <var>A</var> = <var>l</var> × <var>w</var></p>

Key Takeaways

HTML comments () are not displayed in the browser but are visible in the page source — never put sensitive info in comments.
Use <q> for short inline quotations — browsers automatically add quotation marks around the content.
Use <blockquote> for longer block-level quotations — add a cite attribute for the source URL.
<abbr> with a title attribute creates a tooltip showing the full form of an abbreviation.
<kbd> marks keyboard input, <code> marks inline code, and <samp> marks sample output.
Semantic text elements improve accessibility and help search engines understand your content.

HTML Comments and Quotations

Comments

Quotations

Other Semantic Text Elements

Ready to Level Up Your Skills?