Learn all about HTML tags for web development in this comprehensive list. Includes commonly used and advanced tags, syntax rules, examples, and tips for proper use.
This blog post aims to provide a comprehensive list of HTML tags for web development, catering to both beginners and advanced users. It will cover commonly used HTML tags as well as more advanced ones, with brief explanations and examples for each. It will also touch on HTML syntax rules and best practices to ensure proper use of tags and attributes.
Table of Contents
- Introduction to HTML Tags
- What are HTML Tags?
- Difference Between HTML Tags and Attributes
- Non-Semantic Elements and Semantic Elements in HTML
- Complete List of HTML Tags
- HTML Syntax Rules
- Conclusion
I. Introduction to HTML Tags
HTML (Hypertext Markup Language) is a coding language used in web development to create web pages and applications. It is the foundation of the web and provides the structure for content that is displayed on websites. HTML uses a set of tags and attributes to structure and format text, images, videos, and other content on a web page.
HTML has evolved over the years, with new versions and updates released to keep up with changing web technologies and user needs. The latest version, HTML5, introduced new features and improvements to make web development easier and more accessible.
In web development, HTML works together with CSS (Cascading Style Sheets) and JavaScript to create interactive and visually appealing websites. HTML provides the structure, CSS provides the styling, and JavaScript provides the functionality.
Web developers and designers must have a solid understanding of HTML and its syntax to create accessible, readable, and optimized web pages. Understanding HTML tags, attributes, and their syntax is the foundation for creating web content that is user-friendly and accessible to a wider audience.
In this article, we will provide a comprehensive list of HTML tags commonly used in web development, along with explanations of their purpose and how to use them. We will also cover best practices for using HTML tags to create well-structured and accessible web content.
II. What are HTML Tags?
HTML tags are a set of elements used in web development to structure and format content for websites. Each HTML tag serves a specific purpose, such as formatting text, creating links, displaying images, and organizing data. HTML tags are enclosed within angle brackets (< >) and consist of the tag name, followed by any attributes and their values. Attributes provide additional information about the tag and can be used to customize the tag's behavior.
Example of a tag with some text inside.
<h1>Welcome to CodewithFaraz.com</h1>
HTML tags are the building blocks of web pages, providing the structure for content and allowing web developers to create visually appealing and interactive websites. Proper use of HTML tags ensures that web pages are accessible, readable, and optimized for search engines. Understanding HTML tags and their syntax is an essential skill for web developers and designers. By using HTML tags, developers can create web content that is user-friendly, engaging, and accessible to a wider audience.
III. Difference Between HTML Tags and Attributes
Attributes and HTML tags are both used in web development to structure and format content for websites. However, there is a difference between the two.
HTML tags are the elements used to define the structure of a web page. They are enclosed within angle brackets (< >) and consist of the tag name, followed by any attributes and their values. Examples of HTML tags include <p> for paragraphs, <a> for links, <img> for images, and <table> for tables.
Attributes, on the other hand, provide additional information about HTML tags and can be used to customize the tag's behavior. They are added within the opening tag of an HTML element and consist of a name and a value separated by an equals sign. Examples of attributes include "href" for links, "src" for images, "width" and "height" for size attributes, and "class" and "id" for defining CSS styles.
In summary, HTML tags define the structure of a web page, while attributes provide additional information about HTML tags and can be used to customize their behavior. Understanding the difference between HTML tags and attributes is important for proper use of both in creating well-structured and optimized web content.
IV. Non-Semantic Elements and Semantic Elements in HTML
In HTML5, elements are divided into two categories: semantic and non-semantic elements.
Semantic elements are HTML elements that provide meaning and context to web content. They describe the purpose or meaning of the content they contain, making it easier for search engines and screen readers to understand and interpret the content. Examples of semantic elements include <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, and <figure>.
Non-semantic elements, on the other hand, do not provide any meaning or context to web content. They are often used for formatting or layout purposes only, and do not describe the content they contain. Examples of non-semantic elements include <div>, <span>, <b>, <i>, <u>, and <br>.
Using semantic elements in HTML5 is recommended for creating accessible and well-structured web content. Semantic elements provide meaning and context to content, making it easier for search engines and screen readers to understand and interpret the content. By using semantic elements, web developers can also improve the accessibility and usability of their web pages for all users, including those with disabilities.
V. Complete List of HTML Tags
Following is the complete list of HTML tags with examples and descriptions which are arranged alphabetically.
1. <!DOCTYPE>
The <!DOCTYPE> tag is used in HTML documents to indicate the version of HTML being used. It is typically placed at the very beginning of an HTML document before the <html> tag.
The <!DOCTYPE> declaration starts with the keyword <!DOCTYPE> followed by the type of document declaration, which is usually the version of HTML being used. Here are some examples of the <!DOCTYPE> tag:
HTML5: <!DOCTYPE html>
HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
By including the <!DOCTYPE> tag, the browser knows what version of HTML is being used and can render the page accordingly. It is important to use the correct <!DOCTYPE> declaration for the version of HTML being used to ensure that the page is displayed correctly.
2. <!--...-->
<!--...--> is an HTML comment tag used to add comments or notes to an HTML document that are not visible to website visitors. Any text, code or information placed between <!-- and --> will be ignored by the browser and will not be displayed on the webpage.
HTML comments can be used for a variety of purposes such as:
- Adding notes for developers or designers to explain how certain parts of the code work or what they are used for.
- Hiding code temporarily without deleting it, in case it needs to be reinstated later.
- Testing code changes without actually removing or altering any existing code.
Here is an example of how to use the HTML comment tag:
<!-- This is a comment. It will not be displayed on the webpage. -->
It is important to note that while comments do not affect the display of the webpage, they can still be viewed by anyone who looks at the source code of the page. Therefore, comments should not be used to store sensitive or private information.
3. <a>
In HTML, the <a> tag is used to create a hyperlink, or a link to another web page, file, or resource on the internet. The "a" in <a> stands for "anchor".
Here is an example of how to use the <a> tag:
<a href="http://www.codewithfaraz.com">This is a link to codewithfaraz.com</a>
Output:
This is a link to codewithfaraz.com
In the above example, "http://www.codewithfaraz.com" is the URL or web address that the link points to. The text "This is a link to codewithfaraz.com" is what the user will see on the webpage, and when they click on it, they will be taken to the codewithfaraz.com website.
The <a> tag can also be used to create links to specific parts of a web page, called anchor links. To create an anchor link, you need to give the element you want to link to an "id" attribute, and then use that id as the href value in the <a> tag.
Here is an example of how to create an anchor link:
<h2 id="section1">Section 1</h2> <p><a href="#section1">Go to Section 1</a></p>
In the above example, the <h2> tag has an "id" attribute set to "section1", which creates an anchor at that point on the page. The <a> tag has an href value of "#section1", which links to that anchor. When the user clicks on the link, the page will scroll to the section with the "section1" id.
The <a> tag can also be used in combination with other HTML elements, such as images or buttons, to create clickable links.
4. <abbr>
The <abbr> tag in HTML is used to define an abbreviation or an acronym. It is often used to provide the full form of a term that may not be familiar to all users or to clarify the meaning of an acronym.
Here is an example of how to use the <abbr> tag:
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations that is concerned with international public health.</p>
Output:
The WHO is a specialized agency of the United Nations that is concerned with international public health.
In the above example, the <abbr> tag is used to provide the full form of the acronym "WHO", which stands for "World Health Organization". The "title" attribute is used to provide additional information about the abbreviation or acronym when the user hovers over it with their mouse.
The <abbr> tag can also be used to mark up abbreviations that are part of a citation, such as the title of a book or a journal article. In this case, the "title" attribute should be used to provide the full title of the publication.
Here is an example of how to use the <abbr> tag in a citation:
<p>The study was published in the <abbr title="Journal of the American Medical Association">JAMA</abbr>.</p>
In the above example, the <abbr> tag is used to mark up the abbreviation "JAMA", which stands for "Journal of the American Medical Association". The "title" attribute is used to provide the full title of the journal.
By using the <abbr> tag in HTML, you can provide additional information about abbreviations and acronyms on your web page, which can help to make your content more accessible and understandable to a wider audience.
5. <acronym> (Not supported in HTML5)
The <acronym> tag is an HTML tag that was once used to define an acronym, which is an abbreviation that is pronounced as a word (such as NASA). However, the <acronym> tag is no longer supported in HTML5 and should not be used in modern web development.
Instead, the <abbr> tag should be used to define abbreviations and acronyms in HTML. The <abbr> tag provides the same functionality as the <acronym> tag, but it is supported in all modern browsers and is part of the HTML5 specification.
6. <address>
The <address> tag in HTML is used to provide contact information for the author or owner of a document or article. It is often used at the end of a webpage, article, or letter.
Here is an example of how to use the <address> tag:
<address> Written by John Doe<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
Output:
Written by John Doe Visit us at: Example.com Box 564, Disneyland USA
In the above example, the <address> tag is used to provide contact information for the author, including their name and the website they represent. The <br> tags are used to create line breaks between each piece of contact information.
The <address> tag can also be used to mark up the contact information for a company or organization, as well as the contact information for an individual person.
Here is an example of how to use the <address> tag to mark up contact information for a company:
<address> Example Corporation<br> 123 Main Street<br> Anytown, USA<br> Phone: 1-800-555-5555<br> Email: [email protected] </address>
In the above example, the <address> tag is used to provide the contact information for a fictional company called "Example Corporation". The contact information includes the company name, address, phone number, and email address.
By using the <address> tag in HTML, you can provide contact information for the author or owner of a document or article, as well as contact information for a company or organization. This can make it easier for readers to get in touch with the relevant parties and can help to make your content more informative and useful.
7. <applet> (Not supported in HTML5)
The <applet> tag was used in earlier versions of HTML to embed Java applets into web pages. However, it is no longer supported in HTML5 and should not be used in modern web development.
Java applets are small programs written in the Java programming language that can be embedded into web pages and run within a user's web browser. They were popular in the late 1990s and early 2000s, but have since been largely replaced by other technologies, such as JavaScript and HTML5.
If you need to embed interactive content into your web page, you can use modern web technologies such as HTML5, CSS, and JavaScript. These technologies provide more flexibility and interactivity than Java applets and are supported by all modern web browsers.
In summary, the <applet> tag is no longer supported in modern web development and should not be used. If you need to embed interactive content into your web page, you should use modern web technologies such as HTML5, CSS, and JavaScript.
8. <area>
The <area> tag in HTML is used to define a clickable area within an image map. An image map is a graphic image that is divided into clickable areas, each of which links to a different URL.
Here is an example of how to use the <area> tag:
<img src="example.png" alt="Example Image" usemap="#example"> <map name="example"> <area shape="rect" coords="0,0,100,100" href="page1.html"> <area shape="rect" coords="100,0,200,100" href="page2.html"> <area shape="rect" coords="0,100,200,200" href="page3.html"> </map>
In the above example, the <img> tag is used to display an image called "example.png". The "usemap" attribute is used to specify the name of the image map, which is defined using the <map> tag.
The <map> tag contains three <area> tags, each of which defines a clickable area within the image map. The "shape" attribute is used to specify the shape of the clickable area (in this case, a rectangle), and the "coords" attribute is used to specify the coordinates of the clickable area within the image. The "href" attribute is used to specify the URL that the clickable area should link to.
By using the <area> tag in conjunction with the <map> tag, you can create image maps that allow users to click on different parts of an image to navigate to different web pages.
9. <article>
The <article> tag in HTML is used to mark up a self-contained piece of content that can be independently distributed or reused, such as a blog post, news article, or forum post.
Here is an example of how to use the <article> tag:
<article> <header> <h1>Example Article Title</h1> <p>Published on January 1, 2023</p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ac bibendum magna, eu cursus odio.</p>
<p>Donec vel ex consequat, fermentum mi ac, faucibus tortor.
Ut feugiat, velit id porttitor consectetur, sapien dolor ultrices nisl,
ut aliquam magna nulla quis metus.</p> <footer> <p>Written by John Doe</p> </footer> </article>
In the above example, the <article> tag is used to mark up a self-contained piece of content, which includes a title, publication date, main content, and author information. The <header> and <footer> tags are used to provide additional information about the article, such as the article's title and author information.
By using the <article> tag in HTML, you can mark up self-contained pieces of content that can be independently distributed or reused, making it easier for users and search engines to identify and access your content.
10. <aside>
The <aside> tag in HTML is used to mark up content that is tangentially related to the main content on a page, such as a sidebar or a call-out box.
Here is an example of how to use the <aside> tag:
<main> <article> <header> <h1>Example Article Title</h1> <p>Published on January 1, 2023</p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ac bibendum magna, eu cursus odio.</p> <p>Donec vel ex consequat, fermentum mi ac, faucibus tortor.
Ut feugiat, velit id porttitor consectetur, sapien dolor ultrices nisl.</p>
<footer> <p>Written by John Doe</p> </footer> </article> <aside> <h2>Related Content</h2> <ul> <li><a href="#">Related Article 1</a></li> <li><a href="#">Related Article 2</a></li> <li><a href="#">Related Article 3</a></li> </ul> </aside> </main>
In the above example, the <aside> tag is used to mark up content that is tangentially related to the main content on the page, which includes a list of related articles. The <main> tag is used to mark up the main content on the page, which includes an article with a title, publication date, main content, and author information.
By using the <aside> tag in HTML, you can mark up content that is tangentially related to the main content on a page, making it easier for users and search engines to understand the relationship between different pieces of content on a page.
11. <audio>
The <audio> tag in HTML is used to embed audio content on a web page. This tag allows you to specify the source of the audio file and provide controls for the user to play, pause, and adjust the volume of the audio.
Here is an example of how to use the <audio> tag:
<audio controls> <source src="audio.mp3" type="audio/mp3"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
Output:
In the above example, the <audio> tag is used to embed an audio file on the web page. The "controls" attribute specifies that controls should be provided for the user to play, pause, and adjust the volume of the audio. The <source> tag is used to specify the source of the audio file, and the "type" attribute is used to specify the MIME type of the audio file.
By using the <audio> tag in HTML, you can embed audio content on your web page, providing users with a richer multimedia experience.
12. <b>
The <b> tag in HTML is used to apply bold formatting to text. It is a semantic tag that should be used to indicate text that has greater importance or is more relevant than other text.
Here is an example of how to use the <b> tag:
<p>This paragraph contains some <b>important</b> text.</p>
Output:
This paragraph contains some important text.
In the above example, the <b> tag is used to indicate that the word "important" is more significant than the other text in the paragraph. When rendered in a web browser, the text enclosed in the <b> tag will be displayed in bold.
It is important to note that the <b> tag should not be used solely for visual formatting purposes. Instead, it should be used to indicate the importance or relevance of text. If you want to apply bold formatting for visual purposes only, you should use CSS styling instead.
13. <base>
The <base> tag in HTML is used to specify the base URL for all relative URLs in a web page. It is typically placed in the <head> section of the HTML document.
Here is an example of how to use the <base> tag:
<!DOCTYPE html> <html> <head> <base href="https://www.example.com/"> <title>Example Page</title> </head> <body> <p><a href="about.html">About Us</a></p> </body> </html>
In the above example, the <base> tag is used to specify the base URL for all relative URLs in the web page. This means that if a relative URL is used in the web page (such as "about.html" in the <a> tag), the browser will append it to the base URL specified in the <base> tag to create an absolute URL.
By using the <base> tag in HTML, you can ensure that all relative URLs in your web page are resolved correctly, even if the page is accessed from different locations or domains.
14. <basefont> (Not supported in HTML5)
The <basefont> tag in HTML is an old and deprecated tag that was used to specify the base font size and color for a web page. It is no longer supported in HTML5 and should not be used.
Instead of using the <basefont> tag, you should use CSS to style your web page. You can use the "font-size" property to specify the size of your text, and the "color" property to specify the color of your text.
Here is an example of how to use CSS to style your web page:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<style>
body {
font-size: 16px;
color: #333333;
}
</style>
</head>
<body>
<p>This is an example paragraph.</p>
</body>
</html>
In the above example, the "font-size" property is used to specify the font size for the entire body of the web page, and the "color" property is used to specify the color of the text. By using CSS, you can easily style your web page without relying on deprecated HTML tags like <basefont>.
15. <bdi>
The <bdi> tag in HTML is used to isolate a span of text that might be formatted in a different direction from the rest of the text. It is primarily used in bi-directional text, where text might be written from right to left or left to right.
Here is an example of how to use the <bdi> tag:
<p>Here is some Arabic text: <bdi>السلام عليكم</bdi>.</p>
Output:
Here is some Arabic text: السلام عليكم.
In the above example, the <bdi> tag is used to isolate the Arabic text from the surrounding text. This is necessary because the text is written from right to left, while the surrounding text is written from left to right. By isolating the Arabic text with the <bdi> tag, you ensure that it is displayed correctly in bi-directional text environments.
It is important to note that the <bdi> tag is a semantic tag and should be used to indicate the meaning of the text, rather than just its appearance. If you are using the <bdi> tag solely for appearance purposes, you should consider using CSS styling instead.
16. <bdo>
The <bdo> tag in HTML is used to override the default text direction of the surrounding text. It is primarily used in bi-directional text, where text might be written from right to left or left to right.
Here is an example of how to use the <bdo> tag:
<p>Here is some Arabic text: <bdo dir="rtl">السلام عليكم</bdo>.</p>
Output:
Here is some Arabic text: السلام عليكم.
In the above example, the <bdo> tag is used to override the default direction of the surrounding text and display the Arabic text from right to left. This is necessary because the text is written from right to left, while the surrounding text is written from left to right. By using the <bdo> tag with the "dir" attribute, you ensure that the text is displayed correctly in bi-directional text environments.
It is important to note that the <bdo> tag is a presentational tag and should be used to control the appearance of the text, rather than its meaning. If you are using the <bdo> tag to change the text direction for semantic reasons, you should consider using the <bdi> tag instead.
17. <big> (Not supported in HTML5)
The <big> tag in HTML is a deprecated tag that was used to make the text inside it appear larger than the surrounding text. It is no longer supported in HTML5 and should not be used.
Instead of using the <big> tag, you should use CSS to style your text. You can use the "font-size" property to specify the size of your text.
Here is an example of how to use CSS to style your text:
<p>This is some text with <span style="font-size: larger;">larger text</span>.</p>
Output:
This is some text with larger text.
In the above example, the "font-size" property is used to make the text inside the <span> tag appear larger than the surrounding text. By using CSS, you can easily style your text without relying on deprecated HTML tags like <big>.
18. <blockquote>
The <blockquote> tag in HTML is used to indicate a section of quoted text. It is typically used to quote another source or reference a specific passage.
Here is an example of how to use the <blockquote> tag:
<blockquote> <p>"To be or not to be, that is the question"</p> <cite>Hamlet, William Shakespeare</cite> </blockquote>
Output:
"To be or not to be, that is the question"
Hamlet, William Shakespeare
In the above example, the <blockquote> tag is used to indicate that the enclosed text is a quote. The <p> tag is used to enclose the actual quote, and the <cite> tag is used to indicate the source of the quote.
By using the <blockquote> tag, you indicate to the browser and user that the enclosed text is a quote, and allow it to be displayed in a visually distinct way. Additionally, by using the <cite> tag, you provide additional information about the source of the quote, which can be useful for referencing or attribution purposes.
19. <body>
The <body> tag in HTML is used to define the main content of a web page. It is the container for all the visible content of a web page, including text, images, videos, and other media.
Here is an example of how to use the <body> tag:
<!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <h1>Welcome to My Web Page</h1> <p>This is the main content of my web page.</p> <img src="myimage.jpg" alt="My Image"> </body> </html>
In the above example, the <body> tag is used to enclose all the visible content of the web page, including the <h1> tag, <p> tag, and <img> tag. The <head> tag is used to define the metadata of the web page, such as the title.
By using the <body> tag, you define the main content of your web page and allow the browser to display it properly. It is important to note that the <body> tag should only be used once in a web page, and all visible content should be enclosed within it.
20. <br>
The <br> tag in HTML is used to insert a line break or a single empty line within a text. It is a self-closing tag, which means it does not require a closing tag.
Here is an example of how to use the <br> tag:
<p>This is the first line.<br> This is the second line.</p>
Output:
This is the first line.This is the second line.
In the above example, the <br> tag is used to insert a line break between the two lines of text within the <p> tag. This results in the text being displayed on two separate lines.
By using the <br> tag, you can break up text into smaller, more readable chunks, and improve the overall readability of your web page. However, it is important to use it sparingly and appropriately, as overusing it can lead to a cluttered and difficult-to-read page.
21. <button>
The <button> tag in HTML is used to create a clickable button on a web page. It can be used to perform a variety of actions, such as submitting a form or executing a JavaScript function.
Here is an example of how to use the <button> tag:
<button type="submit">Submit</button>
Output:
In the above example, the <button> tag is used to create a button with the label "Submit". The "type" attribute is set to "submit", indicating that the button will submit a form when clicked.
You can also use the <button> tag to execute a JavaScript function when clicked, like this:
<button onclick="myFunction()">Click me</button>
In the above example, the "onclick" attribute is used to specify the JavaScript function that will be executed when the button is clicked.
By using the <button> tag, you can create interactive elements on your web page that allow users to perform various actions or navigate to different parts of the site. It is a versatile tag that can be used in many different ways to enhance the functionality of your web page.
22. <canvas>
The <canvas> tag in HTML is used to create graphics and animations on a web page using JavaScript. It provides a drawing surface that can be manipulated with code to create a wide range of visual effects.
Here is an example of how to use the <canvas> tag:
<canvas id="myCanvas" width="200" height="100" style="background:red"></canvas>
Output:
In the above example, the <canvas> tag is used to create a canvas element with an ID of "myCanvas" and a width and height of 200 pixels and 100 pixels, respectively.
Once you have created a canvas element, you can use JavaScript to draw on it. For example, you could use the following code to draw a red rectangle on the canvas:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
In the above code, the "getContext" method is used to obtain a 2D rendering context for the canvas, which allows you to draw on it. The "fillStyle" property is set to "red" to set the color of the rectangle, and the "fillRect" method is used to draw a rectangle with a top-left corner at (10,10) and a width and height of 50 pixels.
By using the <canvas> tag, you can create a wide range of graphics and animations on your web page using JavaScript. It is a powerful tool that can be used to create dynamic and interactive content that enhances the user experience.
23. <caption>
The <caption> tag in HTML is used to add a title or caption to a table. It is typically used to provide a brief summary or description of the data in the table.
Here is an example of how to use the <caption> tag:
<table>
<caption>Employee Salaries</caption>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>$50,000</td>
</tr>
<tr>
<td>Jane</td>
<td>$60,000</td>
</tr>
</table>
Output:
| Name | Salary |
|---|---|
| John | $50,000 |
| Jane | $60,000 |
In the above example, the <caption> tag is used to provide a title for the table, which is "Employee Salaries". This makes it clear to the user what the data in the table represents.
By using the <caption> tag, you can make your tables more informative and easier to understand. It is a simple but powerful tool that can greatly improve the usability and accessibility of your web pages.
24. <center> (Not supported in HTML5)
The <center> tag in HTML is used to center-align text or content on a web page. It is an older HTML tag that has been deprecated in HTML5, but it can still be used for backward compatibility with older browsers.
Here is an example of how to use the <center> tag:
<center> <h1>Welcome to my Website</h1> <p>This is the homepage of my website.</p> </center>
Output:
Welcome to my Website
This is the homepage of my website.
In the above example, the <center> tag is used to center-align the heading and paragraph content on the page.
However, it is recommended to use CSS for aligning content on a web page instead of the <center> tag. You can achieve center alignment using CSS by setting the "text-align" property to "center" on the parent element.
For example:
<div style="text-align:center;"> <h1>Welcome to my Website</h1> <p>This is the homepage of my website.</p> </div>
Output:
Welcome to my Website
This is the homepage of my website.
In the above example, the "div" element is used as the parent container and the "text-align" property is set to "center" using inline CSS. This achieves the same center alignment effect as using the <center> tag, but with the benefit of being more modern and flexible.
25. <cite>
The <cite> tag in HTML is used to indicate the title of a work, such as a book, article, or song. It is typically used to identify the source of a quotation or to give credit to an author or creator.
Here is an example of how to use the <cite> tag:
<p>According to <cite>The New York Times</cite>, "The economy is expected to grow by 3% this year."</p>
Output:
According to The New York Times, "The economy is expected to grow by 3% this year."
In the above example, the <cite> tag is used to identify the source of the quotation, which is "The New York Times".
By using the <cite> tag, you can make it clear to the reader where the information in your content is coming from, which can help to build trust and credibility with your audience.
Note that the <cite> tag should not be used to emphasize text. If you want to emphasize text, you should use the <em> tag instead.
26. <code>
The <code> tag in HTML is used to indicate that a section of text represents computer code. It is typically used to display code snippets, commands, or programming instructions on a web page.
Here is an example of how to use the <code> tag:
<p>To print "Hello, World!" in Python, use the following code:</p>
<code>print("Hello, World!")</code>
Output:
To print "Hello, World!" in Python, use the following code:
print("Hello, World!")
In the above example, the <code> tag is used to indicate that the text "print("Hello, World!")" represents Python code.
By using the <code> tag, you can make it clear to the reader which parts of your content represent code, which can help to make your content more readable and understandable.
Note that the <code> tag is typically used for short code snippets. For longer sections of code, you may want to use the <pre> tag instead, which preserves the whitespace and formatting of the code.
27. <col>
The <col> tag in HTML is used to define a column within a table. It is often used in conjunction with the <colgroup> tag to apply styles or attributes to an entire column or group of columns.
Here is an example of how to use the <col> tag:
<table>
<colgroup>
<col style="background-color: yellow;">
<col>
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>
Output:
| Name | Age | Location |
|---|---|---|
| John | 25 | New York |
| Jane | 30 | Los Angeles |
In the above example, the <col> tag is used within the <colgroup> tag to apply a background color to the first column of the table.
By using the <col> tag, you can apply styles or attributes to an entire column or group of columns, which can help to make your table more readable and visually appealing.
Note that the <col> tag is not a container tag, which means that it does not have an opening and closing tag. Instead, you can use attributes to define the properties of the column.
28. <colgroup>
The <colgroup> tag in HTML is used to group together <col> tags that apply to the same set of columns in a table. It allows you to apply styles or attributes to multiple columns at once, instead of having to apply them to each individual column.
Here is an example of how to use the <colgroup> tag:
<table>
<colgroup>
<col style="background-color: yellow;">
<col>
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>
Output:
| Name | Age | Location |
|---|---|---|
| John | 25 | New York |
| Jane | 30 | Los Angeles |
In the above example, the <colgroup> tag is used to group together the three <col> tags that apply to the columns of the table. The first <col> tag is used to apply a yellow background color to the first column of the table.
By using the <colgroup> tag, you can apply styles or attributes to multiple columns at once, which can help to make your table more readable and visually appealing.
29. <data>
The <data> tag in HTML is used to associate data with the content it is related to. This can be useful in cases where you want to add additional information or metadata to an element, without affecting the way it is displayed.
Here is an example of how to use the <data> tag:
<p>The average temperature in <data value="New York">NYC</data> today is 65 degrees.</p>
Output:
The average temperature in NYC today is 65 degrees.
In the above example, the <data> tag is used to associate the value "New York" with the content "NYC". This allows you to add metadata to the element without changing the way it is displayed. Additionally, the "value" attribute is used to specify the actual data value that is associated with the element.
You can use CSS to style the <data> tag, just like you would with any other HTML element. By default, the content inside the <data> tag is displayed in the same way as the surrounding text, but you can use CSS to change its appearance if needed.
The <data> tag is commonly used in combination with the <time> tag, which is used to represent a specific date or time. By using these tags together, you can provide additional context and metadata to your content.
30. <datalist>
The <datalist> tag in HTML is used to provide a pre-defined list of options for an input field. When a user types into an input field associated with a <datalist>, a dropdown list of pre-defined options is displayed. This can help improve the user experience by making it easier for them to input data.
Here is an example of how to use the <datalist> tag:
<label for="fruits">Choose a fruit:</label> <input list="fruitList" id="fruits" name="fruits"> <datalist id="fruitList"> <option value="Apple"> <option value="Banana"> <option value="Cherry"> <option value="Date"> <option value="Elderberry"> <option value="Fig"> </datalist>
Output:
In the above example, the <datalist> tag is used to define a list of fruit options that can be displayed when a user types into the input field with the "fruits" id. The <option> tags are used to define each of the fruit options in the list.
When the user types into the input field, a dropdown list of the pre-defined options will be displayed, allowing them to easily select the desired option.
The <datalist> tag is supported in all major browsers, including Chrome, Firefox, Safari, and Edge. However, Internet Explorer does not support the <datalist> tag, so you may need to use a polyfill or alternative solution if you need to support IE.
31. <dd>
The <dd> tag in HTML is used in conjunction with the <dt> tag to define a description list. The <dd> tag is used to specify the description of a term defined by the <dt> tag.
Here is an example of how to use the <dd> tag:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language, the standard markup language for creating web pages.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets, a style sheet language used for describing the look and formatting of a document written in HTML.</dd> <dt>JavaScript</dt> <dd>A programming language used to create interactive effects within web browsers.</dd> </dl>
In the above example, the <dt> tag is used to define each term, while the <dd> tag is used to define the corresponding description for each term. When rendered by a web browser, the terms and their corresponding descriptions will be displayed in a structured and easy-to-read manner.
The <dd> tag is part of the HTML 4.01 specification and is supported by all major web browsers.
32. <del>
The <del> tag in HTML is used to indicate that text has been deleted or removed from a document. This tag is often used in conjunction with the <ins> tag, which is used to indicate inserted text.
Here is an example of how to use the <del> tag:
<p>John's old phone number was <del>(555) 123-4567</del>, but his new number is <ins>(555) 987-6543</ins>.</p>
Output:
John's old phone number was
(555) 123-4567, but his new number is (555) 987-6543.
In the above example, the <del> tag is used to indicate that the old phone number has been deleted, while the <ins> tag is used to indicate the new phone number that has been inserted. When rendered by a web browser, the deleted text will typically be displayed with a line through it.
The <del> tag is part of the HTML 4.01 specification and is supported by all major web browsers.
33. <details>
The <details> tag in HTML is used to create a disclosure widget, which allows the user to reveal or hide additional information on a webpage. The content within the <details> tag is initially hidden, and the user can reveal it by clicking on a summary element that is defined with the <summary> tag.
Here is an example of how to use the <details> tag:
<details> <summary>Click to reveal more information</summary> <p>Here is some additional information that can be revealed or hidden.</p> </details>
Output:
Click to reveal more information
Here is some additional information that can be revealed or hidden.
In the above example, the <details> tag is used to define the disclosure widget, and the <summary> tag is used to define the summary element that is initially displayed to the user. When the user clicks on the summary element, the content within the <details> tag will be revealed.
The <details> tag is part of the HTML5 specification and is supported by all major web browsers. However, some older browsers may not support this tag, so it is important to provide an alternative way for users to access the hidden content if necessary.
34. <dfn>
The <dfn> tag in HTML is used to indicate the definition of a term in a document. The term being defined is typically enclosed within the <dfn> tag, and can be styled with CSS to indicate its meaning or significance.
Here is an example of how to use the <dfn> tag:
<p><dfn>HTML</dfn> is a markup language used to create web pages.</p>
Output:
HTML is a markup language used to create web pages.
In the above example, the term "HTML" is enclosed within the <dfn> tag to indicate that it is being defined. The definition itself is not included within the tag, but can be provided elsewhere in the document.
The <dfn> tag is part of the HTML5 specification and is supported by all major web browsers. It is primarily used for semantic purposes, to provide additional information about the meaning of terms used in a document.
35. <dialog>
The <dialog> tag in HTML is used to create a modal dialog box, which is a pop-up window that requires the user to take some action before continuing. The <dialog> element can contain any content that can be placed inside a normal HTML document, such as text, images, forms, or other HTML elements.
Here is an example of how to use the <dialog> tag:
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
<dialog id="myDialog">
<h2>Dialog Box Title</h2>
<p>Dialog box content goes here.</p>
<button onclick="document.getElementById('myDialog').close()">Close Dialog</button>
</dialog>
Output:
In the above example, a button is used to trigger the <dialog> element to open when clicked. The <dialog> element itself contains the title and content of the dialog box, as well as a button to close the dialog box.
The <dialog> tag is part of the HTML5 specification and is supported by most modern web browsers. However, it is important to note that not all web browsers support the <dialog> tag, so it may be necessary to use a JavaScript-based solution for modal dialog boxes in some cases.
36. <dir> (Not supported in HTML5)
The <dir> tag was used in earlier versions of HTML to create a directory or list of files and folders. However, it is now obsolete and should not be used in modern HTML documents.
Instead, you can use the <ul> (unordered list) or <ol> (ordered list) tags to create lists of items. Here is an example:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Output:
- Item 1
- Item 2
- Item 3
In the above example, an unordered list is created using the <ul> tag, and each list item is created using the <li> tag.
It is important to use modern HTML tags and avoid obsolete tags like <dir>, as they may not be supported by all web browsers and can cause compatibility issues.
37. <div>
The <div> tag is used in HTML to create a division or section of the web page. It is a container element that can be used to group other HTML elements together, such as text, images, or other content.
The <div> tag does not have any specific meaning or style associated with it. Its purpose is to provide a way to group content together, which can be styled and manipulated using CSS or JavaScript.
Here is an example of using the <div> tag:
<div> <h1>Welcome to my website</h1> <p>This is some introductory text for my website.</p> <img src="image.jpg" alt="An image on my website"> </div>
Output:
Welcome to my website
This is some introductory text for my website.
In this example, the <div> tag is used to group together the page heading, introductory text, and an image. This can be useful for applying styles or scripts to the entire group of content at once.
38. <dl>
The <dl> tag in HTML is used to define a description list, which consists of a list of terms and their associated descriptions.
The <dl> tag is typically used in combination with <dt> (definition term) and <dd> (definition description) tags to create the structure of the description list. Each <dt> tag defines a term, while each <dd> tag provides a description of that term.
Here is an example of using the <dl> tag:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language is used to create and structure content on the web.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets is used to style the HTML content and create visually appealing web pages.</dd> <dt>JavaScript</dt> <dd>JavaScript is used to add interactivity and dynamic functionality to web pages.</dd> </dl>
In this example, the <dl> tag is used to create a list of terms and their descriptions related to web development. The <dt> tag is used to define the term, while the <dd> tag is used to define the description.
39. <dt>
The <dt> tag in HTML is used to define a term in a description list, which is typically used in combination with the <dl> (description list) and <dd> (definition description) tags.
Here is an example of using the <dt> tag:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language is used to create and structure content on the web.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets is used to style the HTML content and create visually appealing web pages.</dd> <dt>JavaScript</dt> <dd>JavaScript is used to add interactivity and dynamic functionality to web pages.</dd> </dl>
In this example, the <dt> tag is used to define the terms "HTML", "CSS", and "JavaScript" in the description list. The corresponding descriptions are provided using the <dd> tag.
40. <em>
The <em> tag is used in HTML to indicate emphasis on text. Typically, this tag will render as italicized text in most browsers, but the specific styling applied to it can vary depending on the CSS rules applied to the page.
Here is an example of using the <em> tag:
<p>The <em>quick brown fox</em> jumped over the lazy dog.</p>
Output:
The quick brown fox jumped over the lazy dog.
In this example, the words "quick brown fox" are emphasized using the <em> tag, indicating that they are important or should be given special attention by the reader. When rendered by a web browser, the text "quick brown fox" would likely be displayed in italics.
41. <embed>
The <embed> tag is used in HTML to embed external content such as images, videos, audio clips, and other types of media directly into a web page. The content being embedded is usually hosted on another server, and the <embed> tag is used to reference the content and display it on the current web page.
Here is an example of using the <embed> tag to embed a video into a web page:
<embed src="example_video.mp4" type="video/mp4" width="640" height="480">
In this example, the "src" attribute specifies the location of the video file, the "type" attribute specifies the MIME type of the video, and the "width" and "height" attributes specify the dimensions of the video display area.
The <embed> tag is often used in conjunction with other HTML and CSS elements to control the appearance and behavior of the embedded content, such as setting a specific size, adding controls for video or audio playback, or specifying alternative content to display if the embedded content cannot be loaded.
42. <fieldset>
The <fieldset> tag in HTML is used to group related elements in a web form and provide a visual boundary around them. The elements enclosed within a <fieldset> tag are visually separated from the rest of the form, making it easier for users to understand the structure of the form.
Here is an example of using the <fieldset> tag to group related form elements:
<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>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"><br>
</fieldset>
</form>
Output:
In this example, the <fieldset> tag encloses a group of form elements related to personal information. The <legend> tag is used to provide a descriptive caption for the group of elements. The labels and input fields are enclosed within the <fieldset> tag to visually group them together.
The <fieldset> tag can also be styled using CSS to customize the appearance of the visual boundary and the caption. Additionally, the <fieldset> tag can be used in combination with the <legend> tag to provide additional context and instructions for filling out the form.
43. <figcaption>
The <figcaption> tag is used in HTML to define a caption or a description for a <figure> element. The <figure> element is used to group media content such as images, videos, and illustrations. The <figcaption> element is placed immediately after the <figure> element and can contain any text that describes the media content in the <figure>.
Here's an example of how to use <figcaption> with <figure>:
<figure> <img src="image.jpg" alt="A beautiful landscape"> <figcaption>A beautiful landscape</figcaption> </figure>
In this example, the <img> element displays an image of a landscape and the <figcaption> element provides a caption to describe the image. The text "A beautiful landscape" will be displayed below the image when the webpage is rendered.
44. <figure>
The <figure> tag is used in HTML to group media content such as images, videos, and illustrations. It can be used to associate a caption, description, or reference with the media content. The <figure> element is typically used in conjunction with the <figcaption> element, which is used to provide a caption or description of the media content.
Here's an example of how to use the <figure> tag with an image:
<figure> <img src="image.jpg" alt="A beautiful landscape"> <figcaption>A beautiful landscape</figcaption> </figure>
In this example, the <img> element displays an image of a landscape and the <figcaption> element provides a caption to describe the image. The <figure> element is used to group the image and the caption together. When the webpage is rendered, the image and caption will be displayed together as a unit.
45. <font> (Not supported in HTML5)
The <font> tag is an old HTML tag used to specify the font face, size, and color of text. However, it has been deprecated in HTML5, which means it is no longer recommended for use.
Instead, it is recommended to use CSS to style text. CSS allows for much more control and flexibility in styling text, and it separates the style from the content, which makes it easier to maintain and update.
Here is an example of how to use CSS to style text:
<p style="font-family: Arial; font-size: 16px; color: red;">This is some text styled with CSS.</p>
Output:
This is some text styled with CSS.
In this example, we are setting the font family to Arial, the font size to 16 pixels, and the color to red.
Note that it is generally better to define CSS styles in an external stylesheet rather than inline in the HTML code. This allows for better organization and easier maintenance.
46. <footer>
The HTML <footer> element represents a footer for a document or section. It typically contains information about the author, copyright information, or links to related documents. The <footer> element is usually placed at the end of a document or section, and it can contain any HTML content.
Here's an example of a basic <footer> element:
<footer> <p>© 2023 John Doe</p> </footer>
Output:
In this example, the footer contains a simple paragraph with the copyright symbol and the author's name. You can customize the content and styling of the <footer> element to fit your needs.
47. <form>
The HTML <form> tag is used to create a form on a web page where users can input data. The input data can then be sent to a server for processing using various HTTP methods like GET, POST, PUT, DELETE, etc.
The <form> tag usually contains various input elements like text fields, checkboxes, radio buttons, and buttons. When a user submits the form, the data is sent to the server in a structured format that can be processed by the server-side script.
Here's an example of a simple HTML form:
<form action="process-form.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> <label for="message">Message:</label> <textarea id="message" name="message"></textarea><br> <button type="submit">Submit</button> </form>
In this example, the form has an action attribute that specifies the URL where the data will be sent when the form is submitted. The method attribute specifies the HTTP method that will be used to send the data.
The form also contains several input elements like text fields and a textarea element where users can input data. The label elements provide a descriptive label for each input element. Finally, the form contains a submit button that users can click to submit the form.
48. <frame> (Not supported in HTML5)
The <frame> element was used in HTML to define an individual frame within a frameset, which could contain another HTML document. However, it is now deprecated in HTML5 and should not be used in modern web development.
Instead, the <iframe> element can be used to embed another HTML document within a web page.
49. <frameset> (Not supported in HTML5)
The <frameset> element was used in HTML to define a set of frames within a web page. The <frameset> element would contain one or more <frame> elements, which would specify the content of each individual frame within the set.
However, the use of frames and framesets is now considered outdated in modern web development, and they are not supported in HTML5. Instead, other techniques such as CSS and JavaScript can be used to achieve similar effects while maintaining accessibility and web standards compliance.
50. <h1> to <h6>
The <h1> to <h6> tags in HTML are used to create headings on a webpage. The <h1> tag is used for the main heading of the page, while the <h2> to <h6> tags are used for subheadings.
Here's an example of how these tags can be used:
<h1>Welcome to my website</h1> <h2>About me</h2> <p>My name is John and I'm a web developer.</p> <h3>Skills</h3> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <h4>Education</h4> <p>I have a Bachelor's degree in Computer Science.</p> <h5>Experience</h5> <p>I have worked as a web developer for 5 years.</p> <h6>Contact me</h6> <p>You can contact me at [email protected].</p>
Output:
Welcome to my website
About me
My name is John and I'm a web developer.
Skills
- HTML
- CSS
- JavaScript
Education
I have a Bachelor's degree in Computer Science.
Experience
I have worked as a web developer for 5 years.
Contact me
You can contact me at [email protected].
In this example, the <h1> tag is used for the main heading of the page, while the <h2> to <h6> tags are used for subheadings such as "About me", "Skills", "Education", "Experience", and "Contact me".
51. <head>
The <head> tag in HTML is used to define the head section of the document that contains metadata such as the title of the page, links to stylesheets, and other important information that is not displayed directly in the content of the page. The content inside the head tag is not visible to the user, but it is used by web browsers, search engines, and other programs that process the webpage.
Here is an example of a basic HTML document with a head section:
<!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="styles.css"> <meta name="description" content="This is my website."> </head> <body> <h1>Welcome to my website!</h1> <p>Here is some content for my website...</p> </body> </html>
In this example, the head section contains a <title> tag that sets the title of the page to "My Website", a <link> tag that links to an external stylesheet, and a <meta> tag that provides a brief description of the website.
52. <header>
The <header> tag is used to define a header section for a document or a section of a document. It usually contains introductory content such as headings, logos, and navigation menus.
Here's an example of how to use the <header> tag:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<header>
<h1>Example Company</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to Example Company</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</main>
</body>
</html>
In this example, the <header> tag is used to contain the company name and navigation menu. The <nav> tag is used to define a set of navigation links, and the <ul> and <li> tags are used to create an unordered list of links. The <main> tag is used to contain the main content of the page.
It's worth noting that the <header> tag can also be used within individual sections of a document to define a header for that section.
53. <hr>
The <hr> tag in HTML stands for "horizontal rule" and is used to create a horizontal line on a web page. It is a self-closing tag, meaning it does not require a closing tag.
Here is an example of how to use the <hr> tag:
<p>This is some text before the horizontal line.</p> <hr> <p>This is some text after the horizontal line.</p>
Output:
This is some text before the horizontal line.
This is some text after the horizontal line.
This code will produce a horizontal line between the two paragraphs of text. The appearance of the line can be customized using CSS.
54. <html>
The <html> tag is used at the beginning and end of an HTML document to define the root of the HTML document. It indicates that everything inside the tags is HTML code. All other HTML elements should be placed within the <html> tags.
55. <i>
The <i> tag is used to apply italic formatting to text content within HTML documents. Here's an example of how to use the <i> tag:
<p>This is a <i>sample text</i> to illustrate the use of the <i>italic</i> tag.</p>
Output:
This is a sample text to illustrate the use of the italic tag.
In the example above, the text "sample text" and "italic" will be rendered in italicized style by the browser, as they are enclosed within the <i> tags.
56. <iframe>
The <iframe> tag is used to embed another HTML document into the current document. It is commonly used to display content from another website within an HTML page.
Here is an example of how to use the <iframe> tag:
<iframe src="https://www.example.com"></iframe>
In this example, the URL of the external website is specified in the src attribute. When the page is loaded, the contents of the external website will be displayed within the <iframe> element on the current page.
The <iframe> tag also supports several other attributes, such as width, height, allowfullscreen, and sandbox. These attributes can be used to customize the appearance and behavior of the <iframe> element.
57. <img>
The <img> tag is used in HTML to embed an image into a webpage. It has an attribute called src which specifies the URL of the image file. Here's an example:
<img src="https://example.com/image.jpg" alt="A beautiful landscape">
In this example, the src attribute specifies the URL of the image file, while the alt attribute provides alternative text to be displayed if the image cannot be loaded or if the user is using a screen reader. It is important to provide meaningful alternative text for images to ensure accessibility for all users.
58. <input>
The <input> tag is an HTML element that is used to create interactive controls for web-based forms. It is a self-contained element that does not require a closing tag. It can be used to create various types of form controls such as text fields, radio buttons, checkboxes, and more. Here are some examples of how to use the <input> tag to create different form controls:
Text Input:
<input type="text" name="username" placeholder="Enter your username">
Output:
This will create a text input field where the user can enter their username.
Radio Button:
<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female
Output:
Male Female
This will create two radio buttons with the labels "Male" and "Female". The name attribute is used to group the radio buttons together, and the value attribute is used to specify the value of the selected radio button.
Checkbox:
<input type="checkbox" name="agree" value="yes"> I agree to the terms and conditions
Output:
I agree to the terms and conditions
This will create a checkbox with the label "I agree to the terms and conditions". The name attribute is used to identify the checkbox, and the value attribute is used to specify the value of the checkbox when it is checked.
Submit Button:
<input type="submit" value="Submit">
Output:
This will create a submit button with the label "Submit". When the button is clicked, the form data will be submitted to the server.
59. <ins>
The <ins> tag is an HTML element used to indicate that the enclosed text has been inserted into a document. This tag is commonly used to show additions or changes made to an existing document.
Here's an example of how to use the <ins> tag:
<p>The original text was: <ins>This is the original text.</ins></p> <p>The modified text is: <ins>This is the modified text.</ins></p>
Output:
The original text was: This is the original text.
The modified text is: This is the modified text.
In the above example, the <ins> tag is used to indicate the changes made to the original text. The text enclosed within the tag is displayed as underlined by default, but the appearance can be customized using CSS.
60. <kbd>
The <kbd> tag is used to represent keyboard input in HTML. It is typically used to indicate a keyboard shortcut or a sequence of keys to be pressed. The text inside the <kbd> tag is typically displayed in a monospace font to distinguish it from regular text.
Here's an example:
To save a file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.
Output:
To save a file, press Ctrl + S.
61. <label>
The <label> tag is an HTML element used to define a label for a form control. It is often used in conjunction with the <input> element to provide a description or name for the input field.
For example, if you have a form with an input field for the user's name, you might use the <label> tag to provide a description for the field:
<label for="name">Name:</label> <input type="text" id="name" name="name">
Output:
In this example, the for attribute of the <label> tag is set to the value of the id attribute of the corresponding <input> element. This creates a link between the label and the input field, which is important for accessibility and usability purposes.
When a user clicks on the label, the focus is automatically set to the corresponding input field. This makes it easier for users to interact with forms, especially on mobile devices or for users with disabilities.
62. <legend>
The <legend> tag is used in conjunction with the <fieldset> tag to provide a caption or title for a group of related form controls. It is often used to describe the purpose of a form or a section of a form. Here's an example:
<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>
Output:
In this example, the <legend> tag is used to provide a title for the group of form controls that collect personal information. The <label> tags are used to provide labels for the individual form controls.
63. <li>
The <li> tag in HTML is used to define a list item within an ordered or unordered list. It stands for "list item". The list can be either numbered (ordered) or unnumbered (unordered), and each item is contained within the <li> tags. Here's an example of an unordered list:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Output:
- Item 1
- Item 2
- Item 3
And here's an example of an ordered list:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Output:
- Item 1
- Item 2
- Item 3
In both cases, the <li> tags indicate the list items.
64. <link>
The <link> tag is an HTML element used to link an HTML document to an external resource, such as a CSS stylesheet or an icon. It is usually placed in the <head> section of an HTML document and uses the rel attribute to indicate the relationship between the current document and the linked resource.
For example, to link an external CSS file to an HTML document, the following code can be used:
<head> <link rel="stylesheet" href="styles.css"> </head>
This will link the styles.css file to the HTML document, allowing the styles defined in the CSS file to be applied to the HTML elements.
65. <main>
The <main> tag is an HTML5 element that represents the main content of a web page. It should be used to wrap the primary content of a document, excluding any content that is repeated across multiple pages such as navigation links or footers.
For example, if you have a blog post, the main content of the post should be wrapped inside the <main> tag. Similarly, if you have an e-commerce site, the product listing should be wrapped inside the <main> tag.
Here's an example of how to use the <main> tag:
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Blog Post Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</main>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</body>
66. <map>
The <map> tag is an HTML element used in conjunction with the <area> tag to define an image map. It is used to create clickable areas on an image, where each area is defined by an <area> tag. The <map> tag has a name attribute, which is used to associate the <map> element with the <img> element it belongs to.
Here is an example of how to use the <map> tag:
<img src="example.jpg" alt="Example Image" usemap="#example-map"> <map name="example-map"> <area shape="rect" coords="0,0,100,100" href="page1.html"> <area shape="circle" coords="150,150,50" href="page2.html"> </map>
In this example, an image with the src attribute of "example.jpg" is displayed, and an image map is defined using the <map> tag with the name attribute of "example-map". The <area> tags are used to define clickable areas on the image. The shape attribute of each <area> tag specifies the shape of the clickable area, and the coords attribute specifies the coordinates of the clickable area. The href attribute specifies the URL of the page to go to when the clickable area is clicked.
67. <mark>
The <mark> tag is used in HTML to highlight or mark a specific portion of text. It is typically used to indicate a keyword or important phrase within a block of text. When applied, the marked text is usually highlighted with a yellow color by default, although this can be customized with CSS.
Here is an example of how the <mark> tag can be used:
<p>Here is some text that contains a <mark>highlighted</mark> keyword.</p>
In this example, the word "highlighted" is marked using the <mark> tag. When rendered in a web browser, it would appear as follows:
Output:
Here is some text that contains a highlighted keyword.
68. <marquee>
The <marquee> tag is used to create a scrolling effect for text or images on a web page. However, it is an outdated and non-standard HTML tag and is not recommended for use in modern web development. Instead, CSS animations and transitions can be used to achieve similar effects in a more efficient and flexible way.
Here's an example of how the <marquee> tag can be used:
<marquee direction="left" scrollamount="5"> This text will scroll from right to left </marquee>
Output:
This will create a scrolling effect for the text "This text will scroll from right to left" moving from right to left at a speed of 5 pixels per frame.
69. <meta>
The <meta> tag is used in HTML to provide metadata about a document. Metadata is data that describes other data, in this case, information about the HTML document itself. The <meta> tag is placed inside the <head> section of an HTML document and is not visible to the user.
There are various attributes that can be used with the <meta> tag, including name, content, charset, http-equiv, and more. Here are a few examples:
- <meta name="description" content="This is a description of my webpage.">: This provides a short description of the webpage that can be displayed in search engine results.
- <meta charset="UTF-8">: This specifies the character encoding used in the HTML document.
- <meta http-equiv="refresh" content="5;url=https://example.com">: This redirects the user to another page after a specified amount of time (in this case, 5 seconds).
Overall, the <meta> tag is important for providing information about the HTML document itself and improving the user's experience when interacting with the page.
70. <meter>
The <meter> tag is an HTML element that is used to represent a scalar measurement within a known range. It is typically used to display a value within a specific range, such as the progress of a download or the strength of a password. The tag can be used with a variety of attributes, including min, max, value, low, high, and optimum, which allow developers to customize the appearance and behavior of the meter. Here is an example usage of the <meter> tag:
<label for="file-progress">File upload progress:</label> <meter id="file-progress" value="25" min="0" max="100">25%</meter>
Output:
25%
In this example, the <meter> tag is used to display the progress of a file upload, with a current value of 25 out of a maximum value of 100. The min and max attributes define the range of values that the meter can represent, and the value attribute sets the current value of the meter. The text "25%" is displayed as a fallback for browsers that do not support the <meter> tag or for users who cannot see the graphical representation of the meter.
71. <nav>
The <nav> tag is an HTML element used to define a section of a webpage that contains navigation links, such as a menu or a table of contents. This tag is used to create a list of links that can be used to navigate to different parts of the website or to different pages on the same website.
The <nav> tag is a semantic tag that helps search engines and screen readers to understand the purpose of the content on the webpage. It is typically used to wrap a list of <a> tags, which are used to create links to other pages or sections on the same page.
Here is an example of how the <nav> tag can be used in HTML:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
In this example, we have created a navigation bar with three links to the Home, About, and Contact pages of the website.
72. <noframes>
The <noframes> tag is used to provide alternate content for browsers that do not support frames. It is typically used inside the <frameset> element.
Here's an example of how to use the <noframes> tag:
<frameset cols="25%, 75%">
<frame src="menu.html">
<frame src="content.html">
<noframes>
<p>Your browser does not support frames.</p>
<p>You can view the contents of this page <a href="content.html">here</a>.</p>
</noframes>
</frameset>
In the above example, if the browser does not support frames, the content inside the <noframes> tag will be displayed instead.
73. <noscript>
The <noscript> tag is used to specify content that should be displayed if a user's browser doesn't support JavaScript or if JavaScript is disabled. The content inside the <noscript> tag is displayed only when scripts are not supported or enabled. This tag is useful when you want to provide alternative content for users who cannot access the dynamic content created by JavaScript.
Here is an example of how the <noscript> tag can be used:
<noscript> <p>This page requires JavaScript to function properly.</p> </noscript>
In the above example, the message "This page requires JavaScript to function properly." will be displayed only if JavaScript is not supported or enabled in the user's browser.
74. <object>
The <object> tag is an HTML tag that is used to embed external content or plugins into a web page. This tag allows you to insert various types of multimedia content like images, videos, audio files, PDF files, etc. into a web page.
Here is an example of how to use the <object> tag to embed a PDF file:
<object data="example.pdf" type="application/pdf"> <embed src="example.pdf" type="application/pdf" /> </object>
In this example, we specify the source of the PDF file using the data attribute, and we also specify the MIME type of the content using the type attribute. We also include a fallback <embed> tag to ensure that the PDF file is displayed even if the browser does not support the <object> tag.
75. <ol>
The <ol> tag is used to define an ordered list in HTML, where each item is numbered. The syntax for creating an ordered list using the <ol> tag is as follows:
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
This will result in a numbered list that looks like this:
- First item
- Second item
- Third item
76. <optgroup>
The <optgroup> tag is used to group related options in a <select> element. It should have at least one child <option> element.
Here's an example of how to use it:
<label for="fruit">Select your favorite fruit:</label>
<select id="fruit">
<optgroup label="Citrus">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
</optgroup>
<optgroup label="Berries">
<option value="strawberry">Strawberry</option>
<option value="blueberry">Blueberry</option>
</optgroup>
</select>
Output:
In this example, there are two groups of options: "Citrus" and "Berries". The label attribute of the <optgroup> tag is used to give the group a title. The child <option> elements are the individual options within each group.
77. <option>
The <option> tag is used in HTML to create a selectable list of options within a <select> element. Each <option> represents an item in the list that the user can choose from. Here is an example of how to use it:
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
Output:
In this example, the user can select one of the four car brands listed in the <select> element. The value attribute sets the value of the option that will be sent to the server when the form is submitted, while the text between the opening and closing tags is what the user sees in the list.
78. <output>
The <output> tag is used to display the result of a calculation or a user action, typically within a <form> element. It is used to present the calculated result in a visual format for the user.
Here is an example of how the <output> tag can be used:
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)"> <input type="number" id="num1" name="num1" value="0"> <br> + <br> <input type="number" id="num2" name="num2" value="0"> <br> = <br> <output name="result" for="num1 num2"></output> </form>
In this example, two numbers are input by the user, and the sum of those numbers is automatically calculated using JavaScript and displayed in the <output> element. The for attribute is used to associate the <output> element with the input elements that are used to calculate the result.
79. <p>
The <p> tag in HTML stands for "paragraph". It is used to define a paragraph of text on a web page. The content within the <p> tag is automatically rendered as a block of text with a line break before and after the paragraph.
For example:
<p>This is a paragraph of text.</p>
The above code will display the text "This is a paragraph of text." as a block of text on the web page.
80. <param>
The <param> tag is used to define parameters for an object element in HTML. It is placed inside the <object> element and provides information about the data or parameters that should be passed to the object being embedded.
Here is an example:
<object data="example.swf"> <param name="movie" value="example.swf"> <param name="bgcolor" value="#FFFFFF"> <param name="quality" value="high"> </object>
In this example, the data attribute specifies the URL of the object being embedded. The <param> tags define the parameters that should be passed to the object, such as the movie parameter which specifies the URL of the object being embedded, the bgcolor parameter which sets the background color of the object, and the quality parameter which sets the quality of the object to "high".
81. <picture>
The <picture> tag is used to define multiple sources for an image and display the best one based on the user's device capabilities. Here's an example:
<picture> <source media="(max-width: 600px)" srcset="small-image.jpg"> <source media="(max-width: 1200px)" srcset="medium-image.jpg"> <source media="(min-width: 1201px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Alternative text for the image"> </picture>In this example, we have three different versions of the same image, each optimized for a different screen size. The browser will automatically select the best image to display based on the device's capabilities. If none of the sources are supported by the browser, it will fall back to the image defined in the <img> tag.
82. <pre>
The <pre> tag in HTML stands for "preformatted text". It is used to display text exactly as it appears in the source code, with all whitespace and line breaks preserved. The <pre> tag is often used to display code snippets or ASCII art.
Here's an example of how to use the <pre> tag:
<pre>
This is a preformatted
block of text.
It preserves whitespace
and line breaks.
Even indentation is preserved.
</pre>
This will display the text exactly as it appears between the opening and closing <pre> tags, with all whitespace and line breaks preserved.
Output:
This is a preformatted
block of text.
It preserves whitespace
and line breaks.
Even indentation is preserved.
83. <progress>
The <progress> tag in HTML is used to represent the progress of a task that is in progress. It is typically used to show the progress of a download, file upload, or any other lengthy task that may take some time to complete. The <progress> tag can have a value between 0 and 1, and can also have an optional maximum value specified using the max attribute.
Here's an example of using the <progress> tag:
<label for="file">File upload:</label> <input type="file" id="file" name="file" multiple> <progress id="upload-progress" max="100" value="0"></progress>
Output:
In the example above, a file input field is displayed along with a <progress> tag that is initially set to 0. As the file is being uploaded, the progress bar will update to reflect the current progress. If the max attribute is specified, the progress bar will also show how much of the task is left to be completed.
84. <q>
The <q> tag in HTML stands for "inline quotation". It is used to indicate a short quotation that is integrated into the surrounding text. Here's an example:
<p>According to <q>C.S. Lewis</q>, "You can never get a cup of tea large enough or a book long enough to suit me."</p>
This code will produce the following output:
According to
C.S. Lewis, "You can never get a cup of tea large enough or a book long enough to suit me."
85. <rp>
The <rp> tag is used in ruby annotations to provide parentheses around the ruby text. It is used in conjunction with the <rt> tag to provide additional information about the ruby text.
For example:
<ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby>
Output:
漢 字
This would display the characters "漢字" with "Kan" and "ji" in parentheses above them to provide pronunciation and meaning information.
86. <rt>
The <rt> tag specifies the pronunciation of characters in a ruby annotation. It is used in conjunction with the <ruby> tag to provide additional phonetic information for East Asian languages such as Japanese, Chinese or Korean.
For example, the following code would display the character "漢" with the pronunciation "かん" (kan) above it:
<ruby> 漢<rt>かん</rt> </ruby>
Output:
漢
This is especially useful when the characters being displayed are complex or unfamiliar, providing a way for readers to easily understand their pronunciation.
87. <ruby>
<ruby> is an HTML tag used for indicating annotations for East Asian typography, particularly for phonetic readings of characters in Japanese, Chinese, and Korean. It is used to represent the pronunciation of characters above or alongside the characters themselves.
For example:
<ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp> </ruby>
Output:
漢 字
The above code would render the characters "漢字" with the pronunciation "かんじ" written above and in parentheses.
88. <s>
The <s> tag is used to represent text that has been deleted or struck through. Here's an example of how it can be used in HTML:
<p>This is <s>not</s> a good idea.</p>
Output:
This is
nota good idea.
In this example, the word "not" is struck through to indicate that it has been deleted from the original text. The resulting text would be "This is a good idea."
89. <samp>
The <samp> tag is used in HTML to indicate sample output from a computer program or script. It is typically used to display the results of a program, command, or code snippet.
Here's an example of how to use the <samp> tag:
<p>This is an example of <samp>sample output</samp>.</p>
Output:
This is an example of sample output.
This will render the text "This is an example of sample output." with "sample output" enclosed in a box or other visually distinct formatting.
90. <script>
The <script> tag is used to define a client-side script, such as a JavaScript code. It can be placed in the <head> or <body> section of an HTML document. Here's an example of how to use the <script> tag to display an alert message:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script>
function showAlert() {
alert("Hello, World!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click Me!</button>
</body>
</html>
Output:
My Website
In this example, a JavaScript function showAlert() is defined in the <head> section of the HTML document using the <script> tag. The function displays an alert message when called. A button is added to the <body> section of the HTML document, which calls the showAlert() function when clicked. When the button is clicked, an alert message with the text "Hello, World!" is displayed.
91. <section>
The <section> tag is an HTML5 tag used to define a section of a web page. It is typically used to group together related content, such as a blog post, article, or product listing. The content inside a <section> tag is usually related to a specific theme or topic and should be semantically meaningful.
Here's an example of how to use the <section> tag:
<section>
<h2>Heading</h2>
<p>Paragraph text goes here.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</section>
In this example, the <section> tag is used to group together a heading, paragraph text, and a list of items. This content is related to a specific theme or topic, and the <section> tag helps to semantically indicate this grouping to search engines and assistive technologies.
92. <select>
The <select> element is used to create a dropdown list of options for the user to choose from. It is a form control element that is used within a form element. The <select> element is used in combination with <option> elements to create the list of options.
Here is an example of a basic usage of the <select> element:
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="Submit">
</form>
Output:
In the example above, the user is presented with a dropdown list of car options to choose from. The name attribute is used to identify the control when the form is submitted. The id attribute is used to associate the <label> element with the <select> element, and also to reference the element in scripts. The <option> element is used to define each individual option in the list, with the value attribute specifying the value that will be submitted to the server when the form is submitted.
93. <small>
The <small> tag is an HTML element used to indicate small print or disclaimers in the text. It is typically used to display legal or copyright information, authorship details, or as a footnote.
Here's an example of how to use the <small> tag in HTML:
<p>This website is <small>© 2023 ChatGPT</small>. All rights reserved.</p>
Output:
This website is © 2023 ChatGPT. All rights reserved.
In this example, the text "© 2023 ChatGPT" is displayed in smaller font size and indicates the copyright owner and the year the website was created.
94. <source>
The <source> tag is used to specify multiple media resources for media elements like <video> and <audio>. It allows the browser to choose the best suited source to be used based on the type of the media, its encoding, and other factors.
Here's an example usage of the <source> tag for a video element:
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video>
In the example above, two different video formats are specified using the <source> tag with the src attribute pointing to the media file and the type attribute specifying the MIME type of the media file. The <video> tag contains a fallback message in case the browser doesn't support the video tag or any of the specified sources.
95. <span>
<span> is an HTML tag used to group and apply styles to inline elements. It is used when no other semantic element is appropriate. It has no default styles and does not add any line breaks or extra spacing to the content inside it.
Here's an example of using the <span> tag to apply styles to a specific part of a sentence:
<p>Today is <span style="color: blue;">sunny</span> outside.</p>
Output:
Today is sunny outside.
In this example, the word "sunny" is wrapped in a <span> tag with a style attribute that changes the color of the text to blue.
96. <strike> (Not supported in HTML5)
The <strike> tag is a deprecated HTML tag that is no longer supported in HTML5. It was previously used to indicate that text within it should be struck through. It has been replaced by the <del> tag in HTML5.
97. <strong>
The <strong> tag is used in HTML to define important text. It typically displays text in bold font, but its primary purpose is to give extra importance to certain text on a webpage. This can help the text stand out and make it easier for users to quickly identify important information. Here's an example:
<p>This is some <strong>important</strong> text.</p>
Output:
This is some important text.
In the example above, the word "important" would be displayed in bold font to indicate its importance.
98. <style>
The <style> tag in HTML is used to define the style information for an HTML document. It is placed in the head section of an HTML document and is used to add CSS styling rules.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<style>
.bold-text{
color: blue;
font-size: 24px;
}
.ptext {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1 class="bold-text">Welcome to my website</h1>
<p class="ptext">This is an example paragraph.</p>
</body>
</html>
Output:
Example Page Welcome to my website
This is an example paragraph.
In this example, the style rules defined in the <style> tags will apply to the entire document. The body background color will be set to #f1f1f1, h1 elements will have blue color and font size of 24px, and p elements will have green color and font size of 16px.
99. <sub>
The <sub> tag is used to specify the subscript text. For example, in a chemical equation, the numbers indicating the number of atoms or molecules of each element are often written in subscript. Here is an example of how to use the <sub> tag:
The chemical formula for water is H<sub>2</sub>O.
Output:
The chemical formula for water is H2O.
In the above example, the "2" is written in subscript using the <sub> tag.
100. <summary>
The <summary> tag is used in conjunction with the <details> tag to create a summary or a heading for a collapsible section. The <details> tag creates a collapsible section, while the <summary> tag is used to provide a summary or a heading for that section. When a user clicks on the summary, the collapsible section is expanded or collapsed, depending on its current state.
Here is an example of how to use the <summary> and <details> tags:
<details> <summary>Click to expand</summary> <p>This is the content that will be collapsed or expanded.</p> </details>
Output:
Click to expand
This is the content that will be collapsed or expanded.
In this example, the summary says "Click to expand". When the user clicks on it, the <p> tag containing the content will be expanded or collapsed.
101. <sup>
The <sup> tag is used in HTML to indicate superscripted text. The superscripted text is generally smaller and raised above the normal text. For example, in the chemical formula H2O, the "2" would typically be in superscript to indicate that it is a subscripted number.
Here is an example of how the <sup> tag can be used in HTML:
The area of a circle is calculated using the formula A = πr<sup>2</sup>
Output:
The area of a circle is calculated using the formula A = πr2
In this example, the 2 in the formula for calculating the area of a circle is superscripted using the <sup> tag. When the HTML is rendered, the "2" will appear smaller and raised above the normal text.
102. <svg>
The <svg> tag is used in HTML to embed scalable vector graphics in a webpage. SVG is a format for two-dimensional graphics that can be rendered in XML format. This tag provides a way to create graphics that are resolution-independent and can be scaled without losing quality. The content within the <svg> tag is defined using XML and can include shapes, paths, text, and other elements. The <svg> tag can also include various attributes to define the width, height, viewBox, and other properties of the graphic. Here's an example of how to use the <svg> tag:
<svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="red" /> </svg>
Output:
This code will create a red circle with a radius of 50 pixels, centered at the point (100, 100) in a 200x200 pixel canvas.
103. <table>
The <table> tag is an HTML element used to create tables on a web page. Tables are used to display data in rows and columns. The structure of a table is defined using a combination of <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> tags.
The <table> tag is the main container for the entire table. Within the <table> tag, you can define the header, body, and footer sections using the <thead>, <tbody>, and <tfoot> tags respectively. The <tr> tag is used to define each row of the table, while the <th> tag is used to define table headers, and the <td> tag is used to define table cells.
Here's an example of a simple table:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
</tbody>
</table>
Output:
| Month | Savings |
|---|---|
| January | $100 |
| February | $150 |
This code will create a table with two columns, one for the month name and another for the savings amount. The first row of the table will be the header row, and it will contain the column names. The second and third rows of the table will contain the data for January and February respectively.
104. <tbody>
In HTML, the <tbody> tag is used to group the body content in a table. It is used to represent the main content of the table, excluding the table header (<thead>) and table footer (<tfoot>).
Here's an example of how to use the <tbody> tag:
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$2.99</td>
</tr>
<tr>
<td>Bananas</td>
<td>$1.99</td>
</tr>
<tr>
<td>Oranges</td>
<td>$3.49</td>
</tr>
</tbody>
</table>
Output:
| Product | Price |
|---|---|
| Apples | $2.99 |
| Bananas | $1.99 |
| Oranges | $3.49 |
In this example, the <tbody> tag is used to group the rows containing the product information and their prices. The table header is defined using the <thead> tag.
105. <td>
The <td> tag is used in HTML to create a table cell. It is a child element of the <tr> (table row) tag and can be used to define a single cell within a table. The content of a table cell can contain any type of HTML element, such as text, images, links, or even other tables.
Here's an example of how the <td> tag can be used to create a simple table with two rows and two columns:
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Output:
| Row1,Column1 | Row1,Column2 |
| Row2,Column1 | Row2,Column2 |
In this example, the <td> tag is used to define each individual cell of the table. The content of each cell is simply text, but it could just as easily be an image, a link, or any other HTML element.
106. <template>
The <template> tag in HTML is used to define a block of content that can be reused in the document. It is not rendered on the web page, but instead serves as a placeholder for content that can be cloned and inserted into the document using JavaScript.
Here's an example of how to use the <template> tag:
<template id="my-template">
<h2>Template Content</h2>
<p>This is some example content for the template.</p>
</template>
<script>
// Get the template content
const template = document.querySelector('#my-template').content;
// Clone the template content and insert it into the document
const clonedContent = template.cloneNode(true);
document.body.appendChild(clonedContent);
</script>
In this example, we first define a template with an id of "my-template" that contains some example content. We then use JavaScript to retrieve the content of the template, clone it, and insert it into the document.
107. <textarea>
The <textarea> element is used to create a multi-line text input field in an HTML form. It is often used for user comments, descriptions, or any other form field where a user might need to enter a large amount of text.
Here is an example of how to use the <textarea> element:
<label for="comment">Leave a comment:</label> <textarea id="comment" name="comment" rows="5" cols="50"></textarea>
In this example, we have created a label for the textarea using the for attribute and given the textarea an id and a name attribute. The rows and cols attributes specify the number of rows and columns of the textarea.
108. <tfoot>
The HTML tag <tfoot> is used to define the footer content of an HTML table. It is used as a child of the <table> element and must be placed after the <thead> and <tbody> elements if they are present. The <tfoot> element can contain one or more <tr> (table row) elements which contain the actual footer content.
Here is an example of how to use the <tfoot> element:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Output:
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Total | $180 |
In this example, the table contains a header row (<thead>), a body of data rows (<tbody>), and a footer row (<tfoot>) that displays the total savings.
109. <th>
The <th> tag is an HTML element used to define a table header. It is used within the <thead> element to define a cell in the table header row. The content of the <th> element is usually displayed in bold, and it is often used to provide a label or description for the data in the cells in the table.
For example, in the following code snippet, the <th> tags are used to define the table header row:
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</tbody>
</table>
Output:
| FirstName | LastName | Age |
|---|---|---|
| John | Doe | 30 |
| Jane | Smith | 25 |
In this example, the <th> tags are used to define the header cells for the "First Name", "Last Name", and "Age" columns in the table. The <td> tags are used to define the data cells in the table body.
110. <thead>
The <thead> tag in HTML represents the head section of a table, which typically contains column headings (i.e., the labels for each column in the table). The <thead> tag is used in conjunction with the <table> and <tbody> tags to structure the content of a table.
Here is an example of how the <thead> tag can be used to define the header section of a table:
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
Output:
| Column1 | Column2 | Column3 |
|---|---|---|
| Data1 | Data2 | Data3 |
| Data4 | Data5 | Data6 |
In this example, the <thead> section contains a single row (<tr>) with three column headings (<th>) labeled "Column 1", "Column 2", and "Column 3". The <tbody> section contains two rows of data (<tr>) with corresponding columns of data (<td>) beneath each column heading.
111. <time>
The <time> element is used to represent a specific date and/or time in a machine-readable format. It can be used to indicate the publication date of an article or blog post, the start or end time of an event, or any other time-related information.
The <time> element should include a datetime attribute with a valid date and/or time in ISO 8601 format, which can be used by browsers and search engines to parse and display the date and/or time in a user-friendly way.
Here's an example:
<p>The concert starts at <time datetime="2023-05-12T19:00">7:00 pm on May 12th, 2023</time> at the Civic Center.</p>
Output:
The concert starts at at the Civic Center.
112. <title>
The <title> tag is used in the head section of an HTML document to specify the title of the page. It is what appears in the browser's title bar, bookmarks, and search engine results. Here's an example of how to use the <title> tag:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
In this example, the title of the page is "My Website". When you view this page in a browser, the title will appear in the title bar of the window/tab.
113. <tr>
The HTML <tr> tag is used to define a table row within an HTML table. It is used in conjunction with the <table>, <tbody>, <thead>, and <tfoot> tags to create a tabular structure on a web page. The <tr> tag is used to indicate a new row within the table, and the contents of the row are defined using the <td> or <th> tags. The <td> tag is used to define a standard cell within the table, while the <th> tag is used to define a header cell.
Here's an example of how the <tr> tag can be used in an HTML table:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
Output:
| Name | Age | City |
|---|---|---|
| JohnSmith | 30 | NewYork |
| JaneDoe | 25 | LosAngeles |
In this example, the <tr> tag is used to define two rows within the table body, each containing three cells defined using the <td> tag. The first row of the table, which serves as the table header, is defined using the <thead> and <th> tags.
114. <track>
The <track> element is used to specify timed text tracks for media elements, such as video or audio. These tracks are used to provide subtitles, captions, or other information related to the media content.
Here's an example of how to use the <track> element:
<video controls> <source src="example.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español"> </video>
In this example, we have a <video> element with two <source> elements that specify different video formats. We also have two <track> elements that specify the subtitles in English and Spanish, respectively. The src attribute specifies the URL of the subtitle file, while the kind attribute specifies the type of track (in this case, subtitles). The srclang attribute specifies the language of the track, and the label attribute provides a label for the track that can be displayed to the user.
115. <tt> (Not supported in HTML5)
The <tt> tag is deprecated in HTML5 and should not be used in modern web development. However, it was historically used to indicate text that should be displayed in a monospaced font, such as code snippets or terminal commands. Here's an example:
<tt>This is some code</tt>
Output:
This is some code
In modern web development, the <code> tag is often used instead to indicate code snippets, and CSS can be used to apply a monospaced font to the text.
116. <u>
The <u> tag is an HTML tag that is used to underline text. It has been deprecated in HTML5, meaning it's not recommended for use anymore. Instead, the CSS text-decoration: underline property can be used to achieve the same effect.
117. <ul>
The <ul> tag in HTML is used to create an unordered list. An unordered list is a list of items that have no particular order, and each item is typically marked with a bullet point or some other type of marker.
Here is an example of how to use the <ul> tag in HTML:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Output:
- Item1
- Item2
- Item3
In this example, we have created an unordered list with three items. Each item is marked with a bullet point by default, but this can be customized using CSS. The <li> tag is used to create each item in the list.
118. <var>
The <var> tag in HTML is used to define a variable in a programming code or to indicate a variable in a mathematical expression. It can also be used to represent a placeholder for user input or content that is subject to change. When displayed in a web page, the text within the <var> tag is usually rendered in italics to distinguish it from other content.
Here's an example of how to use the <var> tag:
<p>The area of a circle with a radius of <var>r</var> is calculated using the formula A = πr<sup>2</sup>.</p>
Output:
The area of a circle with a radius of r is calculated using the formula A = πr2.
In the above example, the variable "r" is defined within the <var> tag and is used in a mathematical formula to calculate the area of a circle. The <sup> tag is also used to display "r" as a superscript, indicating that it is squared in the formula.
119. <video>
The <video> tag is an HTML5 element used for embedding videos in web pages. It allows you to specify various attributes such as the video source, dimensions, and controls. Here's an example of how to use the <video> tag:
<video width="640" height="360" controls> <source src="example.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
In this example, we set the width and height of the video to 640x360 pixels, and enable the built-in controls for the video player. The <source> tag specifies the video file and its MIME type. The text "Your browser does not support the video tag." is displayed if the browser doesn't support the video tag.
120. <wbr>
The <wbr> tag is used in HTML to indicate a word break opportunity, which allows the browser to break a long word at a point where there is no space, hyphen or other character to separate it. This can be useful for improving the readability of long paragraphs, especially on smaller screens. Here is an example of how to use the <wbr> tag:
<p>This is a long paragraph that includes a reallylongwordthatneedstobebrokenatapointwheretheresnospace<wbr>orhyphentoseparateit.</p>
Output:
This is a long paragraph that includes a reallylongwordthatneedstobebrokenatapointwheretheresnospace
orhyphentoseparateit.
In this example, the <wbr> tag is used to indicate a possible break point in the long word, which allows the browser to break the word into two lines at that point if necessary.
VI. HTML Syntax Rules
HTML has a specific set of syntax rules that must be followed in order for the code to be valid and work correctly. Here are some of the basic syntax rules of HTML:
- HTML code is enclosed within a pair of angle brackets (< >).
- HTML tags are always written in lowercase.
- HTML tags must always have a closing tag, except for empty tags such as <img> and <br>.
- HTML attributes are always enclosed in double quotes (" ").
- HTML tags and attributes should be written using the correct spelling and capitalization.
- HTML comments can be added to code using the syntax.
- HTML code should be properly indented for readability and organization.
- HTML documents should always have a doctype declaration at the beginning of the file.
- HTML documents should always have a head section and a body section.
- HTML documents should always have a title element in the head section.
Following these syntax rules is important for creating valid and well-structured HTML code that is easily understood and interpreted by web browsers. By following these rules, web developers can ensure that their web pages are accessible, optimized for search engines, and compatible with different web browsers and devices.
VII. Conclusion
In conclusion, HTML tags are an essential part of web development, providing the structure and formatting necessary to create visually appealing and functional web pages. Understanding HTML syntax, including the difference between HTML tags and attributes, and the use of semantic elements, is important for creating well-structured and optimized web content.
Proper use of HTML tags can also improve the accessibility and usability of web pages, making them more accessible to users with disabilities and improving their performance on search engines. Web developers who follow HTML syntax rules and use semantic elements can create web content that is user-friendly, engaging, and accessible to a wider audience.
As web development continues to evolve, it is important for developers to stay up-to-date with the latest HTML standards and best practices. By doing so, they can create web content that is responsive, optimized, and accessible to all users, regardless of their device or ability.
That’s a wrap!
I hope you enjoyed this article
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
