HTML Tutorial
HTML Formatting
Bold, italic, mark, and small change how a phrase looks or how it is stressed.
Phrase-level tags
These elements wrap a word or a short run of text inside a paragraph. They do not start a new block. Some are semantic: they say why the text is special. Others are presentational: they mainly change the look. Prefer the semantic tags when both exist.
Click Try it in HTML under an example. That opens /html/try — a live page preview.
b versus strong
<b> makes text bold without extra meaning. <strong> marks importance. Screen readers may speak strong with more stress. Visually both are often bold. Use strong for a warning or a key term; use b when you only want weight, such as a lead sentence in an article.
Example
<p><b>Summary.</b> The path is open.</p>
<p><strong>Do not</strong> leave the marked trail after dark.</p>i versus em
<i> is italic without implying stress: a ship name, a technical term, a phrase in another language. <em> is emphasis. Changing which word is inside emcan change the meaning of the sentence.
Example
<p>The novel <i>The Lighthouse</i> is short.</p>
<p>I wanted the <em>blue</em> ticket, not the red one.</p>If you need italic only for design, CSS font-style is cleaner than wrapping every heading in i. Keep em for spoken stress.
mark, small, del, and ins
<mark> highlights text as if with a highlighter — a search hit or a relevant phrase. <small> is for side comments such as a caption or legal small print, not for making a heading look quieter. <del> is deleted text. <ins>is inserted text. Together they show an edit.
Example
<p>The keyword <mark>harbor</mark> appears twice.</p>
<p><small>Printed for staff only.</small></p>
<p>Meet at <del>ten</del> <ins>half past ten</ins>.</p>sub and sup
<sub> is subscript. <sup> is superscript. Use them for chemical formulas, footnotes, and exponents — not to fake a fancy logo.
Example
<p>Water is H<sub>2</sub>O.</p>
<p>The area is 12 m<sup>2</sup>.</p>Prefer semantic strong and em
When you mean importance, write strong. When you mean emphasis, write em. CSS can still change the look: strong does not have to stay bold, and em does not have to stay italic. The tag records the reason. Presentation can move to a stylesheet later.
| Tag | Default look | Meaning |
|---|---|---|
| strong | Bold | Importance |
| b | Bold | Offset text, no extra importance |
| em | Italic | Stress or emphasis |
| i | Italic | Offset text: names, terms, other language |
| mark | Highlight | Relevance |
| small | Smaller | Side comment |
| del | Strike | Removed |
| ins | Underline | Added |
| sub / sup | Lower / raised | Subscript / superscript |
A short mixed paragraph
Example
<p>
<strong>Warning:</strong> mix <i>solution A</i> with water (H<sub>2</sub>O)
before heating. The old time was <del>5 min</del> <ins>8 min</ins>.
</p>Do not nest every formatting tag on the same phrase. One reason per wrap is enough. Nestedstrong inside em is valid, but a paragraph full of nested tags is hard to read in the source and in the voice output.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
Stress the dose, not the whole sentence
strong is importance. em is stress in the voice of the sentence. b and i are typographic without that meaning. Prefer strong/em when the words matter.
mark is a highlight, like a highlighter on a protocol. small is a side note, not a way to hide legal text you hope nobody reads.
Example
<p>Give <strong>500 mg</strong> paracetamol.
Repeat after <em>four hours</em> if needed.
<small>Not for children under the labelled age.</small>
</p>Maths
Powers and units
sup and sub are for exponents and chemical indices. Area is m², not m2. Water is H₂O in print. The tags keep the meaning when the font changes.
A = 3² m²
Example
<p>Area = 3<sup>2</sup> m<sup>2</sup></p>
<p>Water is H<sub>2</sub>O.</p>