HTML Element References and Tag Lists (Events, Attributes, Codes)

HTML (Hypertext Markup Language) is a markup language used by web browsers to interpret and create text, pictures, and other content into visual or audio web pages. The purpose of HTML tags is to structure a web page for web browsers. It can be supported by technology like Cascading Style Sheets (CSS) and programming languages like JavaScript. HTML was invented in 1980 by Tim Barners Lee. This article will provide you with a fundamental understanding of HTML and its purposes, as the title suggests. 

Meanwhile, the comprehensive HTML tags guide may help you learn more about every HTML tag from <a> to <xmp>. Each tag reference offers background information as well as examples of how to utilize the tag in question. It’s ideal for troubleshooting issues while you’re creating HTML. The root of an HTML document is represented by the <html> tag. Except for the <!DOCTYPE> tag, the <html> tag serves as a container for all other HTML elements. HTML tags can also be classified into fundamental categories such as Basic HTML Root Tags, Formatting Tags, Audio and Video Tags, Form and Input Tags, Frame Tags, Link Tags, List Tags, Table Tags, Style Tags, Meta Tags, and so on.

Listed below are the 10 HTML basic tags and their definitions.

  1. <!DOCTYPE>: <!doctype> HTML basic tag specifies the document type.
  2. <html>: <html> HTML basic tag specifies HTML document
  3. <head>: <head> HTML basic tag contains metadata/information for the document
  4. <title>: <title> HTML basic tag specifies a title for the document
  5. <body>: <body> HTML basic tag specifies the document’s body
  6. <h1> to <h6>: <h1> to <h6> HTML basic tag specifies the HTML headings
  7. <p>: <p> HTML basic tag specifies a paragraph
  8. <br>: <br> HTML basic tag inserts a single line break
  9. <hr>: <hr> HTML basic tag specifies a thematic change in the content
  10. <!–…–>: <!–…–> HTML basic tag specifies a comment
Contents of the Article show

HTML Tags by Alphabet

HTML tags are an excellent starting point for learning web development. An HTML tag is a particular keyword enclosed by sharp brackets < and >, such as: <body>. Tags nearly always come in pairs, with one at the start and one at the end. Listed below are the following HTML tags in alphabetical order and their definitions. 

  • <!–…–>: <!–…–> HTML tag specifies the comment. 
  • <!DOCTYPE> :<!DOCTYPE> HTML tag specifies the document type.
  • <a> :<a> HTML tag specifies the hyperlink.
  • <abbr> : <abbr> HTML tag specifies the abbreviation or an acronym.
  • <acronym> : <acronym> HTML tag also specifies an acronym but not supported in HTML5. Use <abbr> instead.
  • <address>: <address> HTML tag specifies the contact information for the author/owner of a document.
  • <applet>: <applet> HTML tag specifies an embedded applet but this HTML tag is not supported in HTML5. Use <embed> or <object> instead.
  • <area> : <area> HTML tag specifies  an area inside an image map.
  • <article> : <article> HTML tag specifies an article.
  • <aside>: <aside> HTML tag specifies the content aside from the page content.
  • <audio>: <audio> HTML tag specifies the embedded sound content.
  • <b>: <b> HTML tag specifies the bold text. 
  • <base> : <base> HTML tag specifies the the base URL/target for all relative URLs in a document. 
  • <basefont>: <basefont> HTML tag specifies a default color, size, and font for all text in a document but this HTML tag is not supported in HTML5. Use CSS instead.
  • <bdi>: <bdi> HTML tag isolates a part of text that might be formatted in a different direction from other text outside it.
  • <bdo>: <bdo> HTML tag overrides the current text direction.
  • <big>: <big> HTML tag specifies the big text bu this HTML tag is not supported in HTML5. Use CSS instead.
  • <blockquote> : <blockquote> HTML tag specifies a section that is quoted from another source.
  • <body>: <body> HTML tag specifies the document’s body. 
  • <br>: <br> HTML tag specifies a single line break.
  • <button>: <button> HTML tag specifies a clickable button.
  • <canvas>: <canvas> HTML tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
  • <caption>: <caption> HTML tag specifies a table caption.
  • <center>: <center> HTML tag specifies the centered text, but this HTML tag is not supported in HTML5. Use CSS instead.
  • <cite>: <cite> HTML tag specifies the title of a work.
  • <code>: <code> HTML tag specifies a piece of computer code.
  • <col>: <col> HTML tag specifies the column properties for each column within a <colgroup> element.
  • <colgroup>: <colgroup> HTML tag specifies a group of one or more columns in a table for formatting.
  • <data>: <data> HTML tag adds a machine-readable translation of a given content.
  • <datalist>: <datalist> HTML tag specifies a list of pre-defined options for input controls.
  • <dd>: <dd> HTML tag specifies the description/value of a term in a description list.
  • <del>: <del> HTML tag specifies the text that has been deleted from a document.
  • <details> : <details> HTML tag specifies the additional details that the user can view or hide
  • <dfn>: <dfn> HTML tag specifies a term that is going to be defined within the content
  • <dialog>: <dialog> HTML tag specifies the dialog box or window
  • <dir>: <dir> HTML tag specifies the  directory list, but this HTML tag is not supported in HTML5. Use <ul> instead.
  • <div>: <div> HTML tag specifies the section in a document.
  • <dl>: <dl> HTML tag specifies the description list.
  • <dt>: <dt> HTML tag specifies the term/name in a description list.
  • <em>: <em>  HTML tag specifies the emphasized text.
  • <embed>: <embed> HTML tag specifies the container for an external application.
  • <fieldset>: <fieldset> HTML tag is a groups related elements in a form.
  • <figcaption>: <figcaption> HTML tag specifies the caption for a <figure> element.
  • <figure>: <figure> HTML tag specifies the self-contained content <font> but this HTML tag is not supported in HTML5. Use CSS instead.
  • <footer>: <footer> HTML tag specifies the footer for a document or section. 
  • <form>: <form> HTML tag specifies an HTML form for user input.
  • <frame>: <frame> HTML tag specifies a window (a frame) in a frameset but this HTML tag is not supported in HTML5.
  • <frameset>: <frameset> HTML tag specifies the set of frames.
  • <h1> to <h6>: <h1> to <h6> HTML tag specifies the HTML headings.
  • <head>: <head> HTML tag contains metadata/information for the document.
  • <header>: <header> HTML tag specifies a header for a document or section.
  • <hr>: <hr> HTML tag specifies a thematic change in the content.
  • <html>: <html> HTML tag specifies the root of an HTML document.
  • <i>: This <i> tag specifies a part of text in an alternate voice or mood.
  • <iframe>: <iframe> HTML tag specifies an inline frame.
  • <img>: <img> HTML tag specifies an image.
  • <input>: <input> HTML tag specifies an input control.
  • <ins>: <ins> HTML tag specifies a text that has been inserted into a document.
  • <kbd>: <kbd> HTML tag specifies the keyboard input.
  • <label>: <label> HTML tag specifies the label for an <input> element.
  • <legend>: <legend> HTML tag specifies a caption for a <fieldset> element.
  • <li>: <li> HTML tag specifies a list item.
  • <link>: <link> HTML tag specifies the relationship between a document and an external resource (most used to link to style sheets).
  • <main>: <main> HTML tag specifies the main content of a document.
  • <map>: <map> HTML tag specifies an image map.
  • <mark>: <mark> HTML tag specifies the marked/highlighted text.
  • <meta>: <meta> HTML tag specifies the metadata about an HTML document.
  • <meter>: <meter> HTML tag specifies a scalar measurement within a known range (a gauge).
  • <nav>: <nav> HTML tag specifies the navigation links.
  • <noframes>: <noframes> HTML tag specifies an alternate content for users that do not support frames, but this HTML tag is not supported in HTML5. 
  • <noscript>: <noscript> HTML tag specifies an alternate content for users that do not support client-side scripts.
  • <object>: <object> HTML tag specifies a container for an external application.
  • <ol>: <ol> HTML tag specifies an ordered list.
  • <optgroup>: <optgroup> HTML tag specifies a group of related options in a drop-down list.
  • <option>: <option> HTML tag specifies an option in a drop-down list.
  • <output>: <output> HTML tag specifies the result of a calculation.
  • <p>: <p> HTML tag specifies a paragraph.
  • <param>: <param> HTML tag specifies a parameter for an object.
  • <picture>: <picture> HTML tag specifies a container for multiple image resources.
  • <pre>: <pre> HTML tag specifies the preformatted text.
  • <progress>: <progress> HTML tag represents the progress of a task.
  • <q>: <q> HTML tag specifies a short quotation.
  • <rp>: <rp> HTML tag specifies what to show in browsers that do not support ruby annotations.
  • <rt>: <rt> HTML tag specifies an explanation/pronunciation of characters (for East Asian typography).
  • <ruby>: <ruby> HTML tag specifies a ruby annotation (for East Asian typography).
  • <s>: <s> HTML tag specifies the text that is no longer correct.
  • <samp>: <samp> HTML tag specifies the sample output from a computer program.
  • <script>: <script> HTML tag specifies a client-side script.
  • <section>: <section> HTML tag specifies a section in a document.
  • <select>: <select> HTML tag specifies a drop-down list.
  • <small>: <small> HTML tag specifies the smaller text.
  • <source>: <source> HTML tag specifies the multiple media resources for media elements (<video> and <audio>).
  • <span>: <span> HTML tag specifies a section in a document.
  • <strike>: <strike> HTML tag specifies the strikethrough text, but this HTML tag is not supported in HTML5. Use <del> or <s> instead.
  • <strong>: <strong> HTML tag specifies the important text.
  • <style> : <style> HTML tag specifies the style information for a document.
  • <sub>: <sub> HTML tag specifies the subscripted text.
  • <summary>: <summary> HTML tag specifies the visible heading for a <details> element.
  • <sup>: <sup> HTML tag specifies the superscripted text.
  • <svg>: <svg> HTML tag specifies a container for SVG graphics.
  • <table>: <table> HTML tag specifies a table.
  • <tbody>: <tbody> HTML tag groups the body content in a table.
  • <td>: <td> HTML tag specifies a cell in a table.
  • <template>: <template> HTML tag specifies a container for content that should be hidden when the page loads.
  • <textarea>: <textarea> HTML tag specifies a multiline input control (text area).
  • <tfoot>: <tfoot> HTML tag groups the footer content in a table.
  • <th>: <th> HTML tag specifies a header cell in a table.
  • <thead>: <thead> HTML tag groups the header content in a table.
  • <time>: <time> HTML tag specifies the specific time (or datetime).
  • <title>: <title> HTML tag specifies a title for the document.
  • <tr>: <tr> HTML tag specifies a row in a table.
  • <track>: <track> HTML tag specifies the text tracks for media elements (<video> and <audio>)
  • <tt>: <tt> HTML tag specifies the teletype text but this HTML tag is not supported in HTML5. Use CSS instead.
  • <u>: <u> HTML tag specifies some text that is unarticulated and styled differently from normal text.
  • <ul>: <ul> HTML tag specifies an unordered list.
  • <var>: <var> HTML tag specifies the variable.
  • <video>: <video> HTML tag specifies the embedded video content.
  • <wbr>: <wbr> HTML tag specifies the possible line-break.

