1. <a>(Anchor tag)
Attributes:
- href: Specifies the URL of the page the link goes to.
- target: Specifies where to open the linked document.
Example:
<a href="https://example.com" target="_blank">Visit Example</a>
Use for: Creates a hyperlink to another web page or resource.
2. <img>(Image tag)
Attributes:
- src: Specifies the path to the image.
- alt: Provides alternative text for the image.
Example:
<img src="image.jpg" alt="A beautiful scenery">
Use for: Embeds an image in the web page.
3. <p>(Paragraph tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p class="text">This is a paragraph.</p>
Use for: Defines a block of text as a paragraph.
4. <div>(Division tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<div id="container">
<p>Content inside a div.</p>
</div>
Use for: Defines a division or a section in an HTML document.
5. <span>(Span tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<span class="highlight">Highlighted text</span>
Use for: Defines a section in a document for styling purposes.
6. <h1>to <h6>(Heading tags)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
Use for: Define headings, with <h1>being the highest and <h6>the lowest.
7. <ul>(Unordered list)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Use for: Creates a bulleted list.
8. <ol>(Ordered list)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
- type: Specifies the kind of marker to use (e.g., 1, A, a, I, i).
Example:
<ol type="A">
<li>First item</li>
<li>Second item</li>
</ol>
Use for: Creates a numbered list.
9. <input>(Input field)
Attributes:
- type: Specifies the type of input (e.g., text, password, submit).
- name: Specifies the name of the input field.
- placeholder: Provides a hint to the user of what can be entered in the field.
Example:
<input type="text" name="username" placeholder="Enter your username">
Use for: Defines an input field where the user can enter data.
10. <form>(Form tag)
Attributes:
- action: Specifies where to send the form-data when the form is submitted.
- method: Specifies the HTTP method to use when sending form-data (GETor POST).
Example:
<form action="/submit" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
Use for: Defines an HTML form for user input.
11. <button>(Button tag)
Attributes:
- type: Specifies the type of button (button, submit, reset).
- onclick: Specifies a script to run when the button is clicked.
Example:
<button type="button" onclick="alert('Button clicked!')">Click Me</button>
Use for: Creates a clickable button.
12. <table>(Table tag)
Attributes:
border: Specifies the width of the border around the table.
cellpadding: Specifies the space between the cell content and its borders.
Example:
<table border="1" cellpadding="5">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Use for: Defines a table.
13. <strong>(Strong tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<strong>Important text</strong>
Use for: Defines important text, typically displayed in bold.
14. <em>(Emphasis tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<em>Emphasized text</em>
Use for: Defines emphasized text, typically displayed in italics.
15. <link>(Link tag)
Attributes:
- rel: Specifies the relationship between the current document and the linked document.
- href: Specifies the URL of the linked document.
- type: Specifies the type of the linked document.
Example:
<link rel="stylesheet" href="styles.css" type="text/css">
Use for: Defines a relationship between the current document and an external resource, often used to link to stylesheets.
16. <meta>(Meta tag)
Attributes:
- name: Specifies a name for the meta information.
- content: Specifies the value of the meta information.
Example:
<meta name="Use for" content="This is a webpage Use for.">
Use for: Provides meta-information about the document, such as Use fors, keywords, and author.
17. <progress>(Progress tag)
Attributes:
- value: Specifies the current value.
- max: Specifies the maximum value.
Example:
<progress value="70" max="100">70%</progress>
Use for: Represents the progress of a task.
18. <footer>(Footer tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<footer>
<p>© 2024 My Website</p>
</footer>
Use for: Defines a footer for a document or section.
19. <section>(Section tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<section>
<h2>About Us</h2>
<p>Information about our company.</p>
</section>
Use for: Defines a section in a document, typically with a heading.
20. <article>(Article tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<article>
<h2>News Article</h2>
<p>This is a news article.</p>
</article>
Use for: Defines a self-contained piece of content, such as a news article or blog post.
21. <aside>(Aside tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<aside>
<p>Related links or information.</p>
</aside>
Use for: Defines content that is tangentially related to the content around it, such as sidebars.
22. <details>(Details tag)
Attributes:
- open: Specifies that the details should be visible by default.
Example:
<details>
<summary>More information</summary>
<p>This is additional information.</p>
</details>
Use for: Defines a control for revealing additional details or information.
23. <summary>(Summary tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<details>
<summary>Click to expand</summary>
<p>Expanded content goes here.</p>
</details>
Use for: Provides a summary or heading for a <details>element.
24. <code>(Code tag)
Attributes:
class: Specifies one or more class names for the element.
id: Specifies a unique id for the element.
Example:
<code>console.log('Hello, world!');</code>
Use for: Defines a piece of computer code.
25. <pre>(Preformatted text)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<pre>
Line 1
Line 2
</pre>
Use for: Defines preformatted text, preserving spaces and line breaks.
26. <iframe>(Inline frame)
Attributes:
- src: Specifies the URL of the page to show.
- width: Specifies the width of the iframe.
- height: Specifies the height of the iframe.
Example:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
Use for: Embeds another HTML page within the current page.
27. <embed>(Embed tag)
Attributes:
- src: Specifies the URL of the embedded content.
- type: Specifies the MIME type of the embedded content.
Example:
<embed src="file.pdf" type="application/pdf" width="600" height="400">
Use for: Embeds external content, like multimedia or documents.
28. <object>(Object tag)
Attributes:
- data: Specifies the URL of the resource.
- type: Specifies the MIME type of the resource.
Example:
<object data="file.pdf" type="application/pdf" width="600" height="400"></object>
Use for: Embeds an object, like a multimedia file or a plugin.
29. <progress>(Progress tag)
Attributes:
- value: Specifies the current progress value.
- max: Specifies the maximum value.
Example:
<progress value="50" max="100"></progress>
Use for: Displays a progress bar.
30. <meter>(Meter tag)
Attributes:
- value: Specifies the current value.
- min: Specifies the minimum value.
- max: Specifies the maximum value.
Example:
<meter value="0.6" min="0" max="1"></meter>
Use for: Represents a scalar measurement within a known range.
31. <audio>(Audio tag)
Attributes:
- src: Specifies the URL of the audio file.
- controls: Specifies that audio controls should be displayed.
Example:
<audio src="audio.mp3" controls></audio>
Use for: Embeds sound content.
32. <video>(Video tag)
Attributes:
- src: Specifies the URL of the video file.
- controls: Specifies that video controls should be displayed.
- width: Specifies the width of the video.
- height: Specifies the height of the video.
Example:
<video src="video.mp4" controls width="600" height="400"></video>
Use for: Embeds video content.
33. <source>(Source tag)
Attributes:
- src: Specifies the URL of the media resource.
- type: Specifies the MIME type of the media resource.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Use for: Specifies multiple media resources for <video>or <audio>elements.
34. <caption>(Caption tag)
Attributes:
class: Specifies one or more class names for the element.
id: Specifies a unique id for the element.
Example:
<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
Use for: Provides a caption for a <table>element.
35. <fieldset>(Fieldset tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<fieldset>
<legend>Personal Information</legend>
<input type="text" name="name" placeholder="Name">
</fieldset>
Use for: Groups related elements in a form and can include a legend.
36. <legend>(Legend tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<fieldset>
<legend>Form Legend</legend>
<input type="text">
</fieldset>
Use for: Provides a caption for the <fieldset>element.
37. <progress>(Progress tag)
Attributes:
- value: Specifies the current value.
- max: Specifies the maximum value.
Example:
<progress value="70" max="100">70%</progress>
Use for: Represents the progress of a task.
38. <dialog>(Dialog tag)
Attributes:
open: Specifies that the dialog is visible.
Example:
<dialog open>
<p>This is a dialog box</p>
<button onclick="this.parentElement.close()">Close</button>
</dialog>
Use for: Represents a dialog box or interactive element.
39. <mark>(Mark tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p><mark>Highlighted text</mark></p>
Use for: Highlights parts of the text, usually with a yellow background.
40. <b>(Bold tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>This is <b>bold</b> text.</p>
Use for: Makes text bold without implying any extra importance.
41. <i>(Italic tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>This is <i>italic</i> text.</p>
Use for: Makes text italic without implying any emphasis.
42. <small>(Small tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>This is <small>smaller</small> text.</p>
Use for: Reduces the font size of the text.
43. <sub>(Subscript tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>H<sub>2</sub>O</p>
Use for: Displays text as subscript.
44. <sup>(Superscript tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>E=mc<sup>2</sup></p>
Use for: Displays text as superscript.
45. <time>(Time tag)
Attributes:
datetime: Specifies the date and time in machine-readable format.
Example:
<time datetime="2024-07-31T14:00">July 31, 2024, 2:00 PM</time>
Use for: Represents a specific period in time.
46. <output>(Output tag)
Attributes:
- for: Specifies which form elements the output is associated with.
- name: Specifies the name of the output element.
Example:
<form>
<input type="range" id="volume" value="50" max="100">
<output for="volume" id="volumeOutput">50</output>
</form>
Use for: Represents the result of a calculation or user action.
47. <noscript>(No script tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<noscript>Your browser does not support JavaScript!</noscript>
Use for: Provides alternative content if a script is not supported or disabled.
48. <datalist>(Datalist tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
Use for: Contains a set of <option>elements for an <input>element.
49. <optgroup>(Optgroup tag)
Attributes:
- label: Specifies a label for the group of options.
Example:
<select>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
</select>
Use for: Groups related options in a <select>dropdown menu.
50. <address>(Address tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<address>
<p>Contact us at:</p>
<p>123 Main Street, Anytown, USA</p>
</address>
Use for: Provides contact information for the author or owner of a document.
51. <bdi>(Bidirectional Isolation tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>Price: <bdi>$123.45</bdi></p>
Use for: Isolates a part of text to ensure it is displayed in the correct direction.
52. <bdo>(Bidirectional Override tag)
Attributes:
- dir: Specifies the direction of the text (ltrfor left-to-right, rtlfor right-to-left).
Example:
<bdo dir="rtl">This text will be displayed right-to-left.</bdo>
Use for: Overrides the current text direction.
53. <s>(Strikethrough tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>This is <s>struck-through</s> text.</p>
Use for: Renders text with a strikethrough.
54. <ruby>(Ruby annotation tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<ruby>漢<rt>kan</rt></ruby>
Use for: Provides a way to include ruby annotations (pronunciations) for East Asian characters.
- 55. <rt>(Ruby text tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<ruby>漢<rt>kan</rt></ruby>
Use for: Defines the pronunciation of a <ruby>annotation.
56. <rp>(Ruby Parentheses tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>
Use for: Provides parentheses around a <ruby>annotation for browsers that do not support <rt>.
57. <data>(Data tag)
Attributes:
- value: Specifies the machine-readable value.
Example:
<p>The temperature is <data value="22">22°C</data>.</p>
Use for: Associates a machine-readable value with content.
58. <canvas>(Canvas tag)
Attributes:
- width: Specifies the width of the canvas.
- height: Specifies the height of the canvas.
Example:
<canvas width="200" height="200"></canvas>
Use for: Provides a drawable region for graphics, such as for games or dynamic graphics.
59. <template>(Template tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<template id="my-template">
<p>This is a template.</p>
</template>
Use for: Defines a template that can be instantiated later using JavaScript.
60. <slot>(Slot tag)
Attributes:
- name: Specifies the name of the slot.
Example:
<my-element>
<span slot="header">Header content</span>
</my-element>
Use for: Defines a placeholder in a Web Component where content can be inserted.
61. <kbd>(Keyboard tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
Use for: Represents user input that is to be entered via a keyboard.
62. <samp>(Sample tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>Command output: <samp>Not found</samp></p>
Use for: Represents sample output from a computer program.
63. <var>(Variable tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>The area of the circle is <var>πr²</var>.</p>
Use for: Represents a variable in a mathematical expression or programming context.
64. <dfn>(Definition tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<p>The <dfn>HTML</dfn> standard is used to structure web content.</p>
Use for: Represents the defining instance of a term.
65. <abbr>(Abbreviation tag)
Attributes:
- title: Provides the full form of the abbreviation or acronym.
Example:
<p>The <abbr title="Hypertext Markup Language">HTML</abbr> language is used for web development.</p>
Use for: Represents an abbreviation or acronym.
66. <label>(Label tag)
Attributes:
- for: Specifies which form element the label is associated with.
Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Use for: Defines a label for an <input>element.
67. <output>(Output tag)
Attributes:
- for: Specifies which form elements the output is associated with.
- name: Specifies the name of the output element.
Example:
<form>
<input type="range" id="volume" value="50" max="100">
<output for="volume" id="volumeOutput">50</output>
</form>
Use for: Represents the result of a calculation or user action.
68. <picture>(Picture tag)
Attributes:
- class: Specifies one or more class names for the element.
- id: Specifies a unique id for the element.
Example:
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-small.jpg" media="(max-width: 799px)">
<img src="image.jpg" alt="Responsive image">
</picture>
Use for: Provides multiple <source>elements for responsive images.
69. <track>(Track tag)
Attributes:
- kind: Specifies the kind of text track (e.g., subtitles, captions, Use fors).
- src: Specifies the URL of the track file.
- srclang: Specifies the language of the track.
- label: Provides a user-readable title for the track.
Example:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" src="subs_en.vtt" srclang="en" label="English">
<track kind="subtitles" src="subs_es.vtt" srclang="es" label="Spanish">
</video>
Use for: Provides text tracks for <video>and <audio>elements, such as subtitles.
70. <style>(Style tag)
Attributes:
- type: Specifies the MIME type (typically text/css).
Example:
<style>
body { background-color: lightblue; }
</style>
Use for: Defines CSS styles for a document.
71. <script>(Script tag)
Attributes:
- src: Specifies the URL of an external script.
- type: Specifies the MIME type of the script (e.g., text/javascript).
- async: Specifies that the script should be executed asynchronously.
- defer: Specifies that the script should be executed after the document has been parsed.
Example:
<script src="script.js" type="text/javascript" defer></script>
Use for: Defines client-side scripts, such as JavaScript.
72. <base>(Base tag)
Attributes:
- href: Specifies the base URL for relative URLs.
- target: Specifies the default target for all hyperlinks and forms.
Example:
<base href="https://www.example.com/" target="_blank">
Use for: Specifies a base URL for all relative URLs in a document.
73. <textarea>(Textarea tag)
Attributes:
- name: Specifies the name of the textarea.
- rows: Specifies the number of visible rows.
- cols: Specifies the number of visible columns.
- placeholder: Provides a hint about what to enter in the textarea.
Example:
<textarea name="message" rows="4" cols="50" placeholder="Enter your message here"></textarea>
Use for: Defines a multi-line text input control.
74. <select>(Select tag)
Attributes:
- name: Specifies the name of the select element
- multiple: Allows multiple selections.
- size: Specifies the number of visible options.
Example:
<select name="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Use for: Defines a dropdown list.
75. <output>(Output tag)
Attributes:
- for: Specifies which form elements the output is associated with.
- name: Specifies the name of the output element.
Example:
<form>
<input type="range" id="volume" value="50" max="100">
<output for="volume" id="volumeOutput">50</output>
</form>
Use for: Represents the result of a calculation or user action.
76. <param>(Param tag)
Attributes:
- name: Specifies the name of the parameter.
- value: Specifies the value of the parameter.
Example:
<object data="example.swf" type="application/x-shockwave-flash" width="600" height="400">
<param name="movie" value="example.swf">
<param name="quality" value="high">
</object>
Use for: Defines parameters for an <object>element.