HOME HTML CSS Javascript PHP Laravel

HTML Text Elements

Text elements were designed to display special types of text:

HTML Text Elements are special purpose tags that define the structural meaning of a block of text or the semantics of a text. Below is a list of text elements

  • <abbr> - It is used for abbreviate text.
  • <strong> - It is used for bold text.
  • <br> - It is used for important text.
  • <i> - It is used for italic text.
  • <em> - It is used for emphasized text.
  • <u> - It is used for underline text.
  • <mark> - It is used for marked text.
  • <code> - It is used for display the part of computer code.
  • <del> - It is used for deleted text.
  • <ins> - It is used for inserted text.
  • <sub> - It is used for subscript text.
  • <sup> - It is used for superscript text.
  • <q> - It is used for defines a text short quotation.
  • <address> - It is used for contact information about the author of the content.
  • <small> - It is used for text font size small.
  • <big> - It is used for text font size larger.

HTML <abbr> Elements

This tag is used to abbreviate a text. Write content between the <abbr> and </abbr> tags to abbreviate a text.

HTML <abbr> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>abbr example</title>
</head>
<body>

  <h4>Text Abbreviation tag</h4>
  <p>How to work <abbr title = "Abbreviate A Text">abbr </abbr>tag in a web pages. </p>  

</body>
</html>

Output of HTML <abbr> Elements

Edit it yourself

Text Abbreviation tag

How to work abbr tag in a web pages.

HTML <strong> Elements

The HTML element <strong> denotes that the material is of high significance, seriousness, or urgency. The contents are usually displayed in bold font in browsers.

HTML <strong> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>abbr example</title>
</head>
<body>

  <h4>displayed bold text</h4>
  <p>How to work <strong> String </strong>tag in a web pages. </p>  

</body>
</html>

Output of HTML <strong> tag

Edit it yourself

displayed bold text

How to work String tag in a web pages.

HTML <br> Elements

You'll note that hitting ENTER does not result in a new line when composing HTML paragraphs. The <br> element in HTML defines a paragraph break

Line breaks are defined using the HTML <br> element. and If you wish to start a new paragraph without opening a new line, use

HTML <br> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>This is a heading</title>
  </head>
  <body>

    <p>This is a best tutoriaols for html br tag 
      This is a best tutoriaols for html br tag  
      This is a best tutoriaols for html br tag </p>

    <p>This is a best tutoriaols for html br tag  <br> 
      This is a best tutoriaols for html br tag  <br> 
      This is a best tutoriaols for html br tag </p>

  </body>
</html>

Output of HTML <br> tag

Edit it yourself

This is a best tutoriaols for html br tag This is a best tutoriaols for html br tag This is a best tutoriaols for html br tag

This is a best tutoriaols for html br tag
This is a best tutoriaols for html br tag
This is a best tutoriaols for html br tag

HTML <i> and <em> Elements

The <i> tag in HTML is used to display italic text. This tag is commonly used to display a italic term, phrase, or key word in another language. The <i> tag serves as a container for the opening, content, and closing tags. like <i>....</i>

Use the <i> ... </i> or <em> </em> tags in HTML to make the text italic. Although both tags have the same effect, but different The only atlas that </i> tag is a phrase tag that results in emphasized text.

HTML <i> and <em> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>This is a Italic text</title>
  </head>
  <body>
		
    <i>This is a italic text</i>
    <p>This is a normal text</p>
    <em>This is a emphasize text</em>

  </body>
</html>

Output of HTML <i> and <em> tag

Edit it yourself
This is a italic text

This is a normal text

This is a emphasize text

HTML <u> Elements

In HTML, the <u> element was originally used to identify text that should be underlined, and is used to underline the closed text within the <u> tag. This tag is usually used to underline misspelled words. This tag needs a start and end tag.

A span of inline text with a non-textual annotation is defined by the HTML <u> element. It's presented as solid underlined text, although CSS attributes can modify that. HTML4.0 deprecated this element, which was reintroduced in HTML5.

