Advanced Text Formatting
Overview
We already know `<strong>` and `<em>`. But HTML provides a whole suite of highly specific text formatting tags. These are incredibly useful for technical documentation, blogs, and scientific papers.
By using the correct tag, you give the browser exactly the right context to display it beautifully (and accurately for screen readers).
Syntax
When you want to quote someone else's work, use `<blockquote>`. It usually indents the text automatically. Inside or near it, use `<cite>` to name the author or source.
<!-- A large quote block -->
<blockquote cite="https://en.wikipedia.org/wiki/Steve_Jobs">
Stay hungry, stay foolish.
</blockquote>
<!-- Citing the source -->
<p>— <cite>Steve Jobs</cite></p>Normally, HTML ignores extra spaces and line breaks. If you want to display computer code EXACTLY as you typed it (with all the spaces and enters), wrap it in `<pre>` (Preformatted). Inside that, use `<code>`.
<!-- <pre> preserves all the spaces and enters exactly! -->
<pre>
<code>
function sayHello() {
console.log("Hello!");
}
</code>
</pre>Use `<sub>` to push text slightly below the baseline (great for chemical formulas) and `<sup>` to push it above (great for exponents in math).
<p>Water is H<sub>2</sub>O</p>
<p>Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>Common Pitfalls
- Don't use <blockquote> just to indent a paragraph. Only use it for actual quotations. If you just want an indent, use CSS (margin-left).
Real-World Example
Formatting a keyboard shortcut instruction:
<p>
To save your document, press
<!-- <kbd> is used for Keyboard input! -->
<kbd>Ctrl</kbd> + <kbd>S</kbd> on Windows, or
<kbd>Cmd</kbd> + <kbd>S</kbd> on Mac.
</p>