Here are the 10 most used HTML tags with examples:
1. <html>:
This tag represents the root of an HTML document. All other tags must be contained within this tag.
<html> <!-- Other tags go here --> </html>
2. <head>:
This tag contains information about the document, such as the title, scripts, and styles. It should be placed at the beginning of the HTML document, before the <body> tag. The <head> element can also contain other elements, such as <meta> tags, which provide additional information about the webpage, and <script> tags, which are used to add JavaScript to the webpage.
<html> <head> <title>My Website</title> </head> <!-- Other tags go here --> </html>
3. <body>:
This tag contains the content that is displayed in the browser window. It should be placed after the <head> tag and contain all of the content that is displayed in the browser window. Note that the <body> element should not be used to add content that is not directly related to the main content of the webpage. For example, you should not use the <body> element to add navigation links or a footer, as these are typically separate from the main content.
<html> <head> <title>My Website</title> </head> <body> <!-- Content goes here --> </body> </html>
4. <p>:
This tag represents a paragraph of text. It is used to contain a block of text that is separated from other content by a line break before and after the block. Note that the <p> element should not be used to add structural elements to the webpage, such as headings or lists. These should be marked up with the appropriate HTML elements (e.g., <h1>, <ul>). The <p> element is for text content only.
<p>This is a paragraph of text.</p>
5. <a>:
This tag represents a hyperlink to another webpage or a specific location on the current webpage. Hyperlinks allow users to navigate between webpages by clicking on links in the webpage content. The href attribute specifies the destination of the hyperlink, which can be a URL of another webpage or a file on your server. The text between the opening and closing <a> tags is the text that will be displayed as the link.
<a href="https://www.example.com">Click here to visit Example website</a>
6. <img>:
This tag displays an image on the webpage. The <img> tag in HTML is used to embed an image into a webpage. It allows you to display images from a file on your server, or from another website using a URL. The src attribute specifies the source of the image file, and the alt attribute provides a text description of the image for users who are unable to view it.
You can also use the <img> tag to display an image from another website by specifying the URL of the image as the src attribute.
Note that the <img> tag does not have a closing tag. It is an empty element, which means that it does not have any content, and it is closed with a forward slash at the end of the opening tag.
<img src="image.jpg" alt="A description of the image">
7. <div>:
This tag is a container for HTML elements, which can be styled with CSS. The <div> tag in HTML is a generic container element that can be used to group other HTML elements together and apply styles to them. It has no inherent meaning or semantic value, and is often used as a way to apply layout and styling to a webpage. The <div> element can be styled using CSS, just like any other HTML element. For example, you could change the background color or font size of the <div> using the background-color and font-size properties, respectively. You can also use the class or id attributes to give the <div> element a unique identifier, which can be used to apply specific styles to that element.
<div> <!-- HTML elements go here --> </div>
8. <header>:
This tag represents the header of a webpage or section. It typically contains information such as the title, logo, and navigation links for the page. The <header> element should be placed at the beginning of the relevant section or page. It can contain any valid HTML content, such as text, links, images, and other elements.
You can style the header using CSS, just like any other HTML element. For example, you could change the background color or font size of the header using the background-color and font-size properties, respectively.
<header> <!-- Header content goes here --> </header>
9. <footer>:
This tag represents the footer of a webpage or section. The <footer> tag in HTML is used to represent the footer of a webpage or section. It typically contains information such as the author of the page, copyright information, and contact details. The <footer> element should be placed at the end of the relevant section or page. It can contain any valid HTML content, such as text, links, images, and other elements.
You can style the footer using CSS, just like any other HTML element. For example, you could change the background color or font size of the footer using the background-color and font-size properties, respectively.
<footer> <!-- Footer content goes here --> </footer>
10. <form>:
This tag represents a form that allows users to input data and submit it to a server. The <form> tag in HTML is used to create a form for user input. Forms are used to submit data to a server for processing, such as when a user fills out a login form or a survey. The <form> element encloses all of the form elements, such as text inputs, checkboxes, and buttons. The action attribute specifies the URL of the server-side script that will process the form data, and the method attribute specifies the HTTP method to be used when submitting the form (either "get" or "post").
Inside the <form> element, you can add various form elements, such as <input>, <textarea>, and <button>, to allow users to enter and submit data. You can also use the <label> element to add text labels to the form elements.
<form action="submit.php" method="post"> <!-- Form elements go here --> </form>