HTML <u> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>html u tag | HTML Underline Tag</title>
  </head>
  <body>
		
    <p>U element was originally used to identify text <u>that should be underlined,</u> and is used to underline the closed text within the u tag. </p>
    <p>It's presented as solid underlined text, <u style="text-decoration: red wavy underline;">although CSS</u> attributes can modify that.</p>

  </body>
</html>

Output of HTML <u> tag

Edit it yourself

U element was originally used to identify text that should be underlined, and is used to underline the closed text within the u tag.

It's presented as solid underlined text, although CSS attributes can modify that.

HTML5 <mark> Elements

In HTML, the <mark> tag is used to define the marked content. It's used to draw attention to a certain section of text inside a paragraph. The <mark> tag is new in HTML 5.

The text included in the <mark> element appears with a yellow background in most browsers, however this may be modified using the CSS background-color property.

HTML5 <mark> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>How to highlight text in color using HTML</title>
  </head>
  <body>
		
    <h3>How to highlight text in color using HTML5</h3>
    <p>Highlighting text on a web page helps to draw the reader's attention to crucial information. 
    This text, for example, <mark>is highlighted in yellow and most likely drew your attention first.</mark>
    Text may be highlighted in a variety of ways. To get started, pick a technique from the list below and follow the steps.</p>

  </body>
</html>

Output of HTML5 <mark> tag

Edit it yourself

How to highlight text in color using HTML5

Highlighting text on a web page helps to draw the reader's attention to crucial information. This text, for example, is highlighted in yellow and most likely drew your attention first. Text may be highlighted in a variety of ways. To get started, pick a technique from the list below and follow the steps.

HTML <code> Elements

Computer code is represented via the HTML <code> element. It's a phrase tag that describes a section of computer code. It is displayed in the browser's default monospace typeface by default (also known as fixed-width font).

The enclosed text is defined as computer code using the <code> element. When showing blocks of computer code, it is frequently used in conjunction with the pre> element to retain line breaks and indentation.

The code tag is a special form of text that represents the output of a computer. The <code> element is displayed with set letter size, font, and spacing. HTML includes various techniques for text styling.

HTML5 <code> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>How to highlight text in computer code using HTML5</title>
  </head>
  <body>
		
    <h4>How to highlight text in computer code using HTML5</h4>
    <p>CSS rule can be defined for <code>code</code> selector to override browser default font face. Preferences set by the user can take precedence over the specified CSS.</p>

  </body>
</html>

Output of HTML <code> tag

Edit it yourself

How to highlight text in computer code using HTML5

CSS rule can be defined for code selector to override browser default font face. Preferences set by the user can take precedence over the specified CSS.

HTML <del> and <ins> Elements

The <del> tag is used to identify deleted text from a document but is retained to show a history of changes made to the document. For example, this can be used when rendering "track changes" or source code def information. The <ins> element can be used for the opposite purpose: to display text added to a document.

Browsers traditionally render the text found in the <del> tag as text with a strikethrough. You can use a companion tag called the <ins> tag to mark new text inserted into the document. This tag is also commonly referred to as the <del> element.

We will create a to-do list to show you how <del> and <ins> tags work.

HTML5 <del> and <ins> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>Where the Dell tag is used.?</title>
  </head>
  <body>
		
    <h4>To Do List</h4>
    <ul>
        <li><ins>PHP</ins></li>
        <li><del>HTML</del></li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

  </body>
</html>

Output of HTML <del> and <ins> tag

Edit it yourself

To Do List

  • PHP
  • HTML
  • CSS
  • JS

HTML <sub> Elements

In this HTML section I will show you how to use an HTML element called <sub> tag with examples.

Subscript content is added to an HTML page using the <sub> tag. The subscript text is defined by the sub> element. Subscript text is half a character below the main line and is occasionally displayed in tiny fonts. Chemical formulae can be written using subscript text, such as H2O to write H2O.

Characters that should be shown in a subscript location are identified using the <sub> tag. The element should be used to highlight content that follows typographic rules rather than for decorative purposes. CSS should be used to style text that is intended look subscript for solely decorative reasons.

HTML5 <sub> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>How do sub tags work?</title>
  </head>
  <body>
		
    <h4>How do sub tags work?</h4>
    <p>This is a chemical formula of Water is: H<sub>2</sub>O</p>
    <p>This is a  chemical formula of Carbon Dioxide is: CO<sub>2</sub></p>

  </body>
