HTML Formatting
HTML Formatting is the process of formatting text for a better look and feel. HTML specifies usability to format text without using CSS. There are many formatting tags in HTML. For example these tags are used to make text bold, italicized, or underlined, mark.
Two categories:
- Physical tag: Visual appearance to the text.
- Logical tag: Add some logical or semantic value to the text.
Example:
<!DOCTYPE html> <html lang="en"> <head> <title>Formatting Text in HTML</title> </head> <body> <p>This is <b>bold text</b>.</p> <p>This is <strong>strongly important text</strong>.</p> <p>This is <i>italic text</i>.</p> <p>This is <em>emphasized text</em>.</p> <p>This is <mark>highlighted text</mark>.</p> <p>This is <code>computer code</code>.</p> <p>This is <small>smaller text</small>.</p> <p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p> <p>This is <del>deleted text</del>.</p> <p>This is <ins>inserted text</ins>.</p><p>This is <b>bold text</b>.</p> </body> </html>
OUTPUT:
HTML Formatting Elements:
- <b> – Bold text
- <strong> – Important text
- <i> – Italic text
- <em> – Emphasized text
- <mark> – Marked text
- <small> – Smaller text
- <del> – Deleted text
- <ins> – Inserted text
- <sub> – Subscript text
- <sup> – Superscript text
- <u> – underline text
- <strike> – draw a strikethrough on a section of text
Bold Text:
HTML<b> and <strong> formatting elements.
<b> tags render the enclosed text in a bold typeface by default.
Example:
<!DOCTYPE> <html> <body> <p> <b>bold tag is defult text was bold</b></p> </body> </html>
OUTPUT:
The HTML <strong> tag is a logical tag, which displays the content in bold font :
Example:
<p><strong>This is an important content</strong>,and the normal content</p>
OUTPUT:
Italic Text:
HTML <i> and <em> formatting elements
The HTML <i> tag is a physical element, which displays the enclosed content in italic font, without any added styles.
The HTML <em> tag is an emphasized text, which will display the enclosed content in italic font.
Example:
<!DOCTYPE html> <html> <head> <title>formatting elements</title> </head> <body> <h4><em>This is an important content</em>, which displayed in italic font.</h4> </body> </html>
OUTPUT:
HTML Marked formatting:
You should write the content within <mark>………</mark>, that should be marked or highlighted.
Example:
<!DOCTYPE> <html> <body> <h2> I want to inside put <mark> Mark</mark> on your face</h2> </body> </html>
OUTPUT:
Underlined Text:
write anything within <u>………</u> element,
Example:
<!DOCTYPE> <html> <body> <h2> <u>Write First Paragraph in underlined text.</u></h2> </body> </html>
OUTPUT:
Strike Text:
you can write within <strike>…………………..</strike> element is displayed with a strikethrough. I
Example:
<!DOCTYPE> <html> <body> <h2> <strike>Write First Paragraph with strikethrough</strike>.</h2> </body> </html>
OUTPUT:
Superscript Text:
The HTML <sup> tag defines superscript text. This means it is displayed half a character’s height above the other characters.
Example:
<!DOCTYPE html> <html> <body> <h2>This is <sup>superscripted</sup> text.</h2> </body> </html>
OUTPUT:
Subscript Text:
The HTML <sub> tag defines subscript text. The subscript text defines half a character below the normal line and is sometimes rendered in a smaller font.
Example:
<!DOCTYPE html> <html> <body> <h2>This is <sub>subscripted</sub> text.</h2> </body> </html>
OUTPUT:
Deleted Text:
The HTML tag defines text that has been deleted from a document.
Example:
<!DOCTYPE> <html> <body> <h2>Hello <del>Delete your first paragraph.</del></h2> </body> </html>
OUTPUT:
Inserted Text:
The HTML <ins> tag defines a text that has been inserted into a document. Browsers will automatically underline inserted text:
Example:
<!DOCTYPE> <html> <body> <h2> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></h2> </body> </html>
OUTPUT:
