HTML Course 4.4 Quotes, code and other inline elements (q, blockquote, code, pre, mark)

<q> – Inline Quotations

The <q> element represents short inline quotations. User agents often render it with quotation marks. It may accept the global cite attribute, pointing to the source URL.

Example: nested inline quotations:

  The editor said
  This is
    absolutely essential
  for clarity.

    

<blockquote> – Block-Level Quotations

The <blockquote> element is used for longer, block-level quotations. Commonly indented by default. It may carry a cite attribute indicating the source URL.

Example with a source citation and a nested citation paragraph:

  

    It is our choices, Harry, that show what we truly are, far more than our abilities.
  
  

    

<code> – Inline Code Fragments

The <code> element represents a fragment of computer code or machine-readable text. It is an inline element, typically rendered in a monospace font.

Use on short code samples, function names, variable names, or commands.

Example: inline code in a sentence:

  To print to the console in JavaScript, use console.log('Hello World');

    

<pre> – Preformatted Text and Code Blocks

The <pre> element preserves whitespace, line breaks and uses a monospace font. It is ideal for multi-line code snippets or text that relies on specific alignment.

When marking up code, combine <pre> with <code> for semantic clarity:

  
    // Define a function to add two numbers
    function add(a, b) {
      return a + b;
    }

    // Call the function and log the result
    console.log(add(2, 3)); // Output: 5
  

<mark> – Highlighting Text

The <mark> element represents text highlighted for reference or emphasis, often rendered with a yellow background by default. Useful for search term highlighting or drawing attention to parts of a document.

Example: highlighting search terms:

  If you search for 
  semantic HTML 
  you will find best practices for accessible markup.

    

Accessibility and Best Practices

• Always use cite on <blockquote> and <q> when you can reference a source.
• Combine <pre> and <code> for multi-line code to ensure semantics and whitespace preservation.
• Do not abuse <mark>; reserve it for genuine highlights or search matches.
• Use proper nesting: inline elements (<q>, <code>, <mark>) cannot directly contain block elements.
• Screen readers announce <blockquote> and <q> differently if ARIA roles or cite are present; test your markup for clarity.