Shantanu's Blog
HTML Elements More

HTML Elements More

Shantanu Gopale's photo
Shantanu Gopale
·

7 min read

Table of contents

  1. <bdo> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>BDO TAG</title>
 </head>
 <body>
     <bdo dir="rtl">SHANTANU</bdo><br/>
     <!-- it's used to make the text Right to Left -->
     <!-- it's making Fun -->
 </body>
 </html>

    It's the Bidirectional Text Override element. It's used to make the text Right to Left or Left to Right.

    <bdo> tag has one attribute name as dir in which we have to specify the direction that we have to display either (rtl) Right to Left or (ltr) Left to Right.

  2. <blockquote> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Citation</title>
 </head>
 <body>
 <blockquote cite="https://www.huxley.net/bnw/four.html">
   <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
   <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
 </blockquote>
 </body>
 </html>

    It's Block Quotation element. The HTML element indicates that the enclosed text is an extended quotation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the element.

  3. <b> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Formatting Tags</title>
 </head>
 <body>
     <b>Shantanu</b><br/>
     <!-- its' used to highlight the text -->
 </body>
 </html>

    It's Bring Attention element. This tag used to highlight the text. When we used <b>...</b> tag, and add any text into it then, it's in the form of Bold.

  4. <strong> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Formatting Tags</title>
 </head>
 <body>
     <strong>Shantanu</strong><br/>
     <!-- it's used to highlight the content (USED IN PROFESSIONAL CODING) -->
 </body>
 </html>

    It's Strong element. This tag used to highlight the Content. When we used <strong>...</strong> tag, and add any text into it then, it's in the form of Bold or we can say Strong effect. (Strong tag is used in the Professional Coding.).

  5. <i> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Formatting Tags</title>
 </head>
 <body>
     <i>Shantanu</i><br/>
     <!-- it's used to italic the text -->
 </body>
 </html>

    It's the idiomatic text element. This tag is used to italicized the text. Whatever we write in the <i>...</i> is gets in the italic form.

  6. <em> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Formatting Tags</title>
 </head>
 <body>
     <em>Shantanu</em><br/>
     <!-- it's ued to empasize the the text (USED IN PROFESSIONAL CODING) -->
 </body>
 </html>

    It's the emphasis element. This tag is used to empasize the text. It's similar to the idiomatic tag but, it's used in the professional coding.

  7. <small> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Formatting Tags</title>
 </head>
 <body>
     <small>SHANTANU</small><br/>
     <!-- it's used to small the content  -->
 </body>
 </html>

    It's Side Comment element. It's used to represent the side-comment and small prints. Whatever we write in the <small>...</small> it gets small in size.

  8. <sub> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Formatting Tags</title>
 </head>
 <body>
     <p>H<sub>2</sub>O</p><br/>
     <!-- it's used to Subscript  -->
 </body>
 </html>

    It's subscript element. It's used to make the content subscript. It's used to represent chemical formulas or numerical content.

  9. <sup> tag

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Formatting Tags</title>
 </head>
 <body>
     <p>CO<sup>2</sup></p><br/>
     <!-- it's used to superscript -->
 </body>
 </html>

    It's Superscript element. It's used to make the content superscript. It's used to represent chemical formulas or numerical content.

  10. <ins> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting Tags</title>
</head>
<body>
    <ins>Shantanu</ins><br/>
    <!-- it's use to insert or underlined th text -->
</body>
</html>

    It's Inserted text element. It's used to insert or underlined the text. It's used in the professional coding.

  11. <u> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting Tags</title>
</head>
<body>
    <u>Shantanu</u><br/>
    <!-- it's used to underlind the text -->
</body>
</html>

    It's Underline element. It's used to underlined the text.

  12. <del> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting Tags</title>
</head>
<body>
    <del>Shantanu</del><br/>
    <!-- it's used to on the text horizonal line -->