HTML Tags by Category (HTML Tag Types)

The following is a list of all HTML tags organized by category, along with descriptions of their purposes and applications.

Basic HTML Tags

Basic HTML Tags, Formatting HTML Tags, Forms and Input Tags, Frame Tags, Style, and Semantic Tags, Link Tags, Audio Video Tags, Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of basic HTML tags, together with their definitions.

  1. HTML <comment> Tag: The HTML <comment> element is used in the main code file to add comments. These comments, unlike other HTML material, are not shown in the browser. It is only available to programmers.
  2. HTML <doctype> Tag: The <Doctype> declaration is not an HTML tag; it is used to inform the browser about the HTML version used on the web page. The <Doctype> element should be the first tag in your HTML document, right before the Html beginning tag.
  3. HTML <html> Tag: The root of an HTML document is defined by the HTML <html> Tag. The HTML <html> tag serves as the primary container for all other HTML elements in an HTML document. The body and head sections are the two primary portions of an HTML document.
  4.  HTML <head> Tag: The HTML <head> Tag is used to define a web page’s metadata. Metadata is information about a web page that includes the page title, styles, scripts, character set, and so on.
  5. HTML <title> Tag: The HTML <title> Tag is used to specify the title of a web page.
  6. HTML <body> Tag:The HTML <body> Tag specifies the content of a web page or HTML document.
  7. HTML <headings> Tag (h1 to h6): HTML Heading Tags (h1 to h6) are used to define the web page’s headers or primary highlighted text. From <h1> through <h6>, there are six different levels of headings.
  8. HTML <p>Tag: The paragraph element is defined by the HTML <p> Tag.
  9. HTML <br> Tag: By inserting a single line break, the HTML <br> Tag disrupts the natural flow of material.
  10. HTML <hr> Tag: The HTML <hr> Tag defines a thematic break in an HTML Web Page. The HTML <hr> Tag signifies a shift in a content topic by showing a horizontal rule to separate two pieces of content.

Formatting HTML Tags

Formatting HTML Tags, Basic HTML Tags, Forms and Input Tags, Frame Tags, Style, and Semantic Tags, Link Tags, Audio Video Tags, Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of Formatting HTML Tags, together with their definitions.

  1. HTML <acronym> Tag: Acronym Tag is similar to abbr tag. The <acronym> tag is used to define abbreviations or acronyms such as HTML, CSS, or PHP. It is no longer used in HTML5. The <acronym> tag is replaced by the abbreviation tag.
  2. HTML <abbr> Tag: The <abbr> tag is used to define an abbreviation or acronym, such as PHP, HTML, CSS, NASA, LOL, and so on. Using the <abbr> tag to designate abbreviations can assist browsers and search engines in better understanding the material. The title attribute in the abbr tag is used to specify the abbreviation.
  3. HTML <address> Tag: The <address> tag is used to specify the author’s or owner’s contact information for a website, document, page, or article. The <address> tag is an element at the block level.
  4. HTML <b> Tag: The HTML <b> Tag specifies the bold text.
  5. HTML <bdi> Tag: The HTML <bdi> Tag is used to isolate a piece of text that is formatted in the opposite way from other parts of the text.
  6. HTML <bdo> Tag: To override the current text direction, use the HTML <bdo> Tag. BDO is an abbreviation for Bi Directional Override.
  7. HTML <big> Tag: HTML <big> Tag was used in HTML 4 to designate larger text; it is no longer used in HTML5.
  8. HTML <blockquote> Tag: The HTML <blockquote> Tag is used to define a portion that is quoted from another source, such as a web page or website.
  9. HTML <center> Tag: The HTML <center> Tag is used to center align text, although it is no longer recommended because it was deprecated in HTML5.
  10. HTML <cite> Tag: The HTML <cite> Tag is used to defining the title of a work that is someone else’s intellectual property, such as a book, a poem, a song, lyrics, a patent, or a trademark.
  11. HTML <code> Tag: HTML <code> Tag is an HTML5 tag used to define computer code within a web page or html document.
  12. HTML <del> Tag: As the name implies, the HTML <del> Tag defines the erased text. Most browsers will draw a line through the removed content contained within the del tag.
  13. HTML <dfn> Tag: The HTML <dfn> Tag provides a specific word that is defined deeper within the <dfn> Tag’s parent element. The abbreviation dfn stands for “definition.”
  14. HTML <em> Tag: The HTML <em> Tag denotes accented content or text that is significantly emphasized or stressed. <em> is an acronym for accentuated.
  15. HTML <font> Tag: The HTML <font> Tag was used to specify the font size, color, and face of the text. The HTML font tag was introduced in HTML4 and is now deprecated in HTML5.
  16. HTML <i> Tag: The HTML <i> Tag or Idiomatic Text element is used to specify a term or word that differs from the rest of the text, such as words from another language, technical terminology, or idiomatic text, and so on.
  17. HTML <ins> Tag: The HTML <ins> Tag specifies the inserted content that is added to the HTML document. The input content is normally highlighted by the browser.
  18. HTML <kbd> Tag: The HTML <kbd> Tag is used to define keyboard input, voice input, or any other type of textual input from any device. The kbd tag’s content is often displayed in monospace font.
  19. HTML <mark> Tag: The marked text is defined by the HTML <mark> Tag. Most browsers will highlight the text inside the mark tag in yellow, however, this can be changed with CSS.
  20. HTML <meter> Tag: The HTML <meter> Tag specifies a measurement scale with a particular range for measuring data inside that range. The gauge tag is another name for the HTML meter tag.
  21. HTML <pre> Tag: The HTML <pre> Tag defines preformatted content; the material contained within the pre Tag is displayed in its entirety. Line breaks and spaces are also displayed, and the text’s shape is preserved while it is displayed.
  22. HTML <progress> Tag: The HTML <progress> Tag specifies a progress bar or indicator. HTML progress Tag is a new HTML5 tag that indicates the progress of any task. With the progress tag, users may view the progress of any task.
  23. HTML <q> Tag: The HTML <q> Tag specifies the short quotations that appear within the main paragraph or section. The <q> Tag in HTML is an inline element. The Cite property is used to specify the URL of the quotation’s source.
  24. HTML <rp> Tag: The HTML <rp> Tag defines parenthesis around ruby content for browsers that do not support ruby annotations. All browser versions do not support the <rp> tag.
  25. HTML <rt> Tag: Character explanation is defined by the HTML <rt> Tag.
  26. HTML <ruby> Tag: Ruby annotation is defined using the HTML <ruby> Tag.
  27. HTML< s> Tag: The HTML <s> Tag is used to specify erroneous text.
  28. HTML <samp> Tag: The HTML <samp> Tag is used to define a computer program’s sample output.
  29. HTML <small> Tag: The HTML <small> Tag is used to define text that is smaller in size.
  30. HTML <strike> Tag: To define strike-through text, use the HTML <strike> Tag.
  31. HTML <strong> Tag: The HTML <strong> Tag is used to define critical text.
  32. HTML <sub> Tag:Subscripted text is defined using the HTML <sub> Tag.
  33. HTML <sup> Tag: To define superscripted text, use the HTML <sup> Tag.
  34. HTML <template> Tag: A template is defined using the HTML <template> Tag.
  35. HTML <time> Tag: The HTML <time> Tag is used to specify the time and date.
  36. HTML <tt> Tag: Teletype text is defined using the HTML <tt> Tag.
  37. HTML <u> Tag: The HTML <u> Tag is used to distinguish text from other text. It is highlighted.
  38. HTML <var> Tag: Variables are defined using the HTML <var> Tag.
  39. HTML <wbr> Tag: The HTML <wbr> Tag is used to specify a potential line break.

