Logo
×

HTML5 Formatting

HTML Formatting

HTML Formatting is a method of text formatting for a better appearance and look. HTML allows us to format text without using the CSS. HTML includes a lot of formatting tags. These tags are used to make bold, underline, and italic text. There are nearly 14 options available in HTML and XHTML for the way text appears.

For HTML the tags are divided into two categories:

  • Physical tag
  • Logical tag

Physical tag: These tags are used to give the text a visual appearance.

Logical tag:Logical or semantic tags are used to append the value.

Here we will know 14 tags for formatting HTML. The list of text for formatting HTML is below.

Element name Description
<b> It is a physical tag used to bold the text between the tags.
<strong> It is a logical tag that tells the browser that text is important.
<i> It is a physical tag used to make italic text.
<em> It is a logical tag used to display the content in italics.
<mark> This tag will be used to highlight the text.
<u> This tag is used to underline the text that has been written between them.
<tt> Use this tag, a text may appear in a teletype. (Don’t supported HTML5)
<sup> It displays the contents just slightly above the usual line.
<sub> It displays the contents just slightly below the usual line.
<del> It tag is used to display the deleted contents.
<strike> Using this tag will draw a strikethrough on a text line. (Don't support HTML5)
<ins> This tag shows the added contents.
<big> This tag is used with one conventional unit to increase font size.
<small> This tag is used to reduce font size by one unit from the base font size.

1. Bold Text

HTML < b > and < strong > element formatting

The HTML < b > element is a physical tag that displays text in bold font without any logical importance. If you write anything within the < b>................ </b > element, it is shown in bold letters.

Example

 < p><b > Write in bold text your first paragraph.</b></p >

Code

<!DOCTYPE>
 <html>
 <body>
 <p><b > Write in bold text your first paragraph.</b></p >
 </body>
 </html>
HTML Formatting

Output

<strong> tag

The HTML < strong > tag is a logical tag that displays content in bold font and informs the browser of its logical significance. Write something like < strong >????????.</strong > Important text is shown.

Example

<p><strong>This is an important content</strong>, and this is normal content</p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p><strong>This is an important content</strong>, and this is normal content</p>
 </body>
 </html>

Output

HTML Formatting

2. Italic Text

HTML <i> and <em> elements formatting

The HTML < I > element is a physical element that displays the enclosed content in the italic font without any added importance. If you write anything in the < i>................ </i > element, it will be shown in italic letters.

Example

<p> <i>Write Your First Paragraph in italic text.</i></p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p><i>Write Your First Paragraph in italic text.</i></p>
 </body>
 </html>

Output

HTML Formatting

<em>tag

The HTML < em > tag is a logical feature that shows the enclosed content in italic font, with added value in semantics.

Example

<p><em>This is an important content</em>, which displayed in italic font.</p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p><em>This is an important content</em>, which displayed in italic font.</p>
 </body>
 </html>

Output

HTML Formatting

HTML Marked formatting

If you want to mark or highlight a file, the contents should be written in < mark>......</mark>.

Example

 <h2> I want to put a <mark> Mark</mark> on your face</h2>

Code

<!DOCTYPE>
 <html>
 <body>
 <h2>  I want to put a <mark> Mark</mark> on your face</h2>
 </body>
 </html>

Output

HTML Formatting

4. Underlined Text

If we write something inside the element < u>...... </u >, the text underlined is displayed.

Example

<p> <u>Write Your First Paragraph in underlined text.</u></p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p><u>Write Your First Paragraph in underlined text.</u></p>
 </body>
 </html>

Output

HTML Formatting

5. Strike Text

Anything written within the < stroke>....................... </stroke > element will be displayed with a strikethrough. It's a thin line that crosses the statement.

Example

<p> <strike>Write Your First Paragraph with Strike Text</strike>.</p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p><strike>Write Your First Paragraph with Strike Text</strike>.</p>
 </body>
 </html>

Output

HTML Formatting

6. Monospaced Font

If you want each letter to have the same width, you should write the contents within the <tt>…………</tt> element.

Example

 <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
 </body>
 </html>

Output

HTML Formatting

7. Superscript Text

If you place the content in the < sup>.................. </sup > element, it is shown in the superscript; means that half a character's height is shown above the other characters.

Example

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>     

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
 </body>
 </html>

Output

HTML Formatting

8. Subscript Text

If you put the content inside the item < sub>.............. </sub >, it is displayed in the subscript; means half the height of a character below the other characters is displayed.

Example

<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
 </body>
 </html>

Output

HTML Formatting

9. Deleted Text

Anything within <del>...... </del > is shown as deleted text.

Example

<p>Hello <del>Delete your first paragraph.</del></p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <del>Delete your first paragraph.</del></p>
 </body>
 </html>

Output

HTML Formatting

10. Inserted Text

Anything inserted inside <ins>...... </ins > will be displayed as inserted text.

Example

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>  

Code 

<!DOCTYPE>
 <html>
 <body>
 <p><del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
 </body>
 </html>

Output

HTML Formatting

11. Larger Text

If we want to add a font size larger than the rest of the text, then insert the contents in < big>................ </big>. It increases the size of one font more than the previous one.

Example

<p>Hello <big>Write the paragraph in larger font.</big></p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <big>Write the paragraph in larger font.</big></p>
 </body>
 </html>

Output

HTML Formatting

12. Smaller Text

If we want to make your font size smaller than the rest of the text, insert the contents in < small>................ </small > tag. It reduces the size of one font to the previous one.

Example

<p>Hello <small>Write the paragraph in smaller font.</small></p>

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <small>Write the paragraph in smaller font.</small></p>
 </body>
 </html>

Output

HTML Formatting

Related Topics

HTML <span> tag

The span tag in HTML is used as an inline container element to mark up a specific or special chunk of a text or a section of a page. If you...

2 minutes read.

HTML Search Box

The HTML search box is also known as the search bar. It is an input text field that is used to search the content. If the users want to explore...

7 minutes read.

HTML5 Attribute

HTML Attribute HTML attributes are special words that provide additional information about the HTML element or attributes.The element or tags have attributes, which define the element's behavior.It also adds attributes with a start...

3 minutes read.

How to change font in HTML

To give style to the content of your website, you may change the font of the text and make your website look attractive to the user. There are several methods which...

4 minutes read.

HTML <strong> tag

The strong element in HTML is used to display the real significant information in bold so that the user or reader will understand it easily. Syntax: <p> <strong>………… </strong> </p> Example Here, we will demonstrate how to...

2 minutes read.

HTML Tutorial

Introduction This HTML tutorial helps beginners and professionals to learn HTML easily. HTML is a widely used web technology for website development. It stands for Hyper Text Markup Language. It is mainly used to...

7 minutes read.

HTML Code

Before jumping into the topic, let’s understand a common scenario where we have a code snippet in our HTML file. By code snippet, we mean computer code, which is written...

5 minutes read.

How to Create a Portfolio Gallery using HTML and CSS?

First, before starting this, the user should know some of the basics of HTML and CSS to create a portfolio gallery. To add more functionality to the website, we can also...

7 minutes read.

HTML City tag

HTML <City> tag HTML < cite > tag specifies a citation, a reference or title to a creative work, quoted content, books, websites, a research paper, a blog post, a painting,...

3 minutes read.

HTML Paragraphs

In html, there are some elements which starts with new line and one of them is paragraph. Which is said to be a block of text. In html <p> tag...

4 minutes read.

HTML Font Color

The HTML <font> tag has an attribute called color, which defines the color of the text. We use the color attribute inside the <font> tag to specify the color of...

6 minutes read.

HTML Font Size

The HTML <font> tag uses the size attribute to specify the size of the text. We can set the size attribute’s value from 1 to 7. The default size of...

4 minutes read.

Design a tribute page using HTML and CSS

A tribute page is a webpage based on a person who inspired us in our life. In this article, we will create a webpage of Mahatma Gandhi. We are going...

5 minutes read.

How to add JavaScript to HTML

JavaScript is one of the most important languages today. It is a high-level, interpreted, lightweight programming language that makes web pages more interactive. It is a language of the web....

5 minutes read.

HTML Elements

An HTML element is nothing but a starting tag and then some content and then the closing tag. So we can say HTML elements is everything from the starting tag...

3 minutes read.

HTML <samp> tag

The Samp tag in HTML is used for defining the sample output from the computer program. This tag is a phrase type tag and a container tag that means the...

2 minutes read.

HTML5 Tags

HTML5 Tags A list of newly included tags is provided in HTML5. These HTML 5 tags (elements) provide a better structure for the document. This list shows description of all HTML...

3 minutes read.

HTML &lt;body> alink Attribute

HTML <body> alink Attribute What is HTML? The HTML or HyperText Markup Language is used to design web pages. The file extension name for HTML file is ".html". It was released in...

2 minutes read.

HTML <video> Tag

The Video tag in HTML is used to play video on a media player on the web page. We can also insert an audio by the video tag, but audio...

6 minutes read.

HTML <u> tag

Underline Element/Tag: The u tag in html is used to specify the important text or phrase by underline. In earlier HTML versions, this element was known as the "Underline" element, and...

5 minutes read.