</body>
</html>

    It's Delete element. Whatever we write in this tag, it get in the form of linethrough or we can say strikethrough. It's used in the E-Commerce Website where Past Price is mark deleted and one is inserted.

  13. <mark> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting Tags</title>
</head>
<body>
    <mark>Shantanu</mark><br/>
    <!-- it's used to mark the text with color -->
</body>
</html>

    It's Mark element. It's used to mark the text or content. This tag is used to represent or highlight the text with the color.

  14. <q> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting Tags</title>
</head>
<body>
    <q>Shantanu</q><br/>
    <!-- it's used to quote on the text-content -->
</body>
</html>

    It's Quote element. It's used to make the text meaningful. Whatever we write in this tag gets Quoted Automatically.

  15. <heading> tags

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Headings</title>
</head>
<body>
    <!-- There area 6 Types of Headings -->
    <h1>Shantanu</h1>
    <h2>Shantanu</h2>
    <h3>Shantanu</h3>
    <h4>Shantanu</h4>
    <h5>Shantanu</h5>
    <h6>Shantanu</h6>
</body>
</html>

    There are 6 Levels of headings => <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> and <h6></h6>.

    Heading tags are used to give the Heading to the website.

    Heading <h1> is the topmost and larger heading in the HTML and Heading <h2> is the lastmost and smaller heading in the HTML.

  16. <iframe> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe</title>
</head>
<body>
    <p>Sir's You tube Channel</p>
    <iframe src="https://www.youtube.com/embed/eCU7FfMl5WU?si=TGgQENKgd5UMj_NB" frameborder="2" height="200px" width="370px">Hitesh sir's Video</iframe>
</body>
</html>

    It's the Inline Frame element. It's embed the another HTML page into current HTML page.

  17. <p> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraph</title>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi doloribus vitae cumque saepe dicta, veniam repellendus asperiores ad obcaecati cum tempore. Magnam at incidunt quasi recusandae modi optio animi illum cumque velit perspiciatis nemo, repellat deleniti assumenda minima, sunt culpa ab. Accusantium ut nobis voluptatum ipsam unde minus deserunt. Perspiciatis laudantium beatae delectus, nostrum laborum laboriosam. Dolorem possimus provident perspiciatis quaerat voluptate nam dolores, quia repudiandae modi, harum autem? Quos!</p>
</body>
</html>

    It's Paragraph element. Any text format content on the website is written inside the <p> tag . Any information we can add using this paragraph tag.

  18. <pre> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pre Tag</title>
</head>
<body>
    <!-- it's display the text as it is -->
    <pre>Johny, Johny!
        Yes, Papa
        Eating sugar?
        No, Papa
        Telling lies?
        No, Papa
        Open your mouth!
        Ha! Ha! Ha!</pre>
</body>
</html>

    It's Preformatted element. This tag is used to show the content as it is like in what's style we write the content in that style is shows the content to us. It's very useful in writing the Poems and Stories.

  19. <table> tag

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
</head>
<body>
    <table border="1">
        <tr>
                <td>Sr.No</td>
                <td>Lect 1</td>
                <td>Lect 2</td>
                <td>Lect 3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>SCI</td>
            <td>Maths</td>
            <td>P.T</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Maths</td>
            <td>SCI</td>
            <td>P.T</td>
        </tr>
        <tr>
            <td>3</td>
            <td>COMP</td>
            <td>SST</td>
            <td>P.T</td>
        </tr>
    </table>
</body>
</html>

    It's table element. This tag is used to create the Tables. For creating the table, we basically needs <table> tag, <th> tag, <tr> tag and <td> tag.

    <th> tag is used to give the header to the particular column in the table.

    <tr> tag is used to represent the row. After the <table> tag we should write the <tr> tag in the we add the data rowise using <td> tag.

    <td> tag is used to add the data inside the rows of the table.

    The <table> tag has one attribute "border" in that we have to specify the border size, if we not specify the border then table is not printed only data is display without border.

Programming BlogsJavaScriptfull stackDeveloperHTML5CSS