Tutorialspoint.dev

HTML | Phrase Tag

Phrase Tag: In HTML, phrase tag is used to indicate the structural meaning of a block of text. For example, abbr tag indicates that the phrase contained the abbreviation word. Some examples of phrase tags are: abbr, strong, mark, . . . etc.

Emphasized Text: The em tag is used to emphasized the text and this tag displays the italic font in a browser. It simply means anything written within em tag is shown as emphasized Text.
Syntax:

<em> Text Content </em>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Emphasized Text</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><em>GeeksforGeeks</em> emphasized tag</p>
    </body
</html>                    

Output:
emphasize tag

Text Abbreviation: To abbreviate a text in HTML use abbr tag. Abbreviation of text written within opening and closing abbr tag.
Syntax:



<abbr title = "GeeksforGeeks">GFG</abbr>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Text Abbreviation</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><abbr title = "GeeksforGeeks">GFG</abbr> abbreviation tag</p>
    </body
</html>        

Output:
text abbreviation tag

Acronym Element This tag is used to indicate that the content written inside opening and closing acronym tag is an acronym.
Syntax:

<acronym> Text Content </acronym>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Acronym tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><acronym>GeeksforGeeks</acronym> acronym tag</p>
    </body
</html>                    

Output:
acronym tag

Text Direction: The bdo tag stands for Bi-directional Override. It is used to override the current text direction. Default text direction is from left to right. But it can override by using bdo tag.

  • ltr: specifies text direction from left to right.
  • rtl: specifies text direction from right to left.
  • auto: In this tag, browser figure out the text direction, based on the content (only recommended if the text direction is unknown).

Syntax:

<bdo dir = "ltr/rtl/auto"> Text Content </bdp>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Text decoration tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p>GeeksforGeeks text decoration tag</p>
        <p><bdo dir = "rtl">GeeksforGeeks text decoration tag</bdo></p>
    </body
</html>                    

Output:
text decoration tag

Short Quotations: To add double quotes within a sentence use q tag. The content written inside opening and closing q tag will be printed in quotes.
Syntax:



<q> Text Content </q>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Quotation tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><q>GeeksforGeeks</q> quotation tag</p>
    </body
</html>        

Output:
short quotation tag

Marked Text: The content written within open and close mark tag will display as yellow mark. Basically it works like highlighter and it is used to highlight some words in a sentence.
Syntax:
<mark> Text Content </mark>
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Mark tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><mark>GeeksforGeeks</mark> mark tag</p>
    </body
</html>        

Output:
marked tag

Strong Text: The strong tag is used to show important words in a sentence. The content written within open and close strong tag will display as important word.
Syntax:

<strong> Text Content </strong>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>strong tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><strong>GeeksforGeeks</strong> strong tag</p>
    </body
</html>        
<head>

Output:
strong tag

Quoting Text: The blockquote tag is used in quotation sentence. It means the content written in between open and close blockquote tag will be considered as a quoting text.
Syntax:
<blockquote> Text Content </blockquote>
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Blockquote tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <blockquote>GeeksforGeeks is a computer science
        portal where you can learn programming. It contains
        well written, well thought and well explained 
        computer science and programming articles, quizzes
        and ...</blockquote>
    </body
</html>        
<head>

Output:
blockquote tag

Programming Code: To represent programming code in html code tag is used. The content written within opening and closing code tag is considered as programming code.
Syntax:



<code> Text Content </code>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>code tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><code>GeeksforGeeks Programming</code> code tag</p>
    </body>
</html>                    

Output:
code tag

Program Output: The output of program written in samp tag. The content written within opening and closing samp tag will print the sample output.
Syntax:

<samp> Text Content </samp>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Program output tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            p {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <p><samp>GeeksforGeeks</samp> program output tag</p>
    </body>
</html>                    

Output:
output tag

Address Text: The address tag is used to display the address in web browser. The content written within opening and closing address tag is considered as an address in HTML.
Syntax:

<address> Text Content </address>

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Address tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
            }
            address {
                font-size:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <address>GeeksforGeeks office, sector-142, Noida, India</address>
    </body>
</html>                    

Output:
address tag



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter