HTML important tags

0 votes
31 views
Ethan Karla asked 14 days ago in Web Application by Ethan Karla

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

1 Answer

0 votes
Shivam Prajapati answered 14 days ago by Shivam Prajapati

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!