Forms and Input Tags

Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags,  Frame Tags, Style, and Semantic Tags, Link Tags, Audio Video Tags, Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of Forms and Input Tags, together with their definitions.

  1. HTML <form> Tag: The HTML form Tag defines a form element that is used to collect user input. The HTML <form> Tag includes elements such as input, choose, option, submit, button, label, textarea, fieldset, optgroup, output, and so forth.
  2. HTML <input> Tag: The HTML <input> Tag defines an input field within the form element that can accept data input from users. There are 22 different sorts of input components, all of which are used to receive user input.
  3. HTML <textarea> Tag: A text input element is defined by the HTML <textarea> Tag.
  4. HTML <button> Tag: The HTML <button> Tag is used to make a clickable button on a web page or in an HTML document.
  5. HTML <select> Tag: To define a drop down list, use the HTML <select> Tag.
  6. HTML <optgroup> Tag: Inside the choose element, the HTML <optgroup> Tag defines a group of similar alternatives. The <optgroup> tag can be used to organize several types of select tag options.
  7. HTML <option> Tag:  The HTML <option> Tag specifies the list of drop-down menu options. Inside the select tag, the HTML option tag is utilized. The user has the option of selecting one or more alternatives at a time.
  8. HTML <label> Tag: HTML <label> Tag specifies the label for HTML components such as the select tag, textarea tag, input elements such as checkboxes, text input, email, password, number, radio, search, file, and others.
  9. HTML <legend> Tag: The caption or title for the fieldset tag is defined by the HTML <legend> Tag. The <legend> tag must be the parent element’s first child.
  10. HTML <fieldset> Tag: Inside the HTML form element, the HTML <fieldset> Tag is used to join a group of elements that are related to one another. The HTML <fieldset> tag is used in conjunction with the legend tag.
  11. HTML <datalist> Tag: The HTML <datalist> Tag is used to specify predefined options or values for the input HTML Tag. The HTML <datalist> Tag has an autocomplete option for the user.
  12. HTML <output> Tag: The HTML <output> Tag is used to display the outcome of a user action or a computation performed by a client-side script, which is typically JavaScript code. A new HTML5 tag is the HTML output tag.

Frame Tags

Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags, Link Tags, Audio Video Tags, Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of Frame Tags, together with their definitions.

  1. HTML <frame> Tag: In HTML4, the HTML <frame> tag was used to define a specific area or window for other HTML web pages within one parent web page.
  2. HTML <frameset> Tag: HTML <frameset> tag was used in HTML4. HTML <frameset> tag defines a set of frames with the help of frame tag that are used to embed web pages into the main web page.
  3. HTML <iframe> Tag: The HTML <iframe> Tag denotes an inline frame. It is used to incorporate other HTML documents or third-party content, such as media files or applets, into the current web page.
  4. HTML <noframes> Tag: The HTML <noframes> Tag has been deprecated. HTML <noframes> Tag was used as a fallback tag for browsers that do not support the frame tag. Use the HTML <noframes> Tag sparingly.

Images Tags

Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags, Link Tags, Audio Video Tags, Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of Image Tags, together with their definitions.

  1. HTML <img> Tag: The HTML <img> Tag is used to embed or put images into a webpage, website, or html document. The HTML <img> tag is one of the most often used html tags.
  2. HTML <map> Tag: Image <maps> are defined using the HTML <map> Tag. Image maps are basic graphics with clickable regions in them. To specify these clickable zones, the HTML <map> Tag is combined with the area Tag.
  3. HTML <area> Tag: The <area> tag is used to define a specific area within an image map. The <area> tag is attached to a map element as a child. On an image map, the area tag defines clickable regions.
  4. HTML <canvas> Tag: The HTML <canvas> Tag is used to draw visuals using scripts, most often JavaScript scripts.
  5. HTML <figcaption> Tag: As the name implies, the HTML <figcaption> Tag defines the caption of the figure html element. Inside the figure html tag, the HTML <figcaption> tag is utilized.
  6. HTML figure Tag: The HTML <figure> Tag indicates self-contained material that does not interfere with the main flow of the web page. Images, pictures, code listings, diagrams, and other media can be included with the HTML <figure> tag.
  7. HTML <picture> Tag: To boost the responsiveness of a website, the HTML <picture> Tag defines multiple images of different sizes for the same location on a page using the source tag and the img tag.
  8. HTML <svg> Tag: The HTML <svg> Tag specifies a container for SVG graphics.

Audio/Video Tags

Audio Video Tags, Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags, Link Tags, Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of Audio Video Tags, together with their definitions.

  1. HTML <audio> Tag: HTML <audio> Tag is used to play audio files like music or audio podcasts.
  2. HTML <track> Tag: The HTML <track> Tag is used to provide the location of a media element.
  3. HTML <video> Tag: To define video content, the HTML <video> Tag is utilized.
  4. HTML <source> Tag: The <source> Tag in HTML is used to specify media resources for media components.

Link Tags 

Link Tags, Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags,  Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of Link Tags, together with their definitions.

  1. HTML <anchor> Tag: The <anchor> tag, also known as a Tag, is an HTML tag that is used to create links on a web page. It is also known as a hyperlink. The anchor tag is used to connect one page to another. It’s used to make links to other web pages, websites, or files. The href property is used in anchor tags to specify the destination of the link.
  2. HTML <link> Tag: The HTML <link> Tag is used to establish a connection between the current web page or html document and an external site. The HTML link tag is a non-existent element.
  3. HTML <nav> Tag: The HTML <nav> Tag specifies navigation links that are typically used to navigate inside the current website. These navigation links provide information on the website’s structure and content.

List Tags

List Tags, Link Tags, Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags,  Meta Tags, Programming Tags, and Table Tags are the most common types of HTML Tags. The following are the lists of List Tags, together with their definitions.

  1. HTML <ol> Tag: On a website or web page, the HTML <ol> Tag is used to define an ordered list. The ordered list element’s list style is numerical or decimal by default.
  2. HTML <ul> Tag: An unordered list is created using the HTML <ul> Tag.
  3. HTML <li> Tag: The HTML <li> Tag is used to define list or menu elements. HTML <li> Tag is widely used in conjunction with the ul, ol, and menu tags.
  4. HTML <dir> Tag: The HTML <dir> Tag was used to generate a list of directory names. HTML4 made advantage of it. HTML5 does not support it. Instead, use the HTML <ul> tag.
  5. HTML <dl> Tag: A description list is specified via the HTML <dl> Tag. The abbreviation dl stands for description list. The description list includes terms as well as their descriptions.
  6. HTML <dt> Tag: The HTML <dt> Tag specifies the name of a term within the description list. dt is an abbreviation for the descriptive terms. Inside the <dl> tag, the <dt> tag is utilized.
  7. HTML <dd> Tag: The HTML <dd> Tag is used to define a term or any name in the description list. Definition description is abbreviated as dd.

Table Tags

Table Tags, List Tags, Link Tags, Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags,  Meta Tags, and Programming Tags are the most common types of HTML Tags. The following are the lists of Table Tags, together with their definitions.

  1. HTML <table> Tag: To build HTML tables, use the HTML <table> Tag.
  2. HTML <caption> Tag: The HTML <caption> Tag is used to define the table caption within the table element.
  3. HTML <td> Tag: The HTML <td> Tag is used to define a single table cell.
  4. HTML <tr> Tag: The HTML <tr> Tag is used to define a table row.
  5. HTML <th> Tag: The HTML <th> Tag is used to define the header cell of a table.
  6. HTML <tbody> Tag: The HTML <tbody> Tag is used to specify the table’s body.
  7. HTML <tfoot> Tag: The HTML <tfoot> Tag is used to specify the table’s footer.
  8. HTML <thead> Tag: The HTML <thead> Tag is used to specify the table’s header.
  9. HTML <col> Tag: HTML <col> Tag specifies the characteristics of a specific column of a table element.
  10. HTML <colgroup> Tag: The HTML <colgroup> Tag designates a collection of one or more columns within a table element.

Style and Semantic Tags

Style and Semantic Tags, Table Tags, List Tags, Link Tags, Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags,  Meta Tags, and Programming Tags are the most common types of HTML Tags. The following are the lists of Style and Semantic Tags together with their definitions.

  1. HTML <div> Tag: The HTML <div> Tag designates a separate portion or area for the web page’s content. The acronym div stands for division, which also explains the purpose of the div tag.
  2. HTML <style> Tag: CSS code is written using the HTML <style> Tag.
  3. HTML <span> Tag: CSS code is written using the HTML <span> Tag.
  4. HTML <header> Tag: The HTML <header> Tag defines a web page’s head section or the head part of another web page. The HTML <header> tag is a semantic component of HTML5. HTML <header> tags typically include an introductory section.
  5. HTML <footer> Tag: HTML <footer> Tag is an HTML5 tag that defines the web page’s footer area. The HTML <footer> tag includes copyright information, a sitemap, important links, contact information, author information, and other information.
  6. HTML <main> Tag: The HTML <main> Tag is just a container for the most important or major information of a website or web page. On each page, utilize only one main tag.
  7. HTML <section> Tag: The HTML <section> Tag is used to specify a section in a document.
  8. HTML <article> Tag: For independent material, the HTML <article> Tag is used. HTML5 introduces the Article Tag. The <article> tag is used for material that is unrelated to the main content.
  9. HTML <aside> Tag: Aside from HTML, Aside from the primary content in which it is put, the tag describes the content. The <aside> tag’s content must be related to the main text of the HTML document.
  10. HTML <details> Tag: HTML <details> Tag defines additional details about specific term that user can read by revealing it. The user can open and close the detail widget with a single click.
  11. HTML <dialog> Tag: The HTML <dialog> Tag defines a dialog box that is by default hidden. The html dialog box is a distinct region that can function as a popup window.
  12. HTML <data> Tag: The HTML <data> Tag is used to include machine-readable information in the content, which also serves as a translation of human-readable content.
  13. HTML <summary> Tag: The HTML <summary> Tag is used to specify the heading for the details element.

Meta Tags

Meta Tags, Style and Semantic Tags, Table Tags, List Tags, Link Tags, Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, Style, and Semantic Tags, and Programming Tags are the most common types of HTML Tags. The following are the lists of Meta Tags together with their definitions.

  1. HTML <meta> Tag: The metadata of a website or web page is defined by the HTML <meta> Tag. Metadata refers to data or information about other data. In this situation, the meta element provides crucial information about the HTML document.
  2. HTML <head> Tag: The meta information about the web page is contained in the HTML <head> Tag.
  3. HTML <base> Tag: The HTML <base> Tag specifies a base URL for all links in the HTML Document or Web Page.
  4. HTML <basefont> Tag: On a Web Page, the HTML <basefont> Tag specifies the text’s default color and font size.

