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:
Besides 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.
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:
HTML 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.
Likewise, the <small> tag is helpful for the disclaimer and other important statements that they don’t want to draw the reader’s attention but still need to be on the page.
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!!!
We work very hard to provide you quality material
Could you take 15 seconds and share your happy experience on Google
8. HTML Italicize and Emphasize
Showing result wrong but everything is great.
Thank You Sir
thanks…