</html>

Output of HTML <sub> tag

Edit it yourself

How do sub tags work?

This is a chemical formula of Water is: H2O

This is a chemical formula of Carbon Dioxide is: CO2

HTML <sup> Elements

In this HTML section I will show you how to use an HTML element called <sup> tag with examples.

In an HTML page, the <sup> element specifies superscript content. When working with a field value of 36 ft2, for example, the number 2 appears as a superscript. The content in this superscript is in a tiny font and appears along the baseline above. The <sup> element is another frequent name for this tag. and Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used for footnotes.

HTML5 <sup> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>How do sup tags work?</title>
  </head>
  <body>
		
    <h4>How do sup tags work?</h4>
    <p>Pythagorean theorem: </p>
    <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>

  </body>
</html>

Output of HTML <sup> tag

Edit it yourself

How do sup tags work?

Pythagorean theorem:

a2 + b2 = c2

HTML <q> Elements

The <q> tag is a standard quotation tag and used for short quotation.

The <q> tag is an inline element used in HTML to indicate that the contained text is a brief quotation. It comes in handy when you need to include a quote on a web page without using paragraph breaks. A visible quote mark is commonly used to indicate this tag. The sections that follow provide details on this tag, including an example of it in action, as well as associated properties and browser compatibility.

HTML5 <q> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>How do q tags work?</title>
  </head>
  <body>
		
    <h4>How do q tags work?</h4>
    <p>quotation :- <q>what is a html tag?</q></p>

  </body>
</html>

Output of HTML <q> tag

Edit it yourself

How do q tags work?

quotation :- what is a html tag?

HTML <address> Elements

In this HTML section we will explain how to use an HTML element called <address> tag with examples.

The HTML <address> tag is used to refer to the authorship information of an article or webpage. It may contain any type of information that is required, such as URL, physical address, phone number, email, other links, etc.

The italic version of the contact information placed between address> tags is most commonly shown by the browser.

HTML5 <address> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
  <head>
    <title>How do address tag work?</title>
  </head>
  <body>
		
    <h4>How do address tag work?</h4>
    <address>
    Compny Information:<br>
    www.webthestuff.com<br>
    #0009, Near 3 Star Hotel<br>
    123 W 28th St, New York, NY 10001, United States
    </address>

  </body>
</html>

Output of HTML <address> tag

Edit it yourself

How do address tag work?

Compny Information:
www.webthestuff.com
#0009, Near 3 Star Hotel
123 W 28th St, New York, NY 10001, United States

HTML <small> Elements

In this HTML tutorial we have shown you how to use an HTML element called <small> tag with examples.

The HTML <small> element reduces the text font size by one size from the document's basic font size (for example, big to medium, medium to tiny, and so on). The <small> tag in HTML5 is used to highlight secondary significance elements such as copyright, side remarks, and legal notifications.

HTML5 <small> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>Demo of small tag</title>
</head>
<body>
	
  <h4>Demo of small tag</h4>
  <p style="color: green;">This is normal text...  
    <small style="color: red;">This is a small text with red color...  
      <small style="color: green;">This is a small text with green color...  </small>
    </small>
  </p>
  
</body>
</html>

Output of HTML <small> tag

Edit it yourself

Demo of small tag

This is normal text... This is a small text with red color... This is a small text with green color...

HTML <big> Elements

In this HTML tutorial we have shown you how to use an HTML element called <big> tag with examples.

HTML <big> tags enlarge the text in an HTML document to a font size. This tag is also commonly referred to as the <big> component. In HTML 5, it can be used with CSS.

HTML5 <big> Elements Example

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>Demo of big tag</title>
</head>
<body>
	
  <h4>Demo of big tag</h4>
  <p style="color: green;">This is normal text...  
    <big style="color: red;">This is a big text with red color...  
      <big style="color: green;">This is a big text with green color...  </big>
    </big>
  </p>
  
</body>
</html>

Output of HTML <small> tag

Edit it yourself

Demo of big tag

This is normal text... This is a big text with red color... This is a big text with green color...