Programming Tags

Programming Tags, Meta Tags, Style, and Semantic Tags, Table Tags, List Tags, Link Tags, Image Tags, Frame Tags, Forms and Input Tags, Formatting HTML Tags, Basic HTML Tags, and Style, and Semantic Tags are the most common types of HTML Tags. The following are the lists of Programming Tags together with their definitions.

  1. HTML <script> Tag: The HTML <script> Tag is used to specifies the script.
  2. HTML <noscript> Tag: The HTML <noscript> Tag is used as a fallback tag for browsers that do not support the script tag. If the script tag does not operate on a browser for some reason, the HTML <noscript> Tag supplies backup content.
  3. HTML <applet> Tag: The <applet> tag is used to embed Java applets in HTML. HTML 4.01 deprecated the applet tag, which is no longer used in HTML5. Instead of the <applet> tag, the embed tag and object tag is used in HTML5.
  4. HTML <embed> Tag: The HTML <embed> Tag specifies a container for external material such as a web page, a multimedia file such as audio or video, or a plug-in application.
  5. HTML <object> Tag: A container for external content is defined by the HTML <object> Tag. A picture, a web page, or a video clip can be used as external material.
  6. HTML <param> Tag: HTML <param> Tag, as the name implies, defines the object tag’s arguments. The <param> tag is hidden by default and solely controls the functionality of the object tag via arguments.

1. HTML Tags for Document Metadata

Document Metadata HTML Tags are to contain information about the page. This comprises information about styles, scripts, and data that will assist software (search engines, browsers, and so on) in using and rendering the page. Style and script metadata can be defined on the page or linked to another file that contains the information.

Listed below are the following Metadata information that uses and renders the page. 

  • <base>: The <base> HTML element sets the starting point for all relative URLs in a document. In a document, there can only be one <base> element.
  • <head>: The HTML element <head> contains machine-readable information (metadata) about the document, such as the title, scripts, and style sheets.
  • <link>: The HTML element <link> provides associations between the current document and an external resource. This element is most typically used to link to CSS, but it is also used to create site icons (including “favicon” style icons and icons for the home screen and apps on mobile devices), among other things.
  • <meta>: Metadata that cannot be expressed by other HTML meta-related elements, such as base, link, script, style, or title, are represented using the <meta> HTML element.
  • <style>: The HTML element <style> holds style information for a document or a portion of a document. It includes CSS that is applied to the contents of the document that contains the <style> element.
  • <title>: The <title> HTML element specifies the title of the document that appears in the title bar of a browser or in the tab of a page. It consists solely of text; tags within the element are disregarded.

2. HTML Tags for Sectioning Root

HTML Tags for Sectioning Root is to the <body> HTML element represents the content of an HTML document. A document can only have one <body> element.

3. HTML Tags for Content Sectioning

HTML Tags for Content Sectioning are created to help organize the document’s information into logical pieces. Use sectioning elements to provide a broad outline for your page’s content, including header and footer navigation and heading elements to indicate content parts.

Listed below are the following elements used for the HTML Tags for Content Sectioning.

  • <address>: The HTML <address> indicates that the enclosing HTML contains contact information for a person or people, or for an organization.
  • <article>: The <article> HTML element specifies a self-contained composition in a document, page, application, or site that is meant to be distributable or reusable independently (e.g., in syndication). A forum post, a magazine or newspaper article, or a blog entry are all examples of independent content, as is a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
  • <aside>: The <aside> HTML element signifies a section of a page whose content is only tangentially related to the main topic of the text. Sidebars or call-out boxes are regularly used to present asides.
  • <footer>: The <footer> HTML element represents a footer for the sectioning content or sectioning root element that is closest to it. A <footer> often contains information about the section’s author, copyright information, or links to related papers.
  • <header>: The HTML element <header> represents introductory material, which is often a series of introductory or navigational aids. It may include certain heading elements, but it may also include a logo, a search form, the author’s name, and other features.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: The HTML elements <h1> to <h6> indicate the first six levels of section headings. The highest section level is <h1>, while the lowest is <h6>.
  • <main>: The <main> HTML element represents the primary content of a document’s body. The main content area contains content that is directly related to or expands on a document’s major topic or an application’s central feature.
  • <nav>: The <nav> HTML element denotes a portion of a page that provides navigation links, either within the current document or to other documents. Menus, tables of contents, and indexes are common examples of navigation sections.
  • <section>: The HTML element <section> represents a generic isolated portion of a page that lacks a more specialized semantic element to describe it. With very few exceptions, sections should always have a heading.

4. HTML Tags for Text Content

The HTML Tags for Text Content is used to organize content blocks or sections inserted between the opening body> and closing /body> tags. These features, which are important for accessibility and SEO, identify the purpose or organization of the material.

Listed below are the following elements used for the HTML Tags for Text Content. 

  • <blockquote>: The HTML element <blockquote> indicates that the contained content is an extended quotation. Indentation is commonly used to represent this visually. The cite attribute can be used to provide a URL for the source of the quotation, while the cite element can be used to provide a text representation of the source.
  • <dd>: In a description list, the <dd> HTML element offers a description, definition, or value for the preceding word (dt) (dl).
  • <div>: The HTML element <div> serves as a generic container for flow content. It has no influence on the text or layout until it is styled with CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
  • <dl>: A description list is represented by the HTML element <dl>. The element contains a list of term groupings (given using the <dt> element) and descriptions (provided by <dd> elements). This element is commonly used to implement a glossary or to display metadata (a list of key-value pairs).
  • <dt>: The <dt> HTML element identifies a term in a description or definition list and must be used within a dl element. It is generally followed by an <dd> element; however, numerous <dt> elements in a sequence indicate various terms, all of which are defined by the next dd element.
  • <figcaption>: The HTML element <figcaption> represents a caption or legend that describes the rest of the contents of its parent figure element.
  • <figure>: The figcaption HTML element specifies an optional caption for the <figure> HTML element, which represents self-contained content. The figure, caption, and contents are all referred to as a single entity.
  • <hr> : The <hr> HTML element signifies a thematic break between paragraph-level components, such as a scene change in a story or a topic shift inside a section.
  • <li>: The <li> HTML element is used to represent a list item. It must be contained within one of the following parent elements: an ordered list (ol), an unordered list (ul), or a menu (menu). List items are typically displayed using bullet points in menus and unordered lists. They are typically displayed in sorted lists with an increasing counter on the left, such as a number or letter.
  • <ol>: The <ol> HTML element denotes an ordered list of items, which is often shown as a numbered list.
  • <p>: A paragraph is represented by the HTML element <p>. In visual media, paragraphs are typically portrayed as blocks of text separated by blank lines and/or first-line indentation, whereas HTML paragraphs can be any structural grouping of related material, such as photos or form fields.
  • <pre>: The <pre> HTML element provides preformatted content that should be displayed exactly as it is contained in the HTML file. The text is usually displayed in a non-proportional, or “monospaced,” font. This element’s whitespace is displayed as written.
  • <ul>: The HTML element <ul> denotes an unordered list of items, which is often shown as a bulleted list.

5. HTML Tags for Text Semantics

HTML Text Semantics Tags are used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

Listed below are the following elements used for the HTML Tags for Text Semantics.

  • <a>: The href property of the <a> HTML element (or anchor element) generates a hyperlink to online pages, files, email addresses, locations inside the same page, or anything else that a URL can address.
  • <abbr>: The abbreviation or acronym is represented by the HTML element <abbr>; the optional title property might give an expansion or description for the abbreviation. If present, the title must include this entire description and nothing else.
  • <b>: The <b> HTML element is used to call the reader’s attention to the element’s contents that would otherwise be ignored. This used to be known as the Boldface element, and most browsers still render the text in boldface. However, you should not use <b> to style text; instead, use the CSS font-weight property to generate boldface text, or the strong element to signal that text is important.
  • <bdi>: The <bdi> HTML element instructs the browser’s bidirectional algorithm to treat the text contained within it independently of the surrounding content. It’s especially handy when a website inserts content dynamically and doesn’t know the directionality of the text being placed.
  • <bdo>: The <bdo> HTML element overrides the text’s existing directionality, causing the text within to be shown in a new direction.
  • <br>: The <br> HTML element inserts a line break into text (carriage-return). It is useful when composing a poem or an address where line division is important.
  • <cite>: The <cite> HTML element is used to describe a reference to a creative work that has been cited, and it must include the title of that work. According to context-appropriate citation information guidelines, the reference may be abbreviated.
  • <code>: The <code> HTML element styles its contents in a way that indicates the text is a small bit of computer code. The user agent’s default monospaced typeface is used to display the content text by default.
  • <data>: The <data> HTML element connects a piece of material to a machine-readable translation. The time element must be used if the content is time- or date-related.
  • <dfn>: The <dfn> HTML element is used to define a term within the context of a definition phrase or sentence. The definition of the term is the p element, the dt/dd pairing, or the section element that is the nearest ancestor of the <dfn>.
  • <em>: The HTML element <em> denotes text with emphasis. The <em> element can be layered, with each level of nesting denoting a higher level of emphasis.
  • <i>: The <i> HTML element signifies a section of text that is separated from the rest of the text for whatever purpose, such as idiomatic phrasing, technical terminology, or taxonomical identifiers. Historically, these have been given in italics type, which is the root of the element’s <i> nomenclature.
  • <kbd>: The <kbd> HTML element denotes textual user input from a keyboard, voice input, or any other text entry device. Although the HTML standard does not require it, the user agent by default renders the contents of an <kbd> element using its default monospace typeface.
  • <mark>: The <mark> HTML element represents material that has been marked or highlighted for reference or notation reasons due to the relevance or importance of the marked paragraph in the enclosing context.
  • <q>: The HTML element <q> specifies that the contained text is a short inline quotation. Most current browsers do this by enclosing the content in quote marks. This element is meant for brief quotations that do not require paragraph breaks; use the blockquote element for longer phrases.
  • <rp>: The <rp> HTML element is used to offer fallback parenthesis for browsers that do not enable the display of ruby annotations via the ruby element. Each opening and a closing parenthesis that wrap the <rt> element containing the annotation’s text should be enclosed by one <rp> element.
  • <rt>: The <rt> HTML element provides the ruby text component of a ruby annotation, which is used to offer East Asian typography with pronunciation, translation, or transliteration information. The <rt> element must always be enclosed by a ruby element.
  • <ruby>: The <ruby> HTML element denotes small annotations that are rendered above, below, or adjacent to the base text, and is typically used to demonstrate the pronunciation of East Asian characters. It can also be used to annotate other types of text, though this is less popular.
  • <s>: The <s> HTML element inserts a strikethrough or a line through text. To describe items that are no longer relevant or accurate, use the <s> element. When indicating document edits, however, <s> is not suitable; instead, use the del and ins elements, where appropriate.
  • <samp>: The HTML element <samp> is used to contain inline text that reflects sample (or quoted) output from a computer program. Its contents are usually displayed in the browser’s default monospaced typeface (such as Courier or Lucida Console).
  • <small>: The <small> HTML element represents side-comments and small print, such as copyright and legal material, regardless of how it is styled. It renders text within it one font size smaller by default, such as from small to x-small.
  • <span>: The <span> HTML element is a general inline container for expressing text that does not represent anything fundamentally. It can be used to group elements for style purposes (through the class or id properties) or because they have similar attribute values, such as lang. It should only be used when no alternative semantic element is available. <span> is similar to div, however, div is a block-level element, whereas span> is an inline element.
  • <strong>: The HTML element <strong> denotes that the contents are of high importance, seriousness, or urgency. Browsers usually display the contents in bold type.
  • <sub>: The <sub> HTML element defines inline content that should be shown as subscript purely for typographical purposes. Subscripts are often displayed with a lower baseline and smaller font.
  • <sup>: The <sup> HTML element defines inline text that should be shown as superscript exclusively for typographical purposes. Superscripts are typically displayed with a higher baseline and smaller font.
  • <time>: The HTML element <time> represents a specific point in time. It may have the DateTime element, which converts dates into a machine-readable format, allowing for improved search engine results or custom functionality such as reminders.
  • <u>: The <u> HTML element represents a span of inline text that should be presented in such a way that it may be identified as having a non-textual annotation. This is presented as a basic solid underlined by default, but it can be changed with CSS.
  • <var>: The HTML element <var> denotes the name of a variable in a mathematical statement or in a programming setting. It’s usually displayed in an italicized variant of the current typeface, however, this is browser-dependent.
  • <wbr>: The <wbr> HTML element denotes a word break opportunity a spot within the text where the browser may optionally break a line even if its line-breaking rules would not otherwise take a break there.

