01 ‐ Text Formatting : Docusaurus
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>Main Title (H1)</h1>
<h2>Subheading (H2)</h2>
<h3>Sub-subheading (H3)</h3>
<h4>Fourth-level Heading (H4)</h4>
<h5>Fifth-level Heading (H5)</h5>
<h6>Sixth-level Heading (H6)</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraphs Example</title>
</head>
<body>
<h1>HTML Paragraphs</h1>
<p>This is the first paragraph. It introduces the topic of HTML paragraphs.</p>
<p>This is the second paragraph. It provides additional information on how paragraphs are used.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Styled Paragraphs</title>
<style>
p {
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
color: #333;
}
</style>
</head>
<body>
<h1>Styled Paragraphs</h1>
<p>CSS allows you to control the appearance of paragraphs, making them visually appealing and easier to read.</p>
<p>By adjusting font size, line height, and color, you can create a better reading experience for your users.</p>
</body>
</html>
Below are the most commonly used HTML tags for text formatting:
| Tag | Purpose | Example |
|---|---|---|
<b> |
Bolds text (without semantic meaning) | <b>Bold Text</b> |
<strong> |
Bolds text with semantic emphasis | <strong>Important Text</strong> |
<i> |
Italics text (without semantic meaning) | <i>Italicized Text</i> |
<em> |
Italics text with semantic emphasis | <em>Emphasized Text</em> |
<u> |
Underlines text | <u>Underlined Text</u> |
<mark> |
Highlights text | <mark>Highlighted Text</mark> |
<small> |
Reduces font size | <small>Smaller Text</small> |
<del> |
Strikethrough text (deleted content) | <del>Deleted Text</del> |
<ins> |
Underlined text (inserted content) | <ins>Inserted Text</ins> |
<sup> |
Superscript text | x<sup>2</sup> |
<sub> |
Subscript text | H<sub>2</sub>O |
<code> |
Displays inline code | <code>let x = 5;</code> |
<pre> |
Preserves whitespace formatting | <pre>Preformatted Text</pre> |
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<h1>Text Formatting Example</h1>
<p><b>This text is bold.</b></p>
<p><strong>This text is bold and important.</strong></p>
<p><i>This text is italicized.</i></p>
<p><em>This text is italicized and emphasized.</em></p>
<p><u>This text is underlined.</u></p>
<p><mark>This text is highlighted.</mark></p>
<p>Superscript: x<sup>2</sup></p>
<p>Subscript: H<sub>2</sub>O</p>
<p>Inline Code: <code>let x = 5;</code></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, sans-serif;
}
mark {
background-color: yellow;
font-weight: bold;
}
code {
font-family: "Courier New", monospace;
background-color: #f4f4f4;
padding: 2px 4px;
}
</style>
</head>
<body>
<h1>Formatted Text with CSS</h1>
<p>This is <mark>highlighted</mark> and <code>inline code</code>.</p>
</body>
</html>
