![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Text-Formatting-Tags.jpg\")
<\/a><\/p>\nHTML Formatting Tags<\/h2>\n
There are two types of HTML tags:<\/p>\n
- \n
- Physical tags-<\/strong> These tags provide a visual appeal to the document. For example, bold, italic, underlined, etc.<\/li>\n
- Logical tags-<\/strong> These tags provide a logical meaning to the text. For example, the <strong> tag.<\/li>\n<\/ul>\n
Formatting Text in HTML<\/h2>\n
Now, we shall discuss some of the major formatting text in HTML.<\/p>\n
1. HTML Headings<\/h3>\n
HTML headings range from 1 to 6. The heading defined within <h1><\/strong> is the more important i.e. larger font-size and font-weight whereas <h6><\/strong> is the least important i.e. least font-size. These headings can be judiciously used to format the text.<\/p>\n
<html> \r\n<head> \r\n<title>DataFlair<\/title> \r\n<\/head> \r\n<body> \r\n<h1>DataFlair Heading 1<\/h1>\r\n<h2>DataFlair Heading 2<\/h2>\r\n<h3>DataFlair Heading 3<\/h3>\r\n<h4>DataFlair Heading 4<\/h4>\r\n<h5>DataFlair Heading 5<\/h5>\r\n<h6>DataFlair Heading 6<\/h6>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-252-1.png\")
<\/a><\/p>\nBesides headings, there are numerous tags in HTML to adjust the appearance of the text in question directly. These tags are referred to as the physical tags that enable development of simple qualities like the bold, italics, underlined styles among others where emphasis on the text message is required. Whereas, logical tags add semantic meaning to the text, thereby aiding the search engine and the screen readers to interpret the text better.<\/p>\n
2. HTML Bold text<\/h3>\n
This is defined by the <b><\/strong> tag. This is a physical tag which is used to display the text in Bold. For example,<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p><b>Welcome to DataFlair!<\/b><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-291-1.png\")
<\/a><\/p>\n3. HTML Strong Element<\/h3>\n
It displays the content in a manner such that it appears as important.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p><strong>Welcome to DataFlair!<\/strong><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-303-1.png\")
<\/a><\/p>\n4. HTML Underlining the text<\/h3>\n
In HTML, the text can be underlined using the <u><\/strong> element, in order to emphasize on its importance. For example,<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p>Welcome to DataFlair!<\/p>\r\n<p><u>Welcome to DataFlair!<\/u><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-305-1.png\")
<\/a><\/p>\n5. HTML Highlight<\/h3>\n
In HTML, the <mark><\/strong> element is used to highlight the text. For example,<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p><mark>Welcome to DataFlair!<\/mark><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-293.png\")
<\/a><\/p>\n6. HTML Small text<\/h3>\n
This element is used to define small texts which can be used to add comments,notes,copyright,etc. For example,<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p><small>Welcome to DataFlair!<\/small><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-295.png\")
<\/a><\/p>\n7. HTML Superscript and Subscript<\/h3>\n
- \n
- <sup>-<\/strong> It displays the content in superscript.<\/li>\n
- <sub>-<\/strong> It displays the content in subscript.<\/li>\n<\/ul>\n
For example:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p><small>Welcome to DataFlair!<sup>E-learning!<\/sup><\/small><\/p>\r\n<p><small>Welcome to DataFlair!<sub>E-learning!<\/sub><\/small><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-297.png\")
<\/a><\/p>\n8. HTML Italicize and Emphasize<\/h3>\n
The <i> element is used to display the text it contains in italics.
\nThe <em> element displays the text in italics along with semantic importance i.e. it emphasizes the text. For example,<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p><i>Welcome to DataFlair!<\/i><\/p>\r\n<p><em>Welcome to DataFlair!<\/em><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
<\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-303.png\")
<\/a><\/p>\nHTML also contains some specific tags for the text, for example, tags for the superscript <sup> and subscript <sub>. These are especially helpful in scientific and mathematics oriented content that include use of exponentiation and chemical equations. These include the <mark> tag for highlighting which can be used for the information that needs to be noticed on a page and will help it stand out.<\/p>\n
Likewise, the <small> tag is helpful for the disclaimer and other important statements that they don\u2019t want to draw the reader\u2019s attention but still need to be on the page.<\/p>\n
9. HTML Striking through and Inserting<\/h3>\n
In HTML, the <del><\/strong> element is used to display a deleted text on the web-page, done by striking through the text, and the <ins><\/strong> element is used to display the inserted text, shown underlined. For example,<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body>\r\n<p>Welcome to DataFlair!<\/p>\r\n<p><del>Welcome to DataFlair!<\/del><\/p>\r\n<p><ins>Welcome to DataFlair!<\/ins><\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-301.png\")
<\/a><\/p>\n10. HTML Preformatted text<\/h3>\n
The <pre><\/strong> 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,<\/p>\n
<html> \r\n<head> \r\n<title>DataFlair<\/title> \r\n<\/head> \r\n<body> \r\n<pre>\r\nDataFlair\r\nLearn Today.Lead Tomorrow.\r\n<\/pre> \r\n<\/pre>\n
Output:<\/strong><\/p>\n
![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-227-1.png\")
<\/a><\/p>\n11. HTML Definition tag<\/h3>\n
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,<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<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.\r\nDataFlair 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>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
- <sub>-<\/strong> It displays the content in subscript.<\/li>\n<\/ul>\n
- Logical tags-<\/strong> These tags provide a logical meaning to the text. For example, the <strong> tag.<\/li>\n<\/ul>\n