6. HTML Tags for Image and Multimedia

HTML Tags for Image and Multimedia are used to support a wide range of multimedia elements such as photos, audio, and video. 

Listed below are the following elements used for the HTML Tags for Image and Multimedia.

  • <area>: The HTML element <area> defines an area within an image map that contains predetermined clickable areas. Geometric areas on an image can be correlated with Hyperlinks using an image map.
  • <audio>: The HTML element <audio> is used to embed sound material in documents. It may have one or more audio sources, which are represented by the src property or the source element: the browser will select the best one. Using a MediaStream can also be the destination for streaming media.
  • <img>: The HTML element <img> inserts an image into the content.
  • <map>: The HTML element <map> is used in conjunction with area elements to define an image map (a clickable link area).
  • <track>: The <track> HTML element is a child of the audio and video media components. It allows you to set timed text tracks (or time-based data), for example, to handle subtitles automatically. WebVTT (Web Video Text Tracks) format (.vtt files) is used for the tracks.
  • <video>: The <video> HTML element inserts into the content a media player that allows video playback. Although <video> can be used for audio material, the audio element may give a more acceptable user experience.

7. HTML Tags for Embedded Content

HTML Tags for Embedded Content can include a range of different content, even if it is not always easy to interact with, in addition to typical multimedia content.

Listed below are the following elements used for the HTML Tags for Embedded Content.

  • <embed>: The <embed> HTML element inserts external content into the document at the specified location. An external application or another source of interactive material, such as a browser plug-in, provides this content.
  • <iframe>: The HTML element <iframe> denotes a nested browsing environment that embeds another HTML page within the current one.
  • <object>: The HTML element <object> denotes an external resource, which can be an image, a nested browsing environment, or a resource to be handled by a plugin.
  • <param>: The HTML element <param> specifies parameters for an object element.
  • <picture>: To provide alternate versions of an image for different display/device settings, the <picture> HTML element has zero or more source elements and one img element.
  • <portal>: The <portal> HTML element allows the embedding of another HTML page within the current one, allowing for easier navigating into new pages.
  • <source>: The HTML element <source> specifies various media resources for the picture, audio, or video elements. It is an empty element, which means it has no content and no closing tag. It is widely used to provide the same media material in several file formats in order to enable compatibility with a wide range of browsers due to their varying support for image and media file formats.

8. HTML Tags for SVG and MathML

HTML Tags for SVG and MathML embed content directly into HTML documents, using the <svg> and <math> elements.

Listed below are the following elements used for the HTML Tags for SVG and MathML.

  • <svg>: The <svg> element acts as a container for a new coordinate system and viewport. It is typically used as the outermost element in SVG documents, but it can also be used to embed an SVG fragment within another SVG or HTML page.
  • <math>: MathML’s top-level element is <math>. Every MathML instance that is valid must be enclosed in math> tags. Furthermore, you must not nest a second math> element inside another, but it may include an arbitrary number of additional child elements.

9. HTML Tags for Scripting

To build dynamic content and Web applications, HTML Tags for Scripting facilitates the usage of scripting languages, most notably JavaScript. Certain elements contribute to this capability.

Listed below are the following elements used for the HTML Tags for Scripting. 

  • <canvas>: To draw visuals and animations, use the HTML <canvas> element in conjunction with either the canvas scripting API or the WebGL API.
  • <noscript>: The <noscript> HTML element specifies a chunk of HTML that will be inserted if a script type on the page is not supported or if scripting is currently disabled in the browser.
  • <script>: The <script> HTML element is used to include executable code or data; it is commonly used to include or refer to JavaScript code. Other languages, such as WebGL’s GLSL shader programming language and JSON, can also be utilized with the <script> element.

10. HTML Tags for Demarcating Edits

HTML Tags for Demarcating Edits are used to indicate which parts of the text have been changed.

Listed below are the following elements used for the HTML Tags for Demarcating Edits. 

  • <del>: The HTML element <del> signifies a section of text that has been removed from a document. This can be used, for example, for rendering “track changes” or source code diff information. The ins element can also be used to signify text that has been added to the document.
  • <ins>: The HTML element <ins> signifies a section of text that has been added to a document. Similarly, the del element can be used to represent a span of text that has been removed from the document.

11. HTML Tags for Table Content

HTML Tags for Table Content are used to produce and manage tabular data.

Listed below are the following elements used for the HTML Tags for Table Content. 

  • <caption>: The <caption> HTML element specifies a table’s caption (or title).
  • <col>: The HTML element <col> establishes a column within a table and is used to define common semantics for all shared cells. It is most commonly found within a colgroup element.
  • <colgroup>: The HTML element <colgroup> defines a group of columns within a table.
  • <table>: The <table> HTML element represents tabular data, which is information shown in a two-dimensional table made up of rows and columns of data-filled cells.
  • <tbody>: The <tbody> HTML element wraps a collection of table rows (tr elements), indicating that they form the table’s body (table).
  • <td>: The HTML element <td> defines a table cell that includes data. It takes part in the table model.
  • <tfoot>: The <tfoot> HTML element defines a series of rows that summarize the table’s columns.
  • <th>: The HTML element <th> specifies a cell as the header of a set of table cells. The scope and header attribute specify the exact nature of this group.
  • <thead>: The <thead> HTML element creates a series of rows that determine the table’s column heads.
  • <tr>: The HTML element <tr> represents a row of cells in a table. The cells of the row can then be created by combining <td> (data cell) and <th> (header cell) elements.

12. HTML Tags for Forms

HTML Tags for Forms is a set of elements that may be combined to build forms that users can fill out and submit to a website or application. The HTML forms guide contains a wealth of further information on this topic.

Listed below are the following elements used for the HTML Tags for Forms. 

  • <button>: The HTML element <button> depicts a clickable button that can be used to submit forms or elsewhere in a document for standard button functionality.
  • <datalist>: The HTML element <datalist> comprises a group of option elements that reflect the permissible or suggested options available for selection within other controls.
  • <fieldset>: Within a web form, the <fieldset> HTML element is used to organize many controls as well as labels (label).
  • <form>: The HTML element <form> specifies a portion of a document that contains interactive controls for submitting information.
  • <input>: The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; depending on the device and user agent, a broad number of sorts of input data and control widgets are accessible. Because of the sheer amount of input type and attribute combinations, the <input> element is one of the most powerful and complex in all of HTML.
  • <label>: The HTML element <label> represents a caption for a user interface object.
  • <legend>: The HTML element <legend> serves as a caption for the content of its parent fieldset.
  • <meter>: The HTML element <meter> represents a scalar value within a defined range or a fractional value.
  • <optgroup>: The HTML element <optgroup> establishes a grouping of choices within a choose element.
  • <option>: The HTML element <option> is used to define an item within a select, optgroup, or datalist element. As a result, <option> can be used to represent menu items in popups and other lists of things in HTML text.
  • <output>: The HTML element <output> is a container element into which a website or app can insert the results of a calculation or the consequence of a user action.
  • <progress>: The <progress> HTML element shows an indicator of a task’s completion progress, which is generally shown as a progress bar.
  • <select>: The HTML element <select> represents a control that displays a menu of options.
  • <textarea>: The HTML element <textarea> indicates a multi-line plain-text editing control, which is handy when you want to allow users to submit a large quantity of free-form text, such as a comment on a review or feedback form.

