HTML Text Tags Tutorial

Written By:

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 79 reviews
  1. Home
  2. Frontend
  3. HTML Tutorial
  4. HTML Text
  1. Plain Text
  2. P Tag
  3. Address Tag
  4. Blockquote Tag
  5. Pre Tag
  6. B Tag (Bold)
  7. I Tag (Italic)
  8. S Tag (Strikethrough)
  9. U Tag (Underline)
  10. Small Tag
  11. TT Tag (Deprecated)
  12. Font Tag (Deprecated)

HTML Text is written in tags. By default, the text written in body is called plain text. All text elements are written inside body. <p> is the common tag use to write paragraphs. There are six headings in html, h1-h6. Here is a list of popular HTML Text tags with examples and best practices for modern web development.

By default the plain text is black in color and with transparent background. To change color and backgrounds, we need to use CSS. For better accessibility and SEO, always use semantic HTML tags where possible.

Plain Text

Any text written directly inside body ( without any tag ) is known as Plain text in html. Plain Text always starts in same line and supports single white space. The default font size of plain text is 16px.

Plain Text Plain Text

<!doctype html>
<html lang="en">
<head>
    <title>Hello HTML</title>
    <meta charset="UTF-8">
</head>
<body>
   Plain Text 
   Plain Text 
</body>
</html>

Paragraph Tag

Paragraph Tag or p tag is most commonly used tag to write a paragraph in HTML. By default p tag is Block level and occupy 1 em font size. P tag always start and ends with a new line. Default width of p tag is 100% of parent element.

Align attribute is removed in HTML5. To align text in Html5, use CSS text align.

This is a paragraph

This is another paragraph

 
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Address Tag

Address tag is used to add postal addresses or contact information in a webpage. Address is a semantic element and typically styled in italic. Default font-size is 1em. It helps search engines identify contact details.

Tech Altum
3rd Floor, OM Complex,
Sec 15, Noida UP, 201301
Ph: (0120) 4280181

<address>
Tech Altum <br>
3rd Floor, OM Complex, <br>
Sec 15, Noida UP, 201301<br>
<abbr title="Phone No">Ph</abbr> (0120) 4280181
</address>

Blockquote Tag

Blockquote tag is used to write a Block Level quotation with extended quotation in HTML. This is mainly for text with extended quotations. By default there is a margin of 40px from left and right in blockquote. Use it for citations to improve semantic structure and SEO.

This is blockquote Tag.
<blockquote> blockquote Tag </blockquote>

PRE Tag

All HTML Textual Tags ignore white space and line break. Means text is not formatted.
PRE Tag is the only tag which preserves the exact format in which you are writing, including spaces and line breaks. It's ideal for code snippets, poetry, or any preformatted text.

PRE Tag
PRE Tag              with white space
PRE Tag
with line break
<pre> PRE Tag </pre> 
		
<pre> PRE Tag               with white spacing more than one </pre> 
	
<pre> PRE 
Tag with line break </pre>

<b> Tag (Bold)

html b tag is used to bold text. The actual definition is offset text conventionally styled in bold as per Html5 documentation. b tag is inline level element. Note: For semantic emphasis, use <strong> tag instead.

This text is bold.


<p>This text is <b>bold</b>.</p>

<i> Tag (Italic)

html i tag is used to italic text. The actual definition is offset text conventionally styled in italic as per Html5 documentation. i tag is also inline level element. Note: For semantic emphasis, use <em> tag instead.

This text is italic.


	<p>This text is <i>italic</i>.</p>

<s> Tag (Strikethrough)

html s tag is used to strike through text which is incorrect or removed. s tag is also inline level element. For semantic purpose, use <del> tag.

This text is struck.


	<p>This text is <s>struck</s>.</p>

<u> Tag (Underline)

html u tag is used to underline text. u tag is also inline level element. Note: Avoid underlining text for emphasis as it can be confused with links; use CSS text-decoration instead.

This text is underlined.


	<p>This text is <u>underlined</u>.</p>

<small> Tag

html small tag is used to print small text. The default font-size of small tag is smaller (relative to parent element). small tag is also inline level element.

This text is small.

This text is small.


	<h1>This text is <small>small</small>.</h1>
	<p>This text is <small>small</small>.</p>

TT Tag (Deprecated)

TT( Tele Type) Tag was an inline element with default monospace font. In HTML5, we can use CSS font-family property to achieve the same effect. For code snippets, use <code> tag.

(Removed in HTML5)

TT Tag

<tt> TT Tag </tt>

Font Tag (Deprecated)

Font Tag was used to add color, font-family and size to the text inside font tag. But in HTML5, we use CSS to change style of text. For better maintainability and performance, always separate content from presentation.

(Deprecated in HTML5)

Default FONT Tag

Font Tag with color red

Font Tag with cursive face

Font Tag with size 1

Font Tag with size 7

Font Tag with size 3 and face "Times New Roman".

Font Tag with size 4 and face "Verdana".

Font Tag with size 5 and face "Comic Sans MS".

Font Tag with size 6, face Algerian and color blue.

<font> Default FONT Tag </font> 
		
<font color="red"> Font Tag with color red </font> 	

<font face="cursive"> Font Tag with cursive face </font>

<font size="1"> Font Tag with size 1 </font> 

<font size="7"> Font Tag with size 7 </font> 

<font size="3" face="Times New Roman"> Font Tag with size 3 and face "Times New Roman". </font> 

<font size="4" face="Verdana"> Font Tag with size 4 and face "Verdana". </font> 

<font size="5" face="Comic sans MS"> Font Tag with size 5 and face "Comic san MS". </font> 

<font face="algerian" size="6" color="blue"> Font Tag with size 6, face Algerian and color blue. </font>

Font and tt tags are deprecated in HTML5. Use CSS for styling instead.