Introduction to HTML Text Formatting Tags
Formatting a text is an important part of modern internet web pages, even when we were limited to having text-based web browsers, text Formatting such as size, orientation, etc. were available. With modern Html revisions, there are a ton of HTML Tags that can be used to make the text appearance to your liking.
Formatting Text with HTML tags
Below we will discuss some important HTML tags that are used to format text:
1. Formatting Text as bold in an HTML
HTML has two different tags to set the text to bold appearance. One is and the other one is while both produce similar output. The tag is a physical tag, only to display the text in bold and it does not add any value of importance in the browser.
Example
Here is some text in bold.
Output :
The tag, on the other hand is considered as a logical tag and it is used to inform the browser that the text in the tag as some logical importance.
Example
This is an important content formatted using the strong tag , and this is just
normally formatted text
Output:
2. Setting Text as Italic in HTML5
Just as setting text as Bold, you can use tag and tag to set text as italic on HTML5.
Using is for, just like using , physical display of text as italic and the tag while also showing the text as italic on the display, lets the browser know that it has semantic importance.
Example
This is the first para in italic text. This content is made italics with the em tag, This is normal text
Output:
3. Highlighting Text with HTML Code
In situations where you want to highlight some text with a highlighter effect, the tag can be used, with default CSS, the tag makes the background of text as yellow helping you grab the attention of a visitor on that text easily.
Example
This text uses Mark tag to highlight text on the page
Output:
4. Underlining Text in HTML
The HTML tag can be used to add an underline in the text. Be careful not to use underlining with blue text as it may confuse visitors that the text is link.
Example
This is Text with underline tag.
Output:
5. Text with a strikethrough
In cases where you need to draw a horizontal line through the text, tag can be used. The line drown is thin so the text it is crossing can still be read easily.
Example
Here is a sentence with strike through text .
Output:
6. Writing in Monospace font in HTML
Using Monospace can be useful in situations where you want to quote something, or you want to display some code in the browser. The Monospace code, as the name suggests, makes the width of every character same. To get it on a browser, we have to use tag.
Example
This is normal text. This is some sample text in monospace fonts, neat. lt;html>
Output:
7. Subscripted Text in HTML
In math and chemistry, using subscript is an absolute requirement in many occasions. In general writing too, you may come across situations where a subscript text is suitable to use. In HTML, any text under the tag will work as a subscript in the browser.
Example
This is normal text Notice something different with this text?
Output:
8. Deleted Text in HTML5
tag is used as a logical way of telling the browser that text inside the text is deleted. Keep in mind that to user the shown text is the same as the tag in strikethrough tag, meaning it is shown in strikethrough formatting.
Example
This is normal text This is text between del tag.
Output:
9. Superscript Text formatting in HTML5
Text in tag is shown in superscript. This is useful in math, chemistry and other places where math in involved. You can use the tag when citing with adding in-page links with too.
Example
This is Normal text This text is in superscript.
Output:
10. Making Text size larger with HTML formatting
In cases where you need some text in a larger size on the screen, but you don’t want to use heading or increase the font size with a tag, use content between this tag will be displayed in noticeably larger text size.
Example
This is Normal text This text in in larger size.
Output:
11. Making Text smaller with HTML
Similar to the tag , you can use to make text smaller on the screen without having to use CSS or headings.
Example:
This is Normal text the size of this text is smaller
Output:
Conclusion
Now that you have learned how formatting of text in HTML works, you should be able to design pages with correct and professional-looking text layout and formatting. You should use normal text and formatting where possible, using custom formatting only when needed gives your pages a neat look. The size of the normal text is important too, too small and the readably will be affected negatively and if it is too large, there will be less information on the screen at once.
Recommended Articles
This has been a guide to HTML Text Formatting Tags. Here we discuss how to format text by using different HTML Formatting tags. You may also have a look at the following articles to learn more –
- How HTML Works
- HTML Commands
- What is XML?
- HTML Format Tags
The post HTML Text Formatting Tags appeared first on EDUCBA.
This post first appeared on Best Online Training & Video Courses | EduCBA, please read the originial post: here
