Logical HTML Tags

All original objective of HTML is to mark up the text and then indicating the purpose for each of the document. Any text within <h1> is called as header and any text within <code> are considered to be the code of the program. With reference to this, the logical tags, also known as the idiomatic elements suggests different types of information and most of them are delivered in some specific ways like the Italics, the Bold or the Monospace.

html codeTherefore, when any emphasis is done on the text it is represented with Italics and when you refer to any strong text it can be indicated with bold letters. So logical tags are quite similar to bold or italics texts and that’s why people are often in a dilemma that why the code <b> is to be used? Basically, the logical tags also help in “formatting” tags that indicates a physical appearance of the document. Unfortunately, the logical tags are loosing out importance but still it serves some important purpose.

    • The logical tags, similar to the general html document tags, allow the browser for rendering information in such a manner that it make accessible to browser. Any text that should be emphasized with code <em> and can be displayed with italics or bold.
    • All logical tags help the author for keeping a track of what you are saying without any sort of distraction. If you need someone’s address, it will be presented in an appropriate manner.

All <strong> and <em> are displayed like <b> and <i> with the physical tags. Most of the logical tags do not control the display of the text, but it will depend on the browser that whether it will be able to render the text enclosed between the tags. Therefore, the bold or the italics of the text vary according to the browser. After you have put in the code, for result you can check put the “Display” button. In the process another browser window pops up along with the result. You should modify the code in the box and can check the results again. You can check out the following syntax:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <head>
        <title>logical tags</title>
    </head>
    <body>
        <strong>strong</strong>
            <br/><br/>
        <em>emphasis</em>
            <br/><br/>
        <abbr>abbreviation</abbr>
            <br/><br/>
        <cite>citation</cite>
            <br/><br/>
        <code>code</code>
            <br/><br/>
        <dfn>definition</dfn>
            <br/><br/>
        <kbd>keyboard</kbd>
            <br/><br/>
        <samp>sample</samp>
            <br/><br/>
        <var>programming variable</var>
    </body>
</html>

All header tags are also considered as Logical tags, and they are represented <h1> and for the major section of the document <h2>. It is also for the secondary sections of the document and with the highest header <h1>. The header syntax appears like the following.

1
2
3
4
5
6
7
8
9
10
11
<h1>allen boris</h1>
<h2>my resume</h2>
<h3>job experience</h3>
<h4>programmer</h4>
<h4>entrepreneur</h4>
<h2>my hobbies</h2>
<h3>macrame</h3>
<h4>poetry</h4>
<h5>karate</h5>

The most common HTML tags are:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--...--> Defines a comment
<!DOCTYPE>  Defines the document type
<a>     Defines an anchor
<abbr>  Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<applet> Deprecated. Defines an embedded applet
<area /> Defines an area inside an image-map
<b>     Defines bold text
<base /> Defines a default address or a default target for all links on a page <basefont /> Deprecated. Defines a default font, color, or size for the text in a page
<bdo>   Defines the text direction
<big>   Defines big text   
<blockquote>    Defines a long quotation
<body>  Defines the document body
<br />  Defines a single line break