HTML and CSS Text Content
HTML & CSS: Text Content
Headings, paragraphs, emphasis, and inline semantics give structure and meaning to your text.
CSS typography rules bring the words to life.
Headings establish hierarchy
Use one <h1> per page, followed by <h2>, <h3>, etc.
This improves accessibility and SEO.
Note: Accessibility means assistive technologies can understand the page, and SEO (search engine optimization) helps your site appear in search results.
Headings
<h1>Welcome to Campfire</h1>
<h2>Latest Updates</h2>
<h3>Release 2.0</h3>
If you want to read more about headings or get an in-depth understanding, go to our Headings in the HTML tutorial.
Paragraphs and line breaks
<p>wraps paragraphs of text.<br>inserts a line break (use sparingly).<hr>draws thematic breaks between topics.
If you want to read more about paragraphs or get an in-depth understanding, go to our Paragraphs in the HTML tutorial.
Inline emphasis and semantics
<strong>- strong importance, typically bold.<em>- emphasized text, typically italic.<mark>- highlight;<code>- monospace code snippet.<abbr>,<cite>,<time>add meaning for readers and crawlers.
If you want to read more about text semantics or get an in-depth understanding, see Formatting and Quotation elements in the HTML tutorial.
Control typography with CSS
Combine semantic markup with font families, weights, and spacing.
Typography example
<article class="story">
<h1>A Future with HTML & CSS</h1>
<p class="lead">Learn once, build everywhere.</p>
<p>We explore accessible patterns, responsive layouts, and component libraries.</p>
</article>
body {
font-family: "Inter", sans-serif;
margin:0;
background:#f7f8fc;
color:#1f2937;
}
.story {
max-width:680px;
margin:80px auto;
padding:0 24px;
}
.story h1 {
font-size:2.75rem;
line-height:1.15;
margin-bottom:12px;
}
.story .lead {
font-size:1.25rem;
color:#4b5563;
margin-bottom:24px;
}
.story p {
line-height:1.8;
}
If you want to read more about typography or get an in-depth understanding, see Fonts, Font Size, and Text in the CSS tutorial.
Whitespace and rhythm
Use CSS line-height, margin, and letter-spacing to improve readability.
Maintain consistent spacing scale (4px, 8px, etc.).
Note: A spacing scale is a simple list of numbers you reuse (for example 4, 8, 12) so gaps feel balanced.
Example
<!DOCTYPE html>
<html>
<head>
<title>Typography Sample</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1>Designing with type</h1>
<p>Great interfaces balance hierarchy, rhythm, and contrast.</p>
<p>Use <mark>semantic tags</mark> to describe meaning, then layer styles.</p>
</body>
</html>
body {
margin:0;
padding:48px;
font-family:"Georgia", serif;
background:#fdfcf8;
}
h1 {
font-size:3rem;
margin-bottom:12px;
}
p {
font-size:1.125rem;
line-height:1.7;
}
mark {
background:#fff176;
padding:0 4px;
}
