HTML Formatting – Learn Text Formatting in HTML
Free Web development courses with real-time projects Start Now!!
HTML Formatting basically refers to the enhancing of text in order to increase the visual appeal. HTML provides a range of formatting tags that can be used to make the text attractive to the users. There are many options available that can be used for formatting, just like any other text editor.
HTML Formatting Tags
There are two types of HTML tags:
- Physical tags- These tags provide a visual appeal to the document. For example, bold, italic, underlined, etc.
- Logical tags- These tags provide a logical meaning to the text. For example, the <strong> tag.
Formatting Text in HTML
Now, we shall discuss some of the major formatting text in HTML.
1. HTML Headings
HTML headings range from 1 to 6. The heading defined within <h1> is the more important i.e. larger font-size and font-weight whereas <h6> is the least important i.e. least font-size. These headings can be judiciously used to format the text.
<html> <head> <title>DataFlair</title> </head> <body> <h1>DataFlair Heading 1</h1> <h2>DataFlair Heading 2</h2> <h3>DataFlair Heading 3</h3> <h4>DataFlair Heading 4</h4> <h5>DataFlair Heading 5</h5> <h6>DataFlair Heading 6</h6> </body> </html>
Output:
2. HTML Bold text
This is defined by the <b> tag. This is a physical tag which is used to display the text in Bold. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p><b>Welcome to DataFlair!</b></p> </body> </html>
Output:
3. HTML Strong Element
It displays the content in a manner such that it appears as important.
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p><strong>Welcome to DataFlair!</strong></p> </body> </html>
Output:
4. HTML Underlining the text
In HTML, the text can be underlined using the <u> element, in order to emphasize on its importance. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p>Welcome to DataFlair!</p> <p><u>Welcome to DataFlair!</u></p> </body> </html>
Output:
5. HTML Highlight
In HTML, the <mark> element is used to highlight the text. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p><mark>Welcome to DataFlair!</mark></p> </body> </html>
Output:
6. HTML Small text
This element is used to define small texts which can be used to add comments,notes,copyright,etc. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p><small>Welcome to DataFlair!</small></p> </body> </html>
Output:
7. HTML Superscript and Subscript
- <sup>- It displays the content in superscript.
- <sub>- It displays the content in subscript.
For example:
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p><small>Welcome to DataFlair!<sup>E-learning!</sup></small></p> <p><small>Welcome to DataFlair!<sub>E-learning!</sub></small></p> </body> </html>
Output:
8. HTML Italicize and Emphasize
The <i> element is used to display the text it contains in italics.
The <em> element displays the text in italics along with semantic importance i.e. it emphasizes the text. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p><i>Welcome to DataFlair!</i></p> <p><em>Welcome to DataFlair!</em></p> </body> </html>
Output:
9. HTML Striking through and Inserting
In HTML, the <del> element is used to display a deleted text on the web-page, done by striking through the text, and the <ins> element is used to display the inserted text, shown underlined. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p>Welcome to DataFlair!</p> <p><del>Welcome to DataFlair!</del></p> <p><ins>Welcome to DataFlair!</ins></p> </body> </html>
Output:
10. HTML Preformatted text
The <pre> tag of HTML allows the developers to display the text in the same format i.e. spaces,tabs,line breaks,etc, as written in the code.For example,
<html> <head> <title>DataFlair</title> </head> <body> <pre> DataFlair Learn Today.Lead Tomorrow. </pre>
Output:
11. HTML Definition tag
As from the name itself, the definition tag is for defining a term that appears for the first time. Its contents are displayed in italics. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <p><dfn>DataFlair</dfn><br>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training. DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.</p> </body> </html>
Output:
12. HTML Grouping content
The <div> and <span> elements are used to group similar content together and create sections or subsections.
The <span> element groups inline elements only. For example,
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <div id = "menu" align = "middle" > <a href = "#">HOME</a> | <a href = "#">CONTACT</a> | <a href = "#">ABOUT</a> </div> <p>This is the example of <span>span tag</span> </p> </body> </html>
Output:
Summary
In this article, we’ve looked at the major HTML formatting elements and some content-grouping elements. There’s a clear understanding of the elements such as <h>, <b>, <strong>, <small>, <pre>, <i>, <em>, <sub>, <sup>, <ins>, <dfn>, <del>, <div> and <span>. The <div> and <span> elements will be discussed in detail in the following articles.
Hope you like the article!!!
Did you like this article? If Yes, please give DataFlair 5 Stars on Google
8. HTML Italicize and Emphasize
Showing result wrong but everything is great.
Thank You Sir