# How to Block Quote in HTML, CSS, Word, and Popular Writing Tools A **blockquote** is a way of visually setting apart quoted text — signaling to the reader (and to machines) that a chunk of text is being cited from another source. Depending on where you're working, the method changes significantly. HTML has a dedicated tag for it. CSS controls how it looks. Word processors have toolbar buttons. Markdown uses a simple symbol. Each approach follows its own rules, and the right one depends entirely on where your content lives. ## What Is a Block Quote, Exactly? A **block quote** (or blockquote) is a formatted quotation that stands apart from the main body of text — typically indented, sometimes styled differently, and used when quoting a substantial passage from an external source. It's distinct from an **inline quote**, which sits within a sentence and usually uses quotation marks. Block quotes are for longer passages or cases where you want to give the quotation its own visual weight. In web contexts, block quotes also carry **semantic meaning** — the `
` HTML element tells browsers and screen readers that this content is attributed to an outside source, not the page author. ## How to Block Quote in HTML The standard HTML element is `
`. It wraps the quoted content and signals its origin to browsers and assistive technology. ```html
This is the quoted passage you want to highlight.
``` The optional `cite` attribute accepts a URL pointing to the source. It isn't displayed visually by default, but it's useful for **SEO**, accessibility, and semantic clarity. If you want to add visible attribution beneath the quote, the correct markup pairs `
` with a ` ` and ` `: ```html
Design is not just what it looks like. Design is how it works.
— Steve Jobs ``` This is the semantically correct way to credit a source in HTML5. Using ` ` inside ` ` adds another layer of accuracy. ## How to Style a Block Quote with CSS By default, most browsers indent `
` elements with left and right margins, but the visual result is plain. CSS lets you fully control the appearance. ```css blockquote { border-left: 4px solid #ccc; margin: 1.5em 0; padding: 0.5em 1em; color: #555; font-style: italic; } ``` Common styling choices include: - **Left border bar** — a colored vertical line on the left edge (very common in editorial design) - **Background color** — a light tinted box to visually separate the quote - **Font changes** — italics, larger type size, or a different font family - **Custom quotation marks** — added via CSS `::before` and `::after` pseudo-elements The visual approach you choose affects how prominently the quote stands out on the page. A bold left border reads as journalistic; a centered, large italic font reads as decorative or inspirational. Neither is wrong — they serve different tones. ## How to Block Quote in Markdown 🖊️ Markdown uses a simple prefix character. Place a `>` at the beginning of any line to turn it into a block quote: ``` > This is a block quote in Markdown. > It can span multiple lines. ``` For **nested block quotes**, add a second `>`: ``` > First level of quoting. >> Nested quote inside the first. ``` Markdown block quotes render as `
` elements in HTML when processed by static site generators like Jekyll, Hugo, or tools like GitHub, Notion, and many documentation platforms. What the final output looks like depends on the CSS applied to those rendered elements — the Markdown symbol itself doesn't control styling. ## How to Block Quote in Microsoft Word In Word, there's no single "blockquote" button by default, but you can achieve it in a couple of ways: **Using paragraph styles:** 1. Select the text you want to quote 2. Open the **Styles** pane (Home tab → Styles group) 3. Look for a "Quote" or "Block Text" style — some templates include one 4. If it's not there, create a custom style with increased left and right indentation **Using manual indentation:** 1. Select the text 2. Go to **Home → Paragraph → Increase Indent**, or drag the indent markers on the ruler 3. Optionally apply italic formatting or change the font color For consistent formatting across a document, defining a named **paragraph style** is better than manual indentation — it keeps things uniform and makes bulk editing easier later. ## How to Block Quote in Google Docs Google Docs doesn't have a dedicated blockquote style, but the process is similar: 1. Select your text 2. Use **Format → Align & Indent → Indentation Options** 3. Set a left indent (and optionally right indent) of around 1–1.25 inches 4. Apply italic formatting if desired Alternatively, if you're using a Docs template that includes a "Quote" paragraph style, it will appear in the **Styles dropdown** in the toolbar (where it normally says "Normal text"). ## The Variables That Determine Your Approach 🔍 Where block quoting gets complicated is when you consider how many different environments people write and publish in: | Environment | Method | Controls Styling? | |---|---|---| | Raw HTML | `
` tag | Via CSS | | CSS stylesheet | Styling rules | Yes, directly | | Markdown | `>` prefix | Depends on renderer | | WordPress (Block Editor) | Quote block | Theme controls appearance | | Microsoft Word | Paragraph style or indent | Yes, within the doc | | Google Docs | Manual indent or style | Yes, within the doc | | Email clients | Manual formatting | Very limited | The **gap between intent and output** is widest when working in Markdown or CMS environments — you write the quote correctly, but the final appearance depends on CSS you may or may not control. Someone working in a custom-built site has full styling control. Someone publishing on a platform like Medium or Substack is working within the constraints of that platform's design system. Your output format, level of code access, and the publishing environment you're working in all shape which technique applies — and how much control you'll actually have over the result.