1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Phrase tags in HTML

Discussion in 'Web Design, HTML And CSS' started by MinalS, Jun 16, 2016.

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    31
    Trophy Points:
    0
    The phrase tags are added for a particular representation and can be viewed similar as other tags. Let start learning with the different tags with examples.

    Marked text

    The <mark>...</mark> tag is useful in displaying the element in yellow color. All the other content appear normal. The tag is used for highlighting the text for the user.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Marked tags</title>
    </head>
    <body>
    <p>The most <mark>important</mark> text is highlighted</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Emphasized text

    The text added inside the <em>...</em> tag is emphasized in the display.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Emphasized text</title>
    </head>
    <body>
    <p>The most <em>important</em> text is emphasized</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Strong text

    The <strong>...</strong> tag is used for displaying the important text in the document.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Strong text</title>
    </head>
    <body>
    <p>The <strong>difficulty</strong> level is high</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Acronym element

    The <acronym>...</acronym> tag is useful for highlighting the text in the document. The text added inside the tags is displayed as it appears.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Acronym</title>
    </head>
    <body>
    <p>The <acronym>text</acronym> is shown</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Text abbreviation

    The <abbr>...</abbr> tag is used for displaying the abbreviated text in the document. The complete description of the tag must be added inside the title attribute.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Abbreviation</title>
    </head>
    <body>
    <p>He completed degree of <abbr title="Master of Business Administration">M.B.A</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Special terms

    The <dfn>...</dfn> element helps user to define a specific term. The display of text is in italic format.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Special Terms</title>
    </head>
    <body>
    <p>The <dfn>specific</dfn> keyword is used</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Text direction

    Using the <bdo>...</bdo> tag user can override the current direction of the text.
    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Text Direction</title>
    </head>
    <body>
    <p>Left to right</p>
    <p><bdo dir="rtl">The text moves from right to left direction</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Quoting text

    The <blockquote>...</blockquote> tag is used for quoting a passage from a different source. The text added inside the element is indented from left to right with the edges of text surrounding it.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Quote text</title>
    </head>
    <body>
    <p>The text to be added inside the document</p>
    <blockquote>The data added inside the tag defines that the element leaves edges.
    It is displayed as a block of code</blockquote>
    </body>
    </html>
    
    Output:

    [​IMG]

    Short quotations

    Using the <q>...</q> tag, user can add short quotations to the code. A double quote is added to the text in the specific sentence.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Short quotes</title>
    </head>
    <body>
    <p>A famous phrase, <q>An apple a day keeps doctor away<q>.</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Computer code

    The <code>...</code> tags contain the programming code that is displayed on the web page. It is displayed in the monospaced font style.

    Example:

    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Computer codes</title>
    </head>
    <body>
    <p>Simple value <code>Added in the coding</code> and can be viewed</p>
    </body>
    </html>
    
    
    Output:

    [​IMG]

    Text citations

    The text to be placed inside the source can be quoted using the <cite>...</cite> tags. The data present in the <cite> tag is represented in italic format.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Text citations</title>
    </head>
    <body>
    <p>The examples can be accessed from any <cite>E-Learning website</cite></p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Programming variables and output

    The elements present in the <pre> or <code> tags are used for defining they are variables.

    Example:

    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Variables</title>
    </head>
    <body>
    <p><code>document.write("<var>emp-id</var>")</code></p>
    </body>
    </html>
    
    
    Output:

    [​IMG]

    Keyboard text

    The <kbd>...</kbd> tags are used for defining the keyboard text. It indicates the user with the content to be added inside the tags.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Variables</title>
    </head>
    <body>
    <p>New Text<kbd>Text to be added</kbd>New Text</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Address text

    Any address can be easily defined inside the <address>...</address> element.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Address Text</title>
    </head>
    <body>
    <address>184, St. Georges Court - Glasgow</address>
    </body>
    </html>
    
    Output:

    [​IMG]
     
    Last edited by a moderator: Jan 21, 2017

Share This Page