13. HTML Tags for Interactive Elements

HTML Tags for Interactive Elements is a collection of elements that assist in the creation of interactive user interface items.

Listed below are the following elements used for the HTML Tags for Interactive Elements.

  • <details>: The HTML element <details> produces a disclosure widget in which information is shown only when the widget is toggled to the “open” state. Using the summary element, you must supply a summary or label.
  • <dialog>: A dialog box or other interactive components, such as a dismissible alert, inspector, or subwindow, is represented by the HTML element <dialog>.
  • <menu>: The HTML element <menu> is a semantic alternative to ul. It is an unordered list of things (represented by <li> elements), each of which is a link or other command that the user can activate.
  • <summary>: The <summary> HTML element specifies a summary, caption, or legend for the disclosure box of a details element. By clicking the <summary> element, you can alter the state of the parent <details> element between open and closed.

14. HTML Tags for Web Components

Listed below are the following elements used for the HTML Tags for Web Components.

  • <slot>: The <slot> HTML element, which is part of the Web Components technology suite, is a placeholder within a web component that you can fill with your own markup to create different DOM trees and present them together.
  • <template>: The HTML element <template> is a technique for storing HTML that will not be rendered immediately when a page is loaded but can be constructed later during runtime using JavaScript.

15. Obsolete and Deprecated HTML Tags

These are old HTML elements that have been deprecated and should not be used. You should never use them in new projects and should replace them as quickly as possible in existing ones. They are just listed here for completeness’ sake.

Listed below are the following elements used for the HTML Tags for obsolete and deprecated elements.

  • <acronym>: The HTML element <acronym> allows authors to explicitly define a series of letters that make up an acronym or abbreviation for a word.
  • <applet>: The deprecated HTML Applet Element (<applet>) embeds a Java applet into the document; it has been replaced by the object.
  • <basefont>: The HTML element <basefont> has been deprecated. It specifies the default font face, size, and color for all items descendant from its parent element. Using the font element, the font size can then be changed relative to the base size.
  • <bgsound>: The HTML element <bgsound> has been deprecated. It plays a music file in the background while the page is being used; use audio instead.
  • <big>: The deprecated HTML element <big> renders the enclosed text with a font size one level larger than the surrounding text (medium becomes large, for example). The size is limited to the browser’s maximum font size.
  • <blink>: The HTML element <blink> is a non-standard element that causes the enclosing text to flash slowly.
  • <center>: The <center> HTML element is a block-level element that displays its block-level or inline content horizontally centered within its containing element. The container is usually, but not always, the body.
  • <content>: The <content> HTML element—an obsolete part of the Web Components suite of technologies—was used as an insertion point inside Shadow DOM and was not intended to be used in regular HTML. It has now been superseded by the slot element, which produces a DOM point where a shadow DOM can be put.
  • <dir>: The <dir> HTML element is used as a container for a directory of files and/or folders, with the user agent potentially applying styles and icons. Do not use this deprecated element; instead, use the <ul> element for lists, including file lists.
  • <font>: The <font> HTML element specifies the font size, color, and face for the content it contains.
  • <frame>: The HTML element <frame> defines a specific region in which another HTML page can be shown. Within a frameset, a frame should be used.
  • <frameset>: The HTML element <frameset> is used to contain frame elements.
  • <hgroup>: The HTML element <hgroup> represents a multi-level heading for a document section. It categorizes a set of <h1>–<h6> elements.
  • <image>: The <image> HTML element is an ancient and underutilized predecessor to the img element. It should not be employed.
  • <keygen>: The <keygen> HTML element exists to make the key material generation and submission of the public key as part of an HTML form easier. This technique is intended to be used in conjunction with Web-based certificate management systems. The keygen> element is meant to be used in an HTML form together with other information needed to generate a certificate request, and the procedure will result in a signed certificate.
  • <marquee>: The <marquee> HTML element is used to create a text scrolling area. Using the text’s characteristics, you may determine what occurs when it reaches the edges of its content region.
  • <menuitem>: The HTML element <menuitem> specifies a command that a user can access via a popup menu. This includes context menus as well as menus associated with a menu button.
  • <nobr>: The <nobr> HTML element prevents text from automatically wrapping across multiple lines, potentially forcing the user to scroll horizontally to read the whole width of the text.
  • <noembed>: The <noembed> HTML element is a deprecated, non-standard method of providing alternate, or “fallback,” content for browsers that do not support the embed element or the type of embedded material an author desires to use. In HTML 4.01 and later, this element was deprecated in favor of inserting fallback content between the opening and closing tags of an object element.
  • <noframes>: The HTML element <noframes> allows content to be displayed in browsers that do not support (or have disabled support for) the frame element. Although the majority of popularly used browsers support frames, there are notable outliers, such as special-purpose browsers, such as some mobile devices, and text-mode browsers.
  • <plaintext>: The <plaintext> HTML element displays everything after the start tag as raw text, disregarding any subsequent HTML. Because everything after it is considered raw text, there is no closing tag.
  • <rb>: The <rb> HTML element is used to delimit the base text component of a ruby annotation, which is the text being annotated. Each individual atomic chunk of the base text should be wrapped in one <rb> element.
  • <rtc>: The <rtc> HTML element accepts semantic annotations of characters displayed in ruby of <rb> elements used within a ruby element. Both pronunciation (rt) and semantic (rtc) annotations can be applied to <rb> items.
  • <shadow>: The <shadow> HTML element, which is now deprecated as part of the Web Components technology suite, was designed to be used as a shadow DOM insertion point. If you’ve generated several shadow roots under a shadow host, you’ve probably utilized them. It has no application in standard HTML.
  • <spacer>: The <spacer> HTML element is a deprecated HTML element that permits the insertion of blank spaces on pages. Netscape created it to achieve the same effect as a single-pixel layout image, which was used by web designers to add white spaces to websites without actually utilizing an image. However, the <spacer> element is no longer supported by any major browser, and the same effects can now be done with basic CSS.
  • <strike>: The HTML element <strike> inserts a strikethrough (horizontal line) over text.
  • <tt>: The HTML element <tt> generates inline text that is displayed using the user agent’s default monospace font face. This element was designed to render text as it would appear on a fixed-width display, such as a teletype, text-only screen, or line printer.
  • <xmp>: The <xmp> HTML element produces text between the start and end tags using a monospaced font and without interpreting the HTML in between. According to the HTML2 specification, it should be shown broad enough to allow for 80 characters per line.

HTML Attributes

Elements in HTML have attributes, which are additional values that set or adjust the elements’ behavior in various ways to fulfill the criteria that the users require. In addition to the attributes given in the table below, the GlobalEventHandlers article has a list of global event handlers, such as onclick, that can be provided as content attributes on all components.

