HTML Text Formatting Tags-HTML Tutorial-php.cn

HTML Text Formatting Tags

王林

Release： 2024-09-04 16:16:32

Original

854 people have browsed it

Formatting 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., was 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 a 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

Code:

<!DOCTYPE> <html> <body> Here is some text in bold. </body> </html>
Copy after login

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 has some logical importance.

Example

Code:

<!DOCTYPE> <html> <body> This is an important content formatted using the strong tag , and this is just normally formatted text </body> </html>
Copy after login

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 display, lets the browser know that it has semantic importance.

Example

Code:

<!DOCTYPE> <html> <body> This is the first para in italic text. This content is made italics with the em tag, This is normal text </body> </html>
Copy after login

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 a visitor’s attention on that text easily.

Example

Code:

<!DOCTYPE> <html> <body> <h3> This text uses Mark tag to highlight text on the page </h3> </body> </html>
Copy after login

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 a link.

Example

Code:

<!DOCTYPE> <html> <body> This is Text with underline tag. </body> </html>
Copy after login

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

Code:

<!DOCTYPE> <html> <body> <strike> Here is a sentence with strike through text </strike>. </body> </html>
Copy after login

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 the same. To get it on a browser, we have to use the tag.
Example Code: <!DOCTYPE>lt;html> <body> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt> </body> </html> Copy after login Output: 7. Subscripted Text in HTML In math and chemistry, using subscript is an absolute requirement on 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 Code: <!DOCTYPE> <html> <body> This is normal text Notice something different with this text? </body> </html> Copy after login 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 a user, the shown text is the same as the tag in strikethrough tag, meaning it is shown in strikethrough formatting. Example Code: <!DOCTYPE> <html> <body> This is normal text <del> This is text between del tag. </del> </body> </html> Copy after login 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 is involved. You can use the tag when citing with adding in-page links with too.} Example Code: <!DOCTYPE> <html> <body> This is Normal text This text is in superscript. </body> </html> Copy after login 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 a heading or increase the font size with a tag, use content between this tag will be displayed in noticeably larger text size. Example Code: <!DOCTYPE> <html> <body> This is Normal text <big> This text in in larger size. </big> </body> </html> Copy after login Output: 11. Making Text smaller with HTML Like the tag , you can use to make text smaller on the screen without using CSS or headings. Example Code: <!DOCTYPE> <html> <body> This is Normal text the size of this text is smaller </body> </html> Copy after login Output: Conclusion Now that you have learned how the formatting of text in HTML works, you should be able to design pages with correct and professional-looking text layout and formatting. It would help if you used normal text and formatting where possible; using custom formatting only when needed gives your pages a neat look. The normal text size 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. The above is the detailed content of HTML Text Formatting Tags. For more information, please follow other related articles on the PHP Chinese website!