HTML Table Tags
In HTML, various elements are used to structure tables. These include elements like table, tr, td, th, tbody, thead, tfoot, col, colgroup, and caption. Each of these elements plays a specific role in defining the structure and content of a table in a web page.
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset, and legend elements are commonly used in HTML for creating interactive forms on web pages. These elements play essential roles in collecting user input and structuring the layout of the form. Let's explore each of these elements:
✅ The form element is used to create a container for form elements that allow users to enter data that can be submitted to a server for processing.✅ Input elements are used to create various types of form controls, such as text fields, checkboxes, radio buttons, and submit buttons.✅ Textarea elements are used to create multi-line text input fields, suitable for longer blocks of text.✅ Select elements create dropdown lists from which users can select one or more options.✅ Option elements are used within a select element to define the available options in a dropdown list.✅ Optgroup elements group related options within a select element to provide a hierarchical structure to the dropdown list.✅ Button elements are used to create clickable buttons that can trigger actions when interacted with.✅ Label elements are used to provide a textual description for form elements, improving accessibility and user experience.✅ Fieldset elements group related form controls together and can include a legend element to provide a title or description for the group.
By understanding the purpose of these elements, web developers can effectively design and implement user-friendly forms that enhance the overall user experience on websites.
HTML Scripting Tags
script and noscript
Note: We will see examples using these tags in later charters.
All HTML Tags
Let's explore the comprehensive list of tags available in the HTML code provided below.
1. Comments:
By utilizing this tag, it is possible to insert comments within HTML code. When elements are commented on, they are not rendered by the browser. Furthermore, these commented sections remain invisible on the actual web page but are present in the page's source code.
Syntax:
<strong><!-- --></strong>
2. Doctype:
By utilizing this tag, we can specify to the web browser the version of the markup language being used.
Syntax:
3. <a>:
This tag enables us to generate a hyperlink leading to a webpage. The hyperlink can link to a separate file located elsewhere.
Syntax:
<a href="url">Link Text</a>
4. <abbr>:
This tag allows us to specify the shortened forms or acronyms of extended terms like www, HTML, HTTP, and so on.
Syntax:
<abbr title="expanded-text">abbreviation</abbr>
5. ### 5. <address>::
By utilizing this tag, we have the ability to locate the contact information or address of the author of a webpage. The <address> tag holds details such as addresses, phone numbers, email addresses, website links, and more.
Syntax:
<address>
Contact Information Goes Here
</address>
6. <area>:
Using this tag allows us to specify the clickable region linked to a hyperlink.
Syntax:
<area shape="shape-type" coords="coordinates" href="destination-url" alt="alternative-text">
7. <article>:
By utilizing the <article> tag, we have the capability to showcase specific content meant for distribution to external websites independently. This tag enables the presentation of complete blog entries, news pieces, or other related content.
Syntax:
<article>
<!-- Content goes here -->
</article>
8. ### 8. <audio>::
By utilizing this tag, we can integrate an audio file into the webpage without requiring extra plug-ins such as Flash.
Syntax:
<audio src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" controls>
Your browser does not support the audio element.
</audio>
9. 9. <meta>::
By utilizing this tag, we are able to specify the information pertaining to the primary content of a webpage, although they are not part of the webpage itself.
Syntax:
<aside>
<!-- Content goes here -->
</aside>
10. <b>:
By utilizing this tag, we have the ability to emphasize text by making it bold without adding any extra meaning.
Syntax:
<b>Text to be displayed in bold</b>
11. <base>:
By utilizing this tag, we can establish the destination address that all URLs within the document point to.
Syntax:
<base href="base-url" target="base-target">
12. <bdi>:
By utilizing this tag, we can instruct the browser to separate text originating from different sources using a bidirectional algorithm.
Syntax:
<bdi>Text with different directionality</bdi>
13. <bdo>:
By utilizing this tag, it is possible to replace the existing text.
Syntax:
<bdo dir="direction">Text with overridden directionality</bdo>
14. 14. <bdo>:
By utilizing the <blockquote> tag, we can incorporate quoted content from external sources into a document. By default, content encapsulated within a <blockquote> tag is displayed by browsers with an indentation.
Syntax:
<blockquote>
Quoted content goes here.
</blockquote>
15. <body>:
By utilizing the body tag, we are able to specify the primary content of a webpage. This tag encompasses various elements such as text, paragraphs, headings, images, tables, links, and videos.
Syntax:
<body>
<!-- Content goes here -->
</body>
<strong> </strong>
16. <br>:
This tag enables the creation of a line break on a webpage. It is commonly utilized when composing poems or addresses that necessitate line breaks.
Syntax:
17. <button>:
This tag enables the creation of a clickable button on a webpage. The button tag can be utilized within forms or at any location within a document.
Syntax:
<button>Button Text</button>
<strong> </strong>
18. <canvas>:
By utilizing this tag, we can specify a specific area designated for rendering graphics via scripting, typically in JavaScript.
Syntax:
<canvas id="canvas-id" width="width" height="height"></canvas>
19. <caption>:
This tag assists in generating the table caption, which serves as the title for the table.
Syntax:
<table>
<caption>Caption Text</caption>
<!-- Table content goes here -->
</table>
20. <cite>:
Utilizing this tag enables us to engage in innovative tasks and assign a title to that innovative project.
Syntax:
<cite>Referenced Content</cite>
21. <code>:
This tag allows us to embed a specific code snippet, such as HTML or CSS code.
Syntax:
<code>Code goes here</code>
22. <col>:
By utilizing this tag, we have the ability to define the properties of all columns. These properties can be set within the <colgroup> tag.
Syntax:
23. <table>:
By utilizing this tag, we have the ability to designate single or multiple columns within a group. This allows for the application of a style to the complete column without the need to reapply the style to each individual column and row.
Syntax:
<colgroup>
<!-- col elements go here -->
</colgroup>
24. <data>:
By utilizing this tag, we can incorporate machine-interpretable translation. The tag is produced by the processor, while the browser is capable of displaying the human-readable content.
Syntax:
<data value="data-value">Data Label</data>
25. ### 25. <datalist>::
By utilizing this tag, we can enable an auto-fill functionality for the form field, allowing users to conveniently choose an option from a provided list of options.
Syntax:
<input list="datalist-id">
<datalist id="datalist-id">
<!-- option elements go here -->
</datalist>
26. <dd>:
By utilizing this tag, we have the capability to specify the explanation within an HTML document. It is also employed to detail an entry within a list of descriptions.
Syntax:
<dl>
<dt>Term</dt>
<dd>Description or definition goes here</dd>
</dl>
27. <del>:
By utilizing this tag, we have the ability to specify a particular section for removal from the document. Once applied, the web browser will display a strikethrough effect on the designated section within the webpage.
Syntax:
28. ### 28. <details>::
By utilizing this tag, a toggle can be generated. The toggle initially conceals all details in a closed state. Upon hovering the mouse over it, the toggle transitions to an open state, revealing all the concealed information.
Syntax:
<details>
<summary>Summary Text</summary>
<!-- Content goes here -->
</details>
29. <dfn>:
Using this tag allows us to denote the definition element. By utilizing the definition element, we can specify the occurrences of the definition. The initial occurrence of a term within a document is referred to as the instances of the definition.
Syntax:
<dfn>Term Definition</dfn>
30. ### 30. <dialog>::
By utilizing this tag, we are able to specify a dialog box and various other elements on a webpage. This element enables the webpage to engage with the user in an aesthetically pleasing manner.
Syntax:
<dialog open>
<!-- Dialog content goes here -->
</dialog>
31. <div>:
By utilizing this tag, we can generate a versatile container capable of containing content flow without default rendering.
Syntax:
<div>
<!-- Content goes here -->
</div>
32. <dl>:
Using this tag, we have the ability to specify a collection of items within a webpage. Additionally, it allows us to present metadata within the webpage.
Syntax:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<!-- more terms and definitions -->
</dl>
33. <dt>:
With the help of this tag, we can define the definition list on the web page. we have to write the <dt> tag within the <dl> tag. We can also flow this element with the help of <dd> tag.
Syntax:
<dl>
<dt>Term</dt>
<!-- Definition or description goes here -->
</dl>
34. <em>:
By utilizing this HTML tag, it is possible to highlight a specific word or phrase in a sentence. This tag transforms the regular text into italicized and emphasized styles.
Syntax:
35. <embed>:
This tag allows us to incorporate external content like audio or video within a webpage.
Syntax:
<embed src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
36. <fieldset>:
By utilizing this tag, we have the capability to form a cluster of interconnected elements within a form. Additionally, this tag allows us to establish a border around the element.
Syntax:
<fieldset>
<legend>Fieldset Title</legend>
<!-- Form controls go here -->
</fieldset>
37. ### 37. <figcaption>::
By utilizing this tag, we are able to add a description to the image, table, or chart located inside the <figure> element.
Syntax:
<figure>
<!-- Content goes here -->
<figcaption>Caption or Description</figcaption>
</figure>
38. <figure>:
By utilizing this tag, we can generate autonomous content known as a singular entity.
Syntax:
<figure>
<!-- Content goes here -->
<figcaption>Caption or Description</figcaption>
</figure>
39. <footer>:
Through the utilization of this particular component, it becomes possible to depict the footer section within the root element.
Syntax:
<footer>
<!-- Footer content goes here -->
</footer>
40. <form>:
By utilizing this tag, we are able to obtain data input from the user.
Syntax:
<form action="form-handler-url" method="HTTP-method">
<!-- Form controls go here -->
</form>
41. <head>:
By utilizing this tag, we are able to define the header portion of the code's header section, which includes all details related to the document.
Syntax:
<head>
<!-- Head content goes here -->
</head>
42. <header>:
By utilizing this tag, we have the ability to specify the header of a webpage. It includes details related to the title, heading, and section of the document.
Syntax:
<header>
<!-- Header content goes here -->
</header>
43. ### 43. <h1>::
This tag enables us to define a group of headings, including main headings and subheadings, ranging from <h1> to <h6>. It is beneficial for structuring heading elements within a document.
Syntax:
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Sub-subheading 1.1</h3>
<h3>Sub-subheading 1.2</h3>
<h2>Subheading 2</h2>
44. <h1> to <h6>: to <h1> to <h6>::
This tag is used to specify the heading of a webpage, setting it to be large and bold by default. Headings with the <h1> tag are shown in the biggest font size, while those with the <h6> tag are displayed in the smallest font size.
Syntax:
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
45. <hr>:
This tag allows us to separate sections within a webpage. It represents a horizontal rule or a visual break in the layout.
Syntax:
46. ### 46. <html>::
This tag serves as the container for all other elements, commonly referred to as the root of the HTML element.
Syntax:
<!DOCTYPE html>
<html>
<!-- HTML content goes here -->
</html>
47. <i>:
By utilizing this tag, we have the ability to render any content in italics. This tag serves to emphasize a crucial term, phrase, or technical jargon.
Syntax:
48. ### 48. <iframe>::
By utilizing this tag, it becomes possible to incorporate a different HTML page within the existing webpage.
Syntax:
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></iframe>
49. <img>:
By utilizing this tag, we have the capability to insert an image onto the existing webpage. It associates an image to the webpage without the need to directly embed it within the webpage.
Syntax:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="alternative-text">
50. <input>
By utilizing this tag, we can activate interactive management within the form. Its functionality is contingent on the different attributes of the type field.
Syntax:
<input type="input-type" name="input-name" value="default-value">
51. <ins>:
This tag allows us to define a section of text that has been inserted. It indicates the inclusion of a specific text range in the document.
Syntax:
52. <kbd>:
This tag allows us to reference the textual content within inline text that represents the input from the user's keyboard, voice, or any other text input mechanism.
Syntax:
<kbd>Keyboard Input</kbd>
53. ### 53. <label>::
By utilizing this tag, we can enhance the user experience for individuals using a mouse, specifically by enabling the control to be toggled by clicking on the label.
Syntax:
<label for="input-id">Label Text</label>
54. ### 54. <legend>::
By utilizing this tag, we have the ability to specify the title for the content belonging to a child. Legends serve as the superior element encompassing all subordinate elements. These subordinate elements can be outlined using the assistance of <fieldset>.
Syntax:
<fieldset>
<legend>Fieldset Caption</legend>
<!-- Form controls go here -->
</fieldset>
55. <li>:
By utilizing this tag, we have the capability to display a collection of items on a webpage. It serves as the container for an ordered list, unordered list, or a menu.
Syntax:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
56. <link>:
By utilizing this tag, external resources can be connected to the current webpage.
Syntax:
<link rel="stylesheet" href="stylesheet.css">
57. <main>:
By utilizing this tag, we can elevate a regular element to a prominent status. It should be placed within the <body> tag to achieve this effect.
Syntax:
<main>
<!-- Main content goes here -->
</main>
58. <map>:
By utilizing this tag, we can specify the map image along with clickable regions. This feature enables defining interactive regions within an image.
Syntax:
<map name="map-name">
<!-- Area tags go here -->
</map>
59. <mark>:
By utilizing this tag, we can display text in a highlighted format, which is commonly employed for referencing or making notes. The text is emphasized based on its significance.
Syntax:
<mark>Highlighted Text</mark>
60. <meta>:
By utilizing this tag, we are able to denote the metadata of a document. The metadata encompasses details such as page description, keywords, copyright information, language specification, and the authorship.
Syntax:
<meta name="metadata-name" content="metadata-value">
61. <meter>:
Through the utilization of this tag, we can depict measurements within a specified range or fractional values, commonly referred to as the gauge.
Syntax:
<meter value="current-value" min="minimum-value" max="maximum-value">Fallback Content</meter>
62. <nav>:
By utilizing the <nav> tag, we can define a portion of navigational links within a document. Instances of nav tags include menus, tables of contents, indexes, and more.
Syntax:
<nav>
<!-- Navigation links or menus go here -->
</nav>
63. 63. <script>:
By utilizing this method, we can offer a substitute script in cases where the user's browser lacks compatibility with the specific script. This approach is effective when the user's browser does not support client-side scripting or any scripting language.
Syntax:
<noscript>
<!-- Alternate content goes here -->
</noscript>
64. ### 64. <embed>::
This tag enables the presentation of multimedia content such as audio, videos, images, PDFs, and Flash within web pages.
Syntax:
<object data="resource-url"></object>
65. <ol>:
The <ol> tag is utilized to generate a numbered list. The numbering can be either numerical or alphabetical. By employing the <ol> tag, we can structure the list with the <li> tag, ensuring items appear in the specified sequence.
Syntax:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
66. <optgroup>:
The mentioned tag plays a crucial role in generating a dropdown menu. By utilizing this tag, we have the capability to specify a collection of choices within the dropdown menu.
Syntax:
<select>
<optgroup label="Group Label">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<!-- Additional options -->
</optgroup>
<!-- Additional outgroup or option elements -->
</select>
67. ### 67. <option>::
By utilizing this tag, we have the capability to specify the choice within the dropdown menu through the <select> tag.
Syntax:
<select>
<option value="option-value">Option Text</option>
<!-- Additional options -->
</select>
68. ### 68. <output>::
By utilizing this tag, we can establish a container for the element that displays the outcome of the calculation.
Syntax:
<output for="input-id"></output>
69. :
By utilizing this tag, we are able to specify the paragraph tag. Through the paragraph tag, we can display visual content as text blocks that are set apart from nearby blocks either by empty lines or an indentation on the first line.
Syntax:
Paragraph text goes here.
70. <param>:
By utilizing this tag, we are able to specify the parameter for an object. This enables us to transfer the parameter for another nested object.
Syntax:
<object>
<param name="param-name" value="param-value">
</object>
71. ### 71. <picture>::
By utilizing this tag, we can enhance the adaptability of the webpage through the definition of the image. It also encompasses elements such as <source> and <img>.
Syntax:
<picture>
<source srcset="image1.jpg" media="media-query">
<source srcset="image2.jpg" media="media-query">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Fallback Image">
</picture>
72. <pre>:
Using this tag allows us to specify a section of text on a webpage to be displayed exactly as it is written, including characters like spaces, line breaks, and tabs.
Syntax:
<pre>
The pre-formatted text goes here.
</pre>
73. ### 73. <progress>::
Utilizing this tag enables the visualization of task advancement, allowing developers to incorporate a progress bar within their webpage.
Syntax:
<progress value="current-value" max="maximum-value"></progress>
74. <q>:
Using this tag, an inline quotation can be generated on a webpage. The text is enclosed within quotation marks in the majority of modern browsers.
Syntax:
Here is a <q>short quotation</q> within a sentence.
75. <rp>:
By employing this tag, we can utilize it within the fallback parentheses in cases where a web browser does not have the capability to support ruby annotations.
Syntax:
<ruby>
Base text <rp>(</rp><rt>Ruby text</rt><rp>)</rp>
</ruby>
76. <rt>:
By utilizing this tag, we are able to specify the correct pronunciation of the character within the ruby annotation.
Syntax:
<ruby>
Base text <rt>Ruby text</rt>
</ruby>
77. 77. <ruby>:
This tool enables us to specify the pronunciations of East Asian characters and display small annotations positioned above, below, or beside the main text.
Syntax:
<ruby>
Base text <rt>Ruby text</rt>
</ruby>
78. <s>:
This tag enables us to display text with a strikethrough or a line through it. It is suitable for indicating that certain information is no longer valid or applicable.
Syntax:
<s>Struck-through text</s>
79. <samp>:
By utilizing this tag, we are able to specify the example result of the software application. The information within this tag is exhibited in a fixed-width font on the web browser.
Syntax:
<samp>Sample text or code goes here</samp>
80. <script>:
By utilizing this tag, we can incorporate client-side scripting and facilitate the integration of scripts into the HTML webpage.
Syntax:
<script src="https://placehold.co/800x200/1abc9c/ffffff?text=Banner"></script>
81. <section>:
This tag enables us to generate the header, footer, or any other segment on a webpage.
Syntax:
<section>
<!-- Content goes here -->
</section>
82. <select>:
Through the utilization of this tag, we have the ability to specify a collection of choices within the list.
Syntax:
<select>
<option value="option-value">Option Text</option>
<!-- Additional options -->
</select>
83. <small>:
By utilizing this tag, it is possible to decrease the font size by one level compared to its original size, such as from large to small.
Syntax:
<small>Small text goes here</small>
84. <source>
By utilizing this tag, we have the capability to connect various media assets such as <audio> and <video>.
Syntax:
<source src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" type="video/mp4">
85. <strong>
By utilizing this tag, we can specify the content as highly significant, causing the browser to render that element in a bold format.
Syntax:
<strong>Emphasized text</strong>
86. <span>:
It represents the most basic element in HTML, allowing for the application of styles through the grouping of elements.
Syntax:
<span>Text or content goes here</span>
87. <style>:
The style details for the document can be specified using this tag.
Syntax:
<style>
CSS rules go here
</style>
88. <sub>:
By utilizing this tag, we can showcase the subscript element purely for typographic purposes.
Syntax:
<sub>Subscript text</sub>
89. ### 89. <summary>::
This tag enables the creation of a container using the <details> tag. This container can hold a summary, caption, or legend. By interacting with the summary button, it toggles the open/closed state of the parent *details> element.
Syntax:
<details>
<summary>Summary text</summary>
<!-- Collapsible content goes here -->
</details>
90. <sup>:
By utilizing this tag, it becomes possible to showcase any text as a superscript of the inline element.
Syntax:
<sup>Superscript text</sup>
91. <svg>:
This tag enables us to incorporate SVG graphs into a webpage. It allows us to specify vector graphics in an XML format.
Syntax:
<svg>
<!-- SVG content goes here -->
</svg>
92. ### 92. <table>::
By utilizing this tag, we are able to structure data in a tabular layout within HTML. This tag generates a table with both rows and columns, providing a two-dimensional representation of the information.
Syntax:
<table>
<!-- Table content goes here -->
</table>
93. ### 93. <tbody>::
By utilizing this specific tag, we are able to wrap the rows of a table that belong to the table body.
Syntax:
<table>
<tbody>
<!-- Table rows go here -->
</tbody>
</table>
94. <td>:
By utilizing this tag, we have the ability to specify the cell of a table. A row within a table could contain multiple <td> elements. The default alignment for this element is set to the left.
Syntax:
<tr>
<td>Table cell content</td>
</tr>