All topics › Unit 1 · HTML Fundamentals
Topic 6 · 6 of 43
Text Formatting
All in one: every text element, side by side
What this example compares
- Headings:
<h1>to<h6>as an outline, against a skipped level and a fake<p><b>heading - Breaking text:
<p>vs<br>vs<br><br>vs<hr> - What happens to what you type:
<pre>vs<p>vs a comment<!-- --> - Logical vs physical:
<strong>vs<b>,<em>vs<i> - Setting words apart:
<mark>vs<small>vs<abbr title> - Lines through and under:
<del>vs<strike>,<ins>vs<u> - Lower and higher:
<sub>vs<sup>vs no tag - Quotations:
<q>vs<blockquote>, and the<cite>element vs theciteattribute - Computer text:
<code>vs<pre><code>vs<kbd>vs<samp>vs<var>, and<to show a tag - Contact details:
<address>in a<footer>vs an ordinary<p> - Obsolete tags:
<strike>,<font>,<center>,<big>,<tt>,<marquee>, each next to its modern replacement
Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.
Loading the example…
What you should see
You should see eleven panels. Panel 1 shows six heading sizes stepping down, a page that jumps from h1 to h4, and a bold paragraph pretending to be a heading. Panel 2 shows two paragraphs, an address broken into lines, a look-alike made with two <br>, and a grey line between two topics. In panel 3 the <pre> table keeps its columns while the same text in <p> runs on as one line, and the comment card shows only "One. Two. Three.". Panels 4 to 9 show the look-alike pairs: bold and bold, italic and italic, a yellow highlight, small print, struck-through and underlined fees, H2O and x2, curly quotation marks (two sets in the mistake card), an indented quotation and monospace code. Panel 10 shows the contact details in italics, and in panel 11 each red obsolete tag looks just like its green modern replacement, with two "Admissions open!" lines sliding across the last card. There is no script, so the Console stays empty.
Quick check: in panel 8, which cite can you see on the screen, the element or the attribute?
The element: <cite>Clean Code</cite> shows the title of the book in italics. The cite attribute on <blockquote> holds the URL the quotation came from, and the browser shows it nowhere on the page.