HTML important tags

Asked 12-Jul-2021
Viewed 154 times

0

State the list of important tags in HTML?  Describe it with the help of an example?


1 Answer


1

There are many tags in HTML which can help you to build a good website. Without wasting time I am switching to the example where you will clear most of its topics :

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <link rel='icon' type='image/ico' href='https://www.mindstick.com/Images/mindstick-logo.png' />
    <title>Mindstick Software</title>
    <link rel='stylesheet' type='text/css' href='style.css' />
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name='description' content='Unleash your imagination' />
    <meta name='keywords' content='mindstick software' />
    <meta name='author' content='Mindstick - Developer' />
    <style>
        body {
            margin-left: 30%;
            margin-right: 30%
        }
        .d-flex {
            display: flex;
        }
        .justify-content-center {
            justify-content: center;
        }
        .flex-row {
            flex-direction: row;
        }
        .flex-column {
            flex-direction: column;
        }
        .mb-0 {
            margin-bottom: 0px !important;
        }
        .w-100 {
            width: 100%
        }
        .m-1 {
            margin: 10px;
        }
        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class='d-flex justify-content-center'>Form Tag</h1>
    <form class='d-flex m-1 flex-column justify-content-center'>
        <fieldset class='w-100'>
            <legend>User basic information:</legend>
            <div class='d-flex flex-column'>
                <label class=' mb-0 m-1 '>First Name</label><br />
                <input type='text' class='m-1' placeholder='First Name' required /><br />
                <label class='m-1 mb-0'>Last Name</label><br />
                <input type='text' class='m-1' placeholder='Last Name' required /><br />
                <label class='m-1 mb-0'>Email Id</label><br />
                <input type='email' class='m-1' placeholder='Email ID' required /><br />
                <label class='m-1 mb-0'>Password</label><br />
                <input type='password' class='m-1' placeholder='Password' required /><br />
                <textarea class='m-1' rows='9'>
Mindstick deals with all types of Software Development
</textarea><br />
                <select class='m-1'>
                    <optgroup label='Delivery Option'>
                        <option>Home</option>
                        <option>Office</option>
                        <option>Other</option>
                    </optgroup>
                </select>
            </div>
            <div class='d-flex justify-content-center'>
                <input type='submit' class='m-1' value='Submit' />
                <button type='reset' class='m-1'>Reset</button>
            </div>
        </fieldset>
    </form>
    <hr />
    <h2>Map Tags </h2>
    <p> At the topleft end there is a link of Mindstick Website which is created with the help of coordiantes.</p>
    <code>Syntax : (x1,y1,x2,y2)</code>
    <img src='https://source.unsplash.com/500x700/?macbook,laptop' usemap='#web' alt='No image found' />
    <map name='web'>
        <area shape='rect' coords='0,0,40,20' href=''>
    </map>
    <hr />
    <h2>Link Tags</h2>
    <a target='_blank' href='/Services'>Services</a><br>
    <a target='_blank' href='/DeveloperSection'>Developer Section</a><br>
    <a target='_blank' href='/career'>Career</a><br>
    <hr />
    <h2>Table tags</h2>
    <table border='1' class='text-center'>
        <caption>Employee Details</caption>
        <colgroup>
            <col span='1' style='background-color: #7fffd4'>
            <col span='2' style='background-color: #98f5ff'>
        </colgroup>
        <thead>
            <tr>
                <th>Name</th>
                <th>Role</th>
                <th>Date of Joining</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Shivam</td>
                <td>Software Developer</td>
                <td>1st July,2021</td>
            </tr>
            <tr>
                <td>Sahil</td>
                <td>SEO</td>
                <td>1st July,2021</td>
            </tr>
            <tr>
                <td>Ravi</td>
                <td>Software Developer</td>
                <td>1st July,2021</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Role</th>
                <th>Date of Joining</th>
            </tr>
        </tfoot>
    </table>
    <hr />
    <h2>Text tags</h2>
    <h1>This is a heading 1</h1>
    <h2>This is a heading 2</h2>
    <h3>This is a heading 3</h3>
    <h4>This is a heading 4</h4>
    <h5>This is a heading 5</h5>
    <h6>This is a heading 6</h6>
    <p>Here is a first paragraph of text. Paragraph tag removes the extra space in the tag</p>
    <p>Hello <br /> It breaks the line</p>
    <p><strong>I am Strong tag</strong></p>
    <p><em>I am Emphasis tag</em></p>
    <abbr title='You are in Abbreviation tag'>Hover here!</abbr><br />
    <acronym title='Mindstick Software Private Limited'>MSPL</acronym>
    <address>
        Contact us at:<br>
        <a href='mailto:contact@mindstick.com'>contact@mindstick.com</a>
    </address>
    <bdo dir='rtl'>......tnetnoC</bdo>
    <blockquote cite='https://www.mindstick.com/'>
        <p>
            Welcome to MindStick Software Private Limited
        </p>
    </blockquote>
    <cite>Patrika Chauraha, Prayagraj</cite>
    <p> Tag line of the company : <q>unleash your imagination </q></p>
    <code>
        class Program {
        public static void main (String[] args )
        {
        System.out.println('Hello World');
        }
        }
    </code>
    <p>
        If you will do <del>hard work </del> <ins>smart work</ins> then you will get success easily
    </p>
    <p><dfn>HTML</dfn> A markup language for Web designing</p>
    <p>If you are using Visual Studio then you can use shortcut <kbd>ctrl + s</kbd> to save your current document. </p>
    <pre>
This is a formatted text
by using the HTML pre tag. It maintains
    both space and line break.
</pre>
    <p><samp>Error 5: Access is denied by admin.</samp></p>
    <p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
</body>
</html>


This will help you to build more reasoning about the use of HTML.

Thanks for reaching the end. Like it if you find it helpful!


Loading...
Ads