When we come across to develop a website first we think of “What are the basic HTML tags” it comes to our mind first and then the tags list and attributes and values to apply while displaying it to the user who accesses the website.
Basic HTML Tags list and attributes.
Welcome to our comprehensive guide on HTML tags! HTML, or Hypertext Markup Language, is the backbone of any website and any web developer needs to have a solid understanding of how to use different tags and elements to create a well-structured and visually appealing webpage.
This blog post will cover 40 of the most important HTML tags, providing an in-depth look at their uses and how they can be implemented to create a dynamic user experience.
Whether you’re a beginner or an experienced developer, this guide will be a valuable resource as you work to master the art of HTML tags. So, let’s get started and learn how to take your web development skills to the next level!
40 HTML Tags List with its attributes: –
| Sr.no | Tag | Description | Example |
| 1 | <html> | Defines the root element of an HTML document. | <HTML> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>This is some content.</p> </body> </html> |
| 2 | <head> | Contains meta information about the document, a link to a stylesheet file, scripting information such as JavaScript or VBScript, information useful for SEO purposes, style information for a particular HTML tag, and a title to be displayed on the upper bar of the webpage, etc. | <HTML> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>This is some content.</p> </body> </html> |
| 3 | <title> | Defines the title of the document, which is displayed in the browser’s title bar or tab. | <HTML> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>This is some content.</p> </body> </html> |
| 4 | <body> | Defines the main content of the document. | <HTML> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>This is some content.</p> </body> </html> |
| 5 | <h1>….<h6> | Defines a heading. There are six levels of headings, with <h1> being the most important and <h6> being the least. | <h1>Welcome to my page</h1> <h2>Welcome to my page</h2> <h3>Welcome to my page</h3> <h4>Welcome to my page</h4> <h5>Welcome to my page</h5> <h6>Welcome to my page</h6> |
| 6 | <p> | Defines a paragraph. | <p>This is some content. </p> |
| 7 | <a> | Defines a hyperlink. | <a href=”https://www.example.com”>Visit our website</a> |
| 8 | <img> | Defines an image. | <img src=”image.jpg” alt=”A beautiful landscape”> |
| 9 | <ul> | Defines an unordered list. | <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
| 10 | <ol> | Defines an ordered list. | <ol> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> </ol> |
| 11 | <div> | Defines a section of the document. | <div id=”header”> <h1>Welcome to my website</h1> <p>This is the header section of the page</p> </div> |
| 12 | <span> | Defines a small section of a document. | <p>This is some <span style=”color: red”>text</span> in a paragraph.</p> |
| 13 | <form> | Defines an HTML form for user input | <form action=”/output.php” method=”post”> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <br> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <br> <input type=”submit” value=”Submit”> </form> |
| 14 | <input> | Defines an input control where the user can enter data. | <form action=”/submit.php” method=”post”> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <br> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <br> <input type=”submit” value=”Submit”> </form> |
| 15 | <label> | Defines a label for an input element. | <form action=”/submit” method=”post”> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <br> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <br> <input type=”submit” value=”Submit”> </form> |
| 16 | <select> | Defines a drop-down list. | <select> <option value=”option1″>Option 1</option> <option value=”option2″>Option 2</option> <option value=”option3″>Option 3</option> </select> |
| 17 | <option> | Defines contents in a drop-down list. | <select> <option value=”option1″>Option 1</option> <option value=”option2″>Option 2</option> <option value=”option3″>Option 3</option> </select> |
| 19 | <textarea> | Defines a multi-line input control. | <textarea rows=”4″ cols=”40″>Enter your message here…</textarea> |
| 20 | <button> | Defines a clickable button. | <button type=”button”>Click me</button> |
| 21 | <fieldset> | Groups-related elements in a form. | <form> <fieldset> <legend>Personal information:</legend> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <br> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <br> </fieldset> </form> |
| 22 | <legend> | Defines a caption for an <fieldset> element. | <form> <fieldset> <legend>Personal information:</legend> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <br> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <br> </fieldset> </form> |
| 23 | <optgroup> | Defines a group of options in a drop-down list. | <select> <optgroup label=”Fruits”> <option value=”apple”>Apple</option> <option value=”orange”>Orange</option> </optgroup> <optgroup label=”Vegetables”> <option value=”carrot”>Carrot</option> <option value=”potato”>Potato</option> </optgroup> </select> |
| 24 | <progress> | Represents the progress of a task. | <progress value=”22″ max=”100″>22%</progress> |
| 25 | <time> | Defines a date/time. | <p>I was born on <time datetime=”1998-01-01″>January 1, 1998</time>.</p> |
| 26 | <details> | Specifies additional details that the user can view or hide. | <details> <summary>Copyright 1999-2022</summary> <p>Copyright 1999-2022 by John Doe. All rights reserved.</p> </details> |
| 27 | <summary> | Defines a visible summary for an <details> element. | <details> <summary>Copyright 1999-2022</summary> <p>Copyright 1999-2022 by John Doe. All rights reserved.</p> </details> |
| 28 | <picture> | Defines a container for multiple image resources. | <picture> <source media=”(min-width: 650px)” srcset=”images/large.jpg”> <source media=”(min-width: 465px)” srcset=”images/medium.jpg”> <img src=”images/small.jpg” alt=”A view of the ocean”> </picture> |
| 29 | <marquee> | This element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes. | <marquee>This text will scroll from right to left</marquee> <marquee direction=”down”> This text will scroll from bottom to top </marquee> <marquee direction=”up” width=”250″ height=”200″ behavior=”alternate” style=”border:solid”> <marquee behavior=”alternate”> This text will bounce </marquee> </marquee> |
| 30 | <em> | This tag element is used to define emphasized text. The content inside is typically displayed in italic. | <p>Your <em>Marks</em> are out of!</p> |
| 31 | <br> | Inserts a line break, creating a new line of text. | <p> This text is on one line. <br> This text is on another line. </p> |
| 32 | <hr> | Creates a horizontal rule or a line across the page. | <p> This text is on one line. <hr> This text is on another line. </p> |
| 33 | <b> | Makes the text bold. | <b>This text is bold.</b> |
| 34 | <i> | Makes the text italic. | <i>This text is italic.</i> |
| 35 | <meta> | Provides metadata about the document, such as keywords for search engines i.e SEO, or the character set of the document. | <meta name=”keywords” content=”HTML, tags”> |
| 36 | <link> | Links to an external resource, such as a stylesheet. | <link rel=”stylesheet” href=”styles.css”> |
| 37 | <style> | Defines a section for CSS styles to be applied to the document. | <style>body { background-color: blue; }</style> |
| 38 | <script> | Defines a section for JavaScript code to be executed. | <script> function sayHello() { alert(‘Hello’); } </script> |
| 39 | <table> | Creates a table. | <table><tr><td>Data</td></tr></table> |
| 40 | <u> | Displays text with underline. | <u>Hello</u> |
CONCLUSION:-
In conclusion, HTML tags are an essential part of any website development, providing the structure and content that make up a webpage. By understanding how to use the various tags, you can create a cohesive and visually appealing user experience.
We have covered 40 of the most important HTML tags in this post, from the basics to more advanced elements. By mastering these tags, you will be able to create a wide range of web pages that are both functional and visually appealing.
We hope that this guide has provided you with valuable insights and practical examples to help you take your web development skills to the next level. Keep practicing and experimenting with different tags, and you’ll be a pro in no time!
Basic Java Practical Questions Read More
How to Run Skill-oriented HTML Programs using Mobile Read More
Pingback: HTML IMP Program Coding QUESTIONS SOLUTIONS | Techniyojan