Attribute NameElementsDescription
accept<form>, <input>A list of the types that the server accepts, usually a file type.
accept-charset<form>List of charsets that are supported.
accesskeyGlobal attributeTo activate or add attention to the element, use the keyboard shortcut.
action<form>The Uniform Resource Identifier (URI) of software that processes the information given via the form.
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr>Specifies the element’s horizontal alignment.
allow<iframe>This property specifies the iframe’s feature policy.
alt<applet>, <area>, <img>, <input>In the event that a picture cannot be displayed, alternative text will be presented.
async<script>Dynamically executes the script.
autocapitalizeGlobal attributeSets whether the user-entered text is automatically capitalized.
autocomplete<form>, <input>, <select>, <textarea>Indicates whether the browser can automatically finish the values of controls in this form by default.
autofocus<button>, <input>, <keygen>, <select>, <textarea>After the website loads, the element should be automatically focused.
autoplay<audio>, <video>The audio or video should begin playing immediately.
background<body>, <table>, <td>, <th>Indicates the location of an image file via its URL.
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>The element’s background color.
border<img>, <object>, <table>The width of the border.
capture<input>According to the Media Capture specification, a new file may be captured.
challenge<keygen>A challenge string is included with the public key when it is submitted.
charset<meta>, <script>Declares the page or script’s character encoding.
checked<command>, <input>Indicates whether or not to check the element on page load.
cite<blockquote>, <del>, <ins>, <q>Contains a URI indicating the source of the quotation or modification.
classGlobal attributeUsually used in conjunction with CSS to style items that share similar attributes.
code<applet>Indicates the location of the applet’s class file, which must be loaded and executed.
codebase<applet>This element specifies the absolute or relative path to the directory containing the.class files for the applets referenced by the code attribute.
color<basefont>, <font>, <hr>This attribute changes the color of the text by specifying a named color or a color in the hexadecimal #RRGGBB format.
cols<textarea>This property specifies the number of columns in a textarea.
colspan<td>, <th>Colspan specifies how many columns a cell should span.
content<meta>Depending on the context, a value associated with http-equiv or name.
contenteditableGlobal attributeIndicates whether or not the content of the element is editable.
contextmenuGlobal attributeThis property specifies the ID of a <menu> element that will act as the element’s context menu.
controls<audio>, <video>Indicates whether or not the browser should show the user playback controls.
coords<area>A collection of values defining the hot-spot region’s coordinates.
crossorigin<audio>, <img>, <link>, <script>, <video>The manner in which the element responds to cross-origin requests
csp <iframe>Specifies the Content Security Policy that an embedded document must accept and agree to enforce.
data<object>The URL of the resource is specified.
data-*Global attributeAllows you to add custom attributes to HTML elements.
datetime<del>, <ins>, <time>Indicates the element’s associated date and time.
decoding<img>This value indicates the chosen method for decoding the image.
default<track>Unless the user’s choices say otherwise, indicates that the track should be activated.
defer<script>This specifies that the script should be run after the page has been processed.
dirGlobal attributeThis property specifies the text’s orientation. The only valid values are ltr (Left-To-Right) and rtl (Right-To-Left) (Right-To-Left)
dirname<input>, <textarea>
disabled<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>Indicates whether the element may be interacted with by the user.
download<a>, <area>Indicates that the link should be used to download a resource.
draggableGlobal attributeDetermines whether or not the element may be dragged.
enctype<form>When the method is POST, this property specifies the content type of the form data.
enterkeyhint <textarea>, contenteditableOn virtual keyboards, the enterkeyhint specifies the action label (or icon) to display for the enter key. The attribute can be utilized with form controls (for example, the value of textarea elements) or in modifying host components (e.g., using contenteditable attribute).
for<label>, <output>Describes the elements that belong to this one.
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>Indicates the form that is the element’s owner.
formaction<input>, <button>Indicates the element’s action, which takes precedence over the action defined in the <form>.
formenctype<button>, <input>This element specifies the encoding type to be used during form submission if the button/input is a submit button (type=”submit”). This attribute overrides the enctype attribute of the button’s form owner if it is given.
formmethod<button>, <input>This attribute specifies the submission method to be used during form submission if the button/input is a submit button (type=”submit”) (GET, POST, etc.). If this attribute is given, it overrides the button’s form owner’s method attribute.
formnovalidate<button>, <input>If the button/input is a submit button (type=”submit”), this boolean property indicates that the form should not be verified when submitted. If this attribute is given, it overrides the button’s form owner’s novalidate attribute.
formtarget<button>, <input>This feature provides the browsing context (for example, tab, window, or inline frame) in which to display the response obtained after submitting the form if the button/input is a submit button (type=”submit”). If this attribute is given, it overrides the button’s form owner’s target attribute.
headers<td>, <th>The IDs of the <th> elements that apply to this element.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>This property specifies the height of the components described here. Use the CSS height attribute for all other items.
hiddenGlobal attributePrevents the rendering of a particular element while keeping child elements alive, such as script elements.
high<meter>The lower bound of the upper range is indicated.
href<a>, <area>, <base>, <link>A linked resource’s URL.
hreflang<a>, <area>, <link>The language of the referenced resource is specified.
http-equiv<meta>A pragma directive is defined here.
icon<command>Specifies an image to represent the command.
idGlobal attributeCSS is frequently used to style a specific element. This attribute’s value must be unique.
importance <iframe>, <img>, <link>, <script>Indicates the resource’s relative fetch priority.
integrity<link>, <script>Specifies a Subresource Integrity value that allows browsers to validate the content of the subresource.
intrinsicsize<img>This attribute instructs the browser to ignore the image’s inherent size and pretend it is the size supplied in the attribute.
inputmode<textarea>, contenteditableProvides an indication of the type of data that the user may enter while changing the element or its contents. The attribute can be utilized with form controls (for example, the value of textarea elements) or in modifying host components (e.g., using contenteditable attribute).
ismap<img>This value indicates that the image is part of a server-side image map.
itempropGlobal attribute
keytype<keygen>This parameter specifies the type of key that is created.
kind<track>This parameter specifies the type of text track.
label<optgroup>, <option>, <track>Specifies the element’s user-readable title.
langGlobal attributeThe language used in the element is defined here.
language <script>The script language used in the element is defined here.
loading <img>, <iframe>Indicates whether the element should be loaded slowly (loading=”lazy”) or quickly (loading=”eager”).
list
<input>Determines a set of pre-defined options to recommend to the user.
loop<audio>, <bgsound>, <marquee>, <video>When the media is finished, this option specifies whether it should begin playing from the beginning.
low<meter>The upper bound of the lower range is indicated.
manifest <html>Specifies the URL of the cache manifest for the document.
max<input>, <meter>, <progress>This value is the maximum value that can be used.
maxlength<input>, <textarea>The maximum number of characters that can be used in the element.
minlength<input>, <textarea>The minimum number of characters that can be used in the element.
media<a>, <area>, <link>, <source>, <style>Indicates a suggestion of the media for which the linked resource was created.
method<form>When submitting the form, this property specifies which HTTP method to utilize. It is possible to use GET (the default) or POST.
min<input>, <meter>Indicates the smallest value that can be used.
multiple<input>, <select>Indicates whether numerous values can be entered in an email or file input.
muted<audio>, <video>Indicates whether the audio will be hushed at first when the page loads.
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>The element’s name. For example, the server may utilize this to identify the fields in form submissions.
novalidate<form>This attribute indicates that when the form is submitted, it should not be validated.
open<details>, <dialog>Indicates whether the contents are displayed at the moment (in the case of a details> element) or whether the dialog is active and can be interacted with (in the case of a dialog> element).
optimum<meter>Indicates the best numerical value.
pattern<input>Defines a regular expression that will be used to validate the element’s value.
ping<a>, <area>The ping element defines a list of URLs that will be informed whenever a user clicks on the hyperlink.
placeholder<input>, <textarea>Gives the user a suggestion as to what can be entered in the field.
poster<video>A URL identifying a poster frame that will be displayed till the user plays or seeks.
preload<audio>, <video>Indicates whether the entire resource should be preloaded, sections of it, or nothing at all.
radiogroup<command>
readonly<input>, <textarea>Indicates whether the element is editable.
referrerpolicy<a>, <area>, <iframe>, <img>, <link>, <script>Specifies which referrer is sent when the resource is retrieved.
rel<a>, <area>, <link>Specifies the target object’s relationship to the link object.
required<input>, <select>, <textarea>Indicates whether this element must be filled out or not.
reversed<ol>Indicates whether the list should be displayed in descending or ascending order.
rows<textarea>The number of rows in a text area is specified.
rowspan<td>, <th>The amount of rows that a table cell should span.
sandbox<iframe>Prevents an iframe-loaded document from utilising certain functionalities (such as submitting forms or opening new windows).
scope<th>Defines the cells to which the header test (described in the th element) applies.
scoped <style>
selected<option>Defines a value that will be selected when the page loads.
shape<a>, <area>
size<input>, <select>The width of the element is defined by this property (in pixels). It is the number of characters if the element’s type property is text or password.
sizes<link>, <img>, <source>
slotGlobal attributeAn element is given a slot in a shadow DOM shadow tree.
span<col>, <colgroup>
spellcheckGlobal attributeIndicates whether or not spell checking is permitted for the element.
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>The embeddable content’s URL.
srcdoc<iframe>
srclang<track>
srcset<img>, <source>One or more candidates for responsive images.
start<ol>If not 1, defines the first number.
step<input>
styleGlobal attributeDefines CSS styles that will override previously defined styles.
summary<table>
tabindexGlobal attributeOverrides the browser’s default tab arrangement and instead uses the one supplied.
target<a>, <area>, <base>, <form>Specifies where the linked page should be opened (in the case of an <a> element) or where the response should be shown (in the case of a <form> element).
titleGlobal attributeWhen hovering over an element, text will be presented in a tooltip.
translateGlobal attributeSpecify whether or not an element’s attribute values and the values of its Text node children should be translated when the page is localized.
type<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>, <link>Defines the element’s type.
usemap<img>, <input>, <object>
value<button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param>Defines the default value that will be displayed in the element when the page is loaded.
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>This determines the width of the components listed here.
wrap<textarea>If the text should be wrapped, this parameter specifies whether it should be wrapped.

HTML Events

HTML allows events to initiate browser actions, such as running JavaScript when a user clicks on an element. The global event attributes listed below can be added to HTML elements to define event actions.

Window Event Attributes

Events that are triggered for the window object (this relates to the <body> tag)

AttributeValueDescription
onafterprintscriptScript to be executed when the document has been printed
onbeforeprintscriptScript should be executed prior to printing the document
onbeforeunloadscriptScript that will be executed when the document is about to be unloaded.
onerrorscriptWhen an error occurs, run this script.
onhashchangescriptWhen the anchor part of a URL changes, this script is called.
onloadscriptAfter the page has finished loading, this event occurs.
onmessagescriptWhen the message is triggered, the script is executed.
onofflinescriptWhen the browser is offline, this script is executed.
ononlinescriptScript to be executed when the browser first connects to the internet.
onpagehidescriptWhen a user navigates away from a page, a script is executed.
onpageshowscriptWhen a user navigates to a page, a script is executed.
onpopstatescriptWhen the history of the window changes, this script will be executed.
onresizescriptWhen the browser window is resized, this event occurs.
onstoragescriptWhen a Web Storage area is modified, a script is executed.
onunloadscriptWhen a page has been unloaded, this event is triggered (or the browser window has been closed)

Form Events

Events triggered by actions within an HTML form (this applies to virtually all HTML elements, but it is most commonly utilized in form elements).

AttributeValueDescription
onblurscriptWhen the element loses attention, this function is triggered.
onchangescriptWhen the element’s value is modified, this event occurs.
oncontextmenuscriptWhen a context menu is triggered, this script is executed.
onfocusscriptWhen the element is focused, this event is triggered.
oninputscriptWhen an element receives user input, a script is executed.
oninvalidscriptWhen an element is invalid, a script is executed.
onresetscriptFires when the Reset button in a form is clicked
onsearchscriptWhen the user writes, this event occurs.
onselectscriptThis event occurs after some text in an element has been selected.
onsubmitscriptWhen a form is submitted, this event is triggered.

Keyboard Events

AttributeValueDescription
onkeydownscriptWhen a user presses a key, this event occurs.
onkeypressscriptWhen a user hits a key, this event occurs.
onkeyupscriptWhen a user releases a key, this event occurs.

Mouse Events

AttributeValueDescription
onclickscriptWhen the element is clicked with the mouse, this event is triggered.
ondblclickscriptFires when the element is double-clicked with the mouse.
onmousedownscriptWhen a mouse button is pressed on an element, this event occurs.
onmousemovescriptWhen the device moves while over an element, this event is triggered.
onmouseoutscriptWhen the mouse cursor leaves an element, this event is triggered.
onmouseoverscriptWhen the mouse pointer passes over an element, this event is triggered.
onmouseupscriptWhen a mouse button is released over an element, this event occurs.
onmousewheelscriptDeprecated. Instead, use the onwheel attribute.
onwheelscriptWhen the mouse wheel moves up or down over an element, this event is triggered.

