Student: Majharul Islam | ID: 232002256 | Date: October 2025
HTML provides various elements to format and style text content. These elements help convey meaning and improve readability while maintaining semantic structure.
This text is strong and important.
<p>This text is <strong>strong and important</strong>.</p>
Use for: Important content that should stand out
This text is emphasized.
<p>This text is <em>emphasized</em>.</p>
Use for: Text that should be stressed or emphasized
This text is highlighted for reference.
<p>This text is <mark>highlighted for reference</mark>.</p>
Use for: Text that should be highlighted or marked
This text is underlined.
<p>This text is <u>underlined</u>.</p>
Use for: Text that should be underlined (avoid for links)
This text is strikethrough.
<p>This text is <s>strikethrough</s>.</p>
Use for: Text that should be crossed out or deleted
Normal text with small text.
<p>Normal text with <small>small text</small>.</p>
Use for: Fine print, disclaimers, legal text
Normal text with big text.
<p>Normal text with <big>big text</big>.</p>
Note: <big> is deprecated, use CSS font-size instead
Chemical formula: H2O
Mathematical: x1 + x2
<p>Chemical formula: H<sub>2</sub>O</p>
<p>Mathematical: x<sub>1</sub> + x<sub>2</sub></p>
Use for: Chemical formulas, mathematical subscripts
Mathematical: E=mc2
Date: 5th of October
Power: 103 = 1000
<p>Mathematical: E=mc<sup>2</sup></p>
<p>Date: 5<sup>th</sup> of October</p>
<p>Power: 10<sup>3</sup> = 1000</p>
Use for: Exponents, ordinals, footnotes
Use the console.log() function to debug.
<p>Use the <code>console.log()</code> function to debug.</p>
Use for: Short code snippets, function names, variables
Press Ctrl + C to copy.
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
Use for: Keyboard shortcuts, key combinations
Output: Hello, World!
<p>Output: <samp>Hello, World!</samp></p>
Use for: Program output, sample text
The variable userName stores the name.
<p>The variable <var>userName</var> stores the name.</p>
Use for: Variable names, mathematical variables
The <pre> element preserves whitespace, line breaks, and formatting exactly as written.
<pre>
This text preserves
spaces and line breaks
exactly as written.
┌─────────────────┐
│ ASCII Art │
└─────────────────┘
</pre>
<pre><code>
function greetUser(name) {
console.log(`Hello, ${name}!`);
return `Welcome, ${name}`;
}
</code></pre>
Use for: Code blocks, ASCII art, formatted text
This is a strong paragraph with emphasized text and highlighted content.
Here's some inline code and a underlined phrase.
Mathematical expressions: H2SO4 and E=mc2
Keyboard shortcut: Ctrl + Shift + I
Program output: Compilation successful
Variable totalScore contains the result.
Small print for legal disclaimers
<h2>HTML Text Formatting Demo</h2>
<p>This is a <strong>strong paragraph</strong> with <em>emphasized text</em> and <mark>highlighted content</mark>.</p>
<p>Here's some <code>inline code</code> and a <u>underlined phrase</u>.</p>
<p>Mathematical expressions: H<sub>2</sub>SO<sub>4</sub> and E=mc<sup>2</sup></p>
<p>Keyboard shortcut: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></p>
<p>Program output: <samp>Compilation successful</samp></p>
<p>Variable <var>totalScore</var> contains the result.</p>
<p><small>Small print for legal disclaimers</small></p>