HTML · Lesson 5

Quotations and Comments

Quoting people and leaving notes in your code

This lesson finishes the HTML basics with two handy tools: tags for quoting what someone said, and comments for leaving notes to yourself inside your code.

What you'll learn

  • How to show a short quote inside a sentence.
  • How to show a longer quote as its own block.
  • How to leave notes in your code that visitors never see.

Let's quote and take notes

News stories quote people all the time. HTML has a tag for a short quote inside a sentence, and another for a longer quote that stands on its own. It also lets you write comments: notes in your code that the browser skips completely.

Think of an editor working on a news draft. The story includes what people said, some of it short and some long. The editor also sticks notes on the draft, like "add a photo here". Those notes help the team, but they're peeled off before the story is printed, so readers never see them. In HTML, those sticky notes are comments.

Readers only ever see the first version. The yellow sticky notes are comments: they stay in your code for you and your team, and the browser never shows them.

A closer look

Short quote or long quote

<q> is for a short quote inside a sentence. The browser adds the quote marks for you, so don't type your own. <blockquote> is for a longer quote. It sits on its own lines and is pushed in from the left, so it stands apart from your own words.

How comments work

A comment starts with <!-- and ends with -->. Everything between them is skipped by the browser, even across several lines. People use comments to leave to-do notes, to label the parts of a long page, and to hide a piece of code for a while without deleting it. That last one is called commenting out.

Hidden, but not secret

Visitors don't see comments on the page, but anyone can read them by right-clicking a page and choosing View Page Source. So never put passwords or private information in a comment.

Let's build it

Let's write an announcement for Front Page Bytes. Each step shows the whole page, and the new lines are highlighted.

A short quote

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Our New Office Opens Monday</h2>    <p>The editor said <q>we're adding more tech news</q>.</p>  </body></html>
What you see

<q> wraps what the editor said, right in the middle of the sentence. Look at the mini browser: the quote marks appear even though we didn't type any.

A long quote

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Our New Office Opens Monday</h2>    <p>The editor said <q>we're adding more tech news</q>.</p>    <blockquote>Our goal is simple: make tech news easy for everyone to read.</blockquote>    <p>— The Front Page Bytes team</p>  </body></html>
What you see

<blockquote> shows the team's full statement as its own block, pushed in from the left. The paragraph below says who said it.

Leave a note for yourself

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <!-- TODO: add a photo of the new office -->    <h2>Our New Office Opens Monday</h2>    <p>The editor said <q>we're adding more tech news</q>.</p>    <blockquote>Our goal is simple: make tech news easy for everyone to read.</blockquote>    <p>— The Front Page Bytes team</p>  </body></html>
What you see

The new line is a comment: a reminder to add a photo later. Compare the mini browser with step 2. Nothing changed, because the browser skips comments.

Hide a line without deleting it

Your code
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <!-- TODO: add a photo of the new office -->    <h2>Our New Office Opens Monday</h2>    <p>The editor said <q>we're adding more tech news</q>.</p>    <blockquote>Our goal is simple: make tech news easy for everyone to read.</blockquote>    <p>— The Front Page Bytes team</p>    <!-- <p>Free coffee for every visitor!</p> -->    <p>Everyone is welcome to visit.</p>  </body></html>
What you see

The free-coffee paragraph is wrapped in a comment, so it doesn't appear on the page. To bring it back later, just remove <!-- and -->.

Quick notes

<q> Short quote inside a sentence 
He said <q>hello</q>.

How to use

  • Wrap a short quote inside a sentence.
  • The browser adds the quote marks for you.

Examples

  1. A short quote from a person.

    <p>The mayor said <q>Classes resume on Monday.</q></p>

  2. A short quote inside a story.

    <p>Fans called it <q>the best phone this year</q>.</p>
<blockquote> Long quote on its own 
<blockquote>A longer statement.</blockquote>

How to use

  • Wrap a long quote. It gets its own indented block.
  • Put <p> tags inside it for quotes with several paragraphs.

Examples

  1. A long statement in a news story.

    <blockquote>  <p>We worked on this phone for two years.</p></blockquote>

  2. A long quote with two paragraphs.

    <blockquote>  <p>First part of the quote.</p>  <p>Second part of the quote.</p></blockquote>
<!-- --> Comment: a note the browser skips 
<!-- TODO: add a photo -->

How to use

  • <!-- Starts the note.
  • --> Ends the note. Without it, the rest of the page is hidden.
  • Comments can go anywhere in your HTML.

Examples

  1. A reminder for yourself.

    <!-- TODO: add a photo -->

  2. A label for a part of the page.

    <!-- Weather section --><h2>Weather Today</h2>
<!-- <p>…</p> --> Hiding code for a while 
<!-- <p>Old text</p> -->

How to use

  • Wrap the code you want to switch off for now.
  • Remove <!-- and --> to bring it back.

Examples

  1. Hide an old paragraph for now.

    <!-- <p>Old text</p> -->

  2. Hide a picture while you test the page.

    <!-- <img src="banner.jpg" alt="Banner"> -->

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

Typing your own quote marks inside <q>

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <p>The editor said <q>"we're adding more tech news"</q>.</p>  </body></html>
What you see

<q> already adds quote marks, so typing your own gives you two sets.

Tip: Let <q> add the marks: <q>we're adding more tech news</q>

Forgetting to close a comment

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h2>Our New Office Opens Monday</h2>    <!-- TODO: add a photo    <p>The office is on the 3rd floor.</p>    <p>Everyone is welcome to visit.</p>  </body></html>
What you see

Without -->, the browser thinks the comment never ends. Everything after <!-- disappears, including the two paragraphs.

Tip: Every comment needs both ends: <!-- your note -->

Putting secrets in a comment

The mistake
<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <!-- Admin password: frontpage123 -->    <h2>Members Area</h2>    <p>Please log in to continue.</p>  </body></html>
What you see

The password doesn't show on the page, so it seems hidden. But comments are sent to every visitor along with the rest of the code.

Tip: Never put passwords or private information in comments. Anyone can open View Page Source and read them.

Test your knowledge

Edit the code on the left. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

  1. Wrap “practice makes perfect” in <q>.
  2. Turn the second paragraph into a <blockquote>.
  3. Add a comment with a note to yourself.
Your code
What you see
Try an exercise

Recap

  • <q> wraps a short quote inside a sentence, and the browser adds the quote marks.
  • <blockquote> shows a longer quote as its own indented block.
  • Comments go between <!-- and -->. The page never shows them, but they aren't secret.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

  • WHATWG. HTML Living Standard (official specification). Open reference
  • LibreTexts. Web Site Design: HTML (2022, open textbook). Open reference