10.1 Getting Started with Formatting
Formatting text using tags like <b>, <strong>, <i>,
<em>, <u> and <small> allows web developers to
improve readability and emphasize certain parts of text. Each of these tags has specific usage:
<b>: bold text without additional meaning<strong>: bold text with emphasis on importance<i>: italic text for stylistic emphasis<em>: italic text with logical or semantic emphasis<u>: underlined text for visual emphasis<small>: small text for less important information
Understanding and using these tags correctly helps to create clearer and more visually appealing web pages.
Main Tags for Text Formatting
Tag <b> and <strong>
The <b> tag is used for making text bold, but without any special semantic meaning. The <strong>
tag also makes text bold, but adds additional semantic meaning, indicating importance or significance of the text.
<p>This text is <b>bold</b>, and this text is <strong>very important and bold</strong>.</p>
Tag <i> and <em>
The <i> tag is used for italicizing text without special semantic meaning.
The <em> tag italicizes text and indicates emphasis or importance.
<p>This text is <i>italic</i>, and this text is <em>very important and italic</em>.</p>
Tag <u> and <ins>
The <u> tag is used to underline text. The <ins> tag also underlines text,
but is used for denoting inserted text, which is meaningful in the context of tracking changes.
<p>This text is <u>underlined</u>, and this text is <ins>inserted and underlined</ins>.</p>
Tag <s> and <del>
The <s> tag is used for strikethrough text. The <del> tag also strikesthrough text,
but indicates deletion, which is meaningful in the context of tracking changes.
<p>This text is <s>struck through</s>, and this text is <del>deleted and struck through</del>.</p>
Tag <mark>
The <mark> tag is used for highlighting text that has special meaning or importance in the current context.
Text inside <mark> is displayed with a yellow background.
<p>This text is <mark>highlighted</mark> to draw attention.</p>
Tag <small>
The <small> tag is used to display text in a smaller size compared to normal text.
<p>This is main text, and this is <small>small text</small>.</p>
Tag <sub> and <sup>
The <sub> and <sup> tags are used for subscript and superscript text respectively.
<p>This is text with subscript H<sub>2</sub>O and superscript x<sup>2</sup>.</p>
10.2 Line Breaks
Tag <br>
The <br> tag is used to insert a line break, which moves text to a new line without creating a new paragraph.
<p>This is text with a line break<br>inside a single paragraph.</p>
Tag <hr>
The <hr> tag is used to insert a horizontal line that visually separates content on a web page.
<p>Text above the line.</p>
<hr>
<p>Text below the line.</p>
GO TO FULL VERSION