HTML Colors

Drag Events

AttributeValueDescription
ondrag scriptscriptWhen an element is dragged, a script is executed.
ondragendscriptScript to be executed after the conclusion of a drag operation
ondragenterscriptWhen an element is dragged to a proper drop target, this script is executed.
ondragleavescriptWhen an element exits a valid drop target, this script is executed.
ondragoverscriptWhen an element is dragged over a valid drop target, this script is executed.
ondragstartscriptScript that will be executed at the start of a drag operation.
ondrop scriptscriptWhen a dragged element is dropped, a script is executed.
onscrollscriptWhen an element’s scrollbar is scrolled, this script is executed.

Clipboard Events

AttributeValueDescription
oncopyscriptWhen the user copies the content of a scrolling element, this event occurs.
oncutscriptWhen a user cuts the content of an element, this event occurs.
onpastescriptWhen a user pastes material into an element, this event occurs.

Media Events

Events caused by media such as videos, photos, and audio (applies to all HTML elements, but is particularly common in media elements such as audio>, embed>, img>, object>, and video>).

AttributeValueDescription
onabortscriptScript to be executed in the event of an abort
oncanplayscriptWhen a file is ready to play, a script is executed (when it has buffered enough to begin)
oncanplaythroughscriptWhen a file can be played all the way through without halting for buffering, this script is executed.
oncuechangescriptScript to be executed when the cue in a <track> element changes.
ondurationchangescriptScript that will be executed when the length of the media changes.
onemptiedscriptWhen anything catastrophic happens and the file becomes abruptly unavailable, this script should be run (like unexpected disconnects)
onendedscriptWhen the media has reached its conclusion, the script will be executed (a useful event for messages like “thanks for listening”)
onerrorscriptScript to be executed if an error occurs while loading the file.
onloadeddatascriptWhen media data is loaded, a script is executed.
onloadedmetadatascriptWhen meta data (such as dimensions and duration) are loaded, this script is executed.
onloadstartscriptBefore anything is loaded, run this script just as the file begins to load.
onpausescriptScript to be executed when the media is paused, either manually or programmatically.
onplayscriptWhen the media is ready to play, run this script.
onplayingscriptScript to be executed once the media has begun to play.
onprogressscriptScript to be executed while the browser is retrieving media data.
onratechangescriptScript that will be executed each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
onseekedscriptWhen the seeking attribute is set to false, it indicates that the seeking process has ended.
onseekingscriptWhen the seeking attribute is set to true, indicating that seeking is active, this script is executed.
onstalledscriptWhen the browser is unable to retrieve the media data for whatever reason, this script is executed.
ontimeupdatescriptWhen the playing position changes, this script will be executed (like when the user fast forwards to a different point in the media)
onvolumechangescriptScript that will be executed each time the volume is altered (includes setting the volume to “mute”)
onwaitingscriptWhen the media has been halted but is expected to resume, this script will be executed (like when the media pauses to buffer more data)

Misc Events

AttributeValueDescription
ontogglescriptWhen the user opens or closes the details> element, this event occurs.

HTML Canvas

Using scripting, the HTML <canvas> tag is used to draw visuals in real-time (usually JavaScript). The following HTML Canvas kinds are listed below. Furthermore, the properties and explanations of each HTML Canvas type are listed in the table below.

Colors, Styles, and Shadows

PropertyDescription
fillStyleThe color, gradient, or pattern used to fill the artwork is set or returned.
strokeStyleSets or returns the stroke color, gradient, or pattern.
shadowColorReturns or sets the color to be used for shadows.
shadowBlurThe blur level for shadows is set or returned.
shadowOffsetXSets or returns the horizontal distance of the shape’s shadow.
shadowOffsetYSets or returns the horizontal distance of the shape’s shadow.
MethodDescription
createLinearGradient()This function generates a linear-gradient (to use on canvas content)
createPattern()Repeats an element in the specified direction.
createRadialGradient()This function generates a radial/circular gradient (to use on canvas content)
addColorStop()Colors and stop points in a gradient object are specified.

Line Styles

PropertyDescription
lineCapSets or returns the style of a line’s end caps.
lineJoinWhen two lines intersect, this function sets or returns the type of corner that is formed.
lineWidthThe current line width is set or returned.
miterLimitThe maximum miter length is set or returned.

Rectangles

MethodDescription
rect()Makes a rectangle
fillRect()Creates a rectangle that is “filled.”
strokeRect()Creates a rectangle (no fill)
clearRect()creates a rectangle (no fill)

Paths

MethodDescription
fill()Completes the current drawing (path)
stroke()The path you’ve specified is really drawn.
beginPath()Starts a new path or resets the current path
moveTo()The route is moved to the specified position on the canvas without producing a line.
closePath()Makes a path from the current place to the starting point.
lineTo()Adds a new point to the canvas and draws a line to it from the last provided point.
clip()Clips a section from the original canvas of any shape and size.
quadraticCurveTo()This function generates a quadratic Bézier curve.
bezierCurveTo()Produces a cubic The Bézier curve
arc()Produces an arc/curve (used to create circles or parts of circles)
arcTo()Makes an arc or curve between two tangents.
isPointInPath()If the supplied location is in the current path, the return value is true; otherwise, the return value is false.

Transformations

MethodDescription
scale()Scales the current drawing up or down.
rotate()The current drawing is rotated.
translate()rotates the current drawing
transform()Replaces the drawing’s current transformation matrix.
setTransform()The current transform is reset to the identity matrix. Then transform is executed ().

Text

PropertyDescription
fontSets or returns the text content’s current font characteristics.
textAlignSets or returns the text content’s current alignment.
textBaselineThe current text baseline used when drawing text is set or returned.
MethodDescription
fillText()Text is “filled” on the canvas.
strokeText()Text is drawn on the canvas (no fill)
measureText()Returns an object with the supplied text’s width.

Image Drawing

MethodDescription
drawImage()Draws an image, a canvas, or a video onto the canvas.

Pixel Manipulation

PropertyDescription
widthReturns the width of an ImageData object
heightThe height of an ImageData object is returned.
dataReturns an object containing the image data of the supplied ImageData object.
MethodDescription
createImageData()Makes a new, empty ImageData object.
getImageData()Returns an ImageData object that duplicates the pixel data for the specified canvas rectangle.
putImageData()Returns the image data (from the provided ImageData object) to the canvas.

Compositing

PropertyDescription
globalAlphaSets or returns the drawing’s current alpha or transparency value.
globalCompositeOperationSets or returns the method by which a new image is painted over an existing image.

Other

MethodDescription
save()Saves the current context’s state
restore()Returns the path state and attributes that were previously saved.
createEvent()
getContext()
toDataURL()

HTML Doctypes

Every HTML document must begin with a <!DOCTYPE> declaration. The declaration does not contain an HTML tag. It is “information” to the browser about the type of document to expect.

The <!DOCTYPE> declaration in HTML5 is given below.

<!DOCTYPE html>

The declaration in previous texts (HTML 4 or XHTML) is more difficult because it must refer to a DTD (Document Type Definition). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML Character Sets

The HTML Character Sets wasn’t always the case. ASCII was the character encoding used for the early web.  ASCII is an abbreviation for American Common Code For Information Interchange, which is a standard data-transmission code used by smaller and less powerful computers to convey both textual data (letters, numbers, and punctuation marks) and noninput-device commands (control characters). ISO-8859-1 was later considered the standard character set from HTML 2.0 to HTML 4.01. With XML and HTML5, UTF-8 arrived and solved several character encoding issues.

HTTP Messages

An error may occur when a browser requests a service from a web server, and the server may return an error code such as “404 Not Found”. It is typical to refer to these flaws as mistakes. Error warnings in HTML. These signals, however, are known as HTTP status messages. In fact, the server always responds with a message to each request. The most commonly encountered message is 200 OK.

HTTP Methods

HTTP defines a collection of request methods that specify the desired action for a specific resource. These request methods are commonly referred to be HTTP verbs, despite the fact that they can also be nouns. Each of them implements a different semantic, but they all have the same features: A request method, for example, can be safe, idempotent, or cacheable.

The HTTP Request Methods and their meanings are listed below.

  • GET: The GET method asks for a representation of the given resource. GET requests should only fetch data.
  • HEAD: The HEAD method requests a response that is equivalent to a GET request but does not include the response body.
  • POST: The POST method sends an entity to the specified resource, which frequently results in a state change or side effects on the server.
  • PUT: The PUT method replaces the request payload with all current representations of the target resource.
  • DELETE: The DELETE method deletes the resource supplied.
  • CONNECT: The CONNECT method connects to the server identified by the destination resource.
  • OPTIONS: The OPTIONS method describes the target resource’s communication options.
  • TRACE: TRACE runs a message loop-back test along the path to the target resource.
  • PATCH: The PATCH method applies partial modifications to a resource.

HTML Country Codes

Country codes in HTML can be used in addition to the language code in the lang property. The language of the Web page is defined by the first two characters of a language code. The country is defined by the last two characters.

The following example uses English as the language and the Philippines as the country.

<html lang="en-PH">

...

</html>

HTML Language Codes

To define the language of the Web page, the HTML Language Code always includes the lang attribute inside the <html> tag. This is intended to help search engines and browsers.

<html lang="en">

...

</html>

The language in XHTML is declared inside the <html> tag as follows:

<html xmlns="http://www.holisticseo,digital/2022/xhtml" lang="en" xml:lang="en">

...

</html>
Holistic SEO
Follow SEO

Leave a Comment

HTML Element References and Tag Lists (Events, Attributes, Codes)

by Holistic SEO time to read: 70 min
0