A comprehensive reference document · Web Development
Regular text looks like this.
This line uses the <b> tag to make text bold.
This line uses <strong> — semantically important bold
text.
You can also make a span bold with CSS
font-weight:700.
This uses the <i> tag — stylistic italics.
This uses <em> — emphasis (semantic italics).
A CSS italic span works the same way
visually.
This text is underlined using the <u> tag.
This text is underlined via CSS text-decoration.
Combining styles:
underlined, bold, and italic all at once.
■ Ruby Red (#9b1c31) — the <font color> attribute or CSS
color.
■ Deep Teal (#1a6b6b)
■ Lavender (#8b5cf6)
■ Antique Gold (#c9a84c)
■ Slate (#2e3d4f)
Tags: Ruby Teal Lavender Gold
Playfair Display — elegant serif display font.
Courier New — fixed-width monospace font.
Georgia italic — classic cursive-style body font.
Small — 0.82rem: The quick brown fox.
Medium — 1rem: The quick brown fox.
Large — 1.35rem: The quick brown fox.
Extra Large — 1.7rem: The quick brown fox.
Thin (300) — The quick brown fox jumps over the lazy dog.
Regular (400) — The quick brown fox jumps over the lazy dog.
Semi-Bold (600) — The quick brown fox jumps over the lazy dog.
Bold (700) — The quick brown fox jumps over the lazy dog.
This is the paragraph. The <p> tag creates a block of text with automatic top and bottom spacing. Each paragraph is its own self-contained unit of thought, making documents easier to read and scan.
Line one — no break tag yet.
Line two — after a <br> tag.
Line three — another break.
Line four — breaks do not add extra vertical space like
<p> does; they simply move to the next line within the same
paragraph block.
A standard <hr> below — used to separate sections of content:
Content continues after the horizontal rule. You can style <hr> with CSS to change its color, thickness, width, or turn it into a decorative element.
The scrolling banner at the very top of this page is produced by the
<marquee> tag. It accepts direction,
behavior, and scrollamount attributes.
THE END