Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Emphasize Text in a Document using HTML5?
Text may be emphasized in documents using a variety of HTML5 elements to highlight crucial information and make it easier for readers to identify important content. HTML5 provides both presentational and semantic elements for text emphasis, each serving different purposes in document structure and meaning.
Different tags are used in HTML like <b>, <i>, <u>, <strong>, <em>, <mark>, <small>, <sup>, and <sub> to emphasize text, add superscript and subscript formatting, and provide semantic meaning to content.
Syntax
Following are the syntax patterns for common text emphasis elements
<b>bold text</b> <i>italic text</i> <u>underlined text</u> <strong>strongly emphasized</strong> <em>emphasized text</em> <mark>highlighted text</mark> <small>smaller text</small> <sup>superscript</sup> <sub>subscript</sub>
Presentational vs Semantic Elements
HTML5 distinguishes between presentational and semantic emphasis elements. Presentational elements like <b>, <i>, and <u> define how text appears visually. Semantic elements like <strong> and <em> convey meaning and importance, which is crucial for accessibility and SEO.
| Presentational | Semantic | Purpose |
|---|---|---|
| <b> | <strong> | Bold/Strong emphasis |
| <i> | <em> | Italic/Emphasis |
| <u> | CSS text-decoration | Underlined text |
Basic Text Emphasis Elements
Example Bold and Strong
The <b> tag makes text bold for visual purposes, while <strong> indicates strong importance
<!DOCTYPE html> <html> <head> <title>Bold and Strong Text</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>This is <b>bold text</b> for visual emphasis.</p> <p>This is <strong>strongly emphasized</strong> text with semantic meaning.</p> </body> </html>
The output shows both appearing bold, but <strong> carries semantic importance
This is bold text for visual emphasis. This is strongly emphasized text with semantic meaning.
Example Italic and Emphasis
The <i> tag styles text in italics, while <em> provides semantic emphasis
<!DOCTYPE html> <html> <head> <title>Italic and Emphasis Text</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>The word <i>italic</i> is styled in italics.</p> <p>We should <em>emphasize</em> this important point.</p> </body> </html>
The word italic is styled in italics. We should emphasize this important point.
Highlighting and Special Formatting
Example Mark and Small Elements
The <mark> element highlights text, while <small> renders text in a smaller font size
<!DOCTYPE html> <html> <head> <title>Mark and Small Text</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>Please <mark>highlight this important information</mark> in your notes.</p> <p>Copyright 2024 <small>TutorialsPoint. All rights reserved.</small></p> </body> </html>
The <mark> element displays with a yellow background by default
Please highlight this important information in your notes. (highlighted in yellow) Copyright 2024 TutorialsPoint. All rights reserved. (smaller text)
Superscript and Subscript
Example Scientific and Mathematical Notation
The <sup> and <sub> elements are essential for mathematical formulas and chemical notation
<!DOCTYPE html> <html> <head> <title>Superscript and Subscript</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>Mathematical formula: E = mc<sup>2</sup></p> <p>Chemical formula: H<sub>2</sub>O (water)</p> <p>Footnote reference<sup>1</sup> in academic writing.</p> </body> </html>
Mathematical formula: E = mc² Chemical formula: H?O (water) Footnote reference¹ in academic writing.
Comprehensive Text Emphasis Example
Following example demonstrates all text emphasis elements together
<!DOCTYPE html> <html> <head> <title>Text Emphasis in HTML5</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px; line-height: 1.6;"> <h1>Text Emphasis Techniques</h1> <p>Here we have <u>underlined</u> text for visual distinction.</p> <p>Let's make this text <b>bold</b> for visual impact.</p> <p>This is how <mark>highlighted</mark> text appears.</p> <p>Now, let's try <i>italic</i> styling.</p> <p>You can also use <strong>strongly emphasized</strong> text for importance.</p> <p>Many websites <em>emphasize</em> text semantically.</p> <p>We can make text <small>smaller</small> when needed.</p> <p>Mathematical expressions: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p> <p>Chemical formulas: H<sub>2</sub>SO<sub>4</sub> (sulfuric acid)</p> </body> </html>
Text Emphasis Techniques Here we have underlined text for visual distinction. Let's make this text bold for visual impact. This is how highlighted text appears. (yellow background) Now, let's try italic styling. You can also use strongly emphasized text for importance. Many websites emphasize text semantically. We can make text smaller when needed. Mathematical expressions: x² + y² = z² Chemical formulas: H?SO? (sulfuric acid)
Best Practices for Text Emphasis
-
Use semantic elements Prefer
<strong>over<b>and<em>over<i>for better accessibility and SEO. -
Avoid overuse Too much emphasis reduces its effectiveness and makes content harder to read.
-
Consider accessibility Screen readers interpret semantic elements differently than presentational ones.
-
Use appropriate elements Use
<mark>for highlighting,<small>for legal text, and<sup>/<sub>for scientific notation.
Conclusion
HTML5 provides various elements for text emphasis, ranging from presentational tags like <b&
335 Views
