Tags
KEYPOINTS
- There are 2 types of tags in HTML Closing and Opening
- Tag is basically instruction inside body on how the content will be treated
DEFINATION
HTML tags are essential building blocks of a web page, functioning as the keywords that instruct your web browser on how to structure, format, and present content. Most tags consist of two elements: an opening tag that signals the start of an element and a closing tag that marks its end. These tags work together to determine how different parts of the web page are displayed, ensuring that the content appears as intended across various browsers and devices.
Types of Tag
1. Opening and Closing Tags: HTML elements generally have an opening tag and a closing tag. The opening tag contains the name of the element, and the closing tag has the same name but is preceded by a forward slash ‘/’.
Example:
<p>This is a paragraph.</p>
<a href="https://www.example.com">Click here</a>
2. Self-Closing Tags: Some elements don't require a closing tag and are called self-closing tags or void elements. They are closed with a trailing slash '/'.
Example:
<img src="image.jpg" alt="An image">
<br> <!-- Line break - also a self-closing tag -->EXAMPLE OF TYPES OF HTML TAGSTag Description <!--...--> Uses for a comment <!DOCTYPE> Self Closing Tag Uses for the document type <a> Uses for a hyperlink <abbr> Uses for an abbreviation or an acronym <acronym> Not supported in HTML5. Use <abbr> instead. Uses for an acronym <address> Uses for contact information for the author/owner of a document <applet> Not supported in HTML5. Use <embed> or <object> instead.Uses for an embedded applet <area> Self Closing Tag Uses for an area inside an image map <article> Uses for an article <aside> Uses for content aside from the page content <audio> Uses for embedded sound content <b> Uses for bold text <base> Self Closing Tag Specifies the base URL/target for all relative URLs in a document <basefont> Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <bdo> Overrides the current text direction <big> Not supported in HTML5. Use CSS instead.Uses for big text <blockquote> Uses for a section that is quoted from another source <body> Uses for the document's body <br> Self Closing Tag Uses for a single line break <button> Uses for a clickable button <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <caption> Uses for a table caption <center> Not supported in HTML5. Use CSS instead.Uses for centered text <cite> Uses for the title of a work <code> Uses for a piece of computer code <col> Self Closing Tag Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting <data> Adds a machine-readable translation of a given content <datalist> Specifies a list of pre-defined options for input controls <dd> Uses for a description/value of a term in a description list <del> Uses for text that has been deleted from a document <details> Uses for additional details that the user can view or hide <dfn> Specifies a term that is going to be defined within the content <dialog> Uses for a dialog box or window <dir> Not supported in HTML5. Use <ul> instead.Uses for a directory list <div> Uses for a section in a document <dl> Uses for a description list <dt> Uses for a term/name in a description list <em> Uses for emphasized text <embed> Self Closing Tag Uses for a container for an external application <fieldset> Groups related elements in a form <figcaption> Uses for a caption for a <figure> element <figure> Specifies self-contained content <font> Not supported in HTML5. Use CSS instead.Uses for font, color, and size for text <footer> Uses for a footer for a document or section <form> Uses for an HTML form for user input <frame> Not supported in HTML5.Uses for a window (a frame) in a frameset <frameset> Not supported in HTML5.Uses for a set of frames <h1> to <h6> Uses for HTML headings <head> Contains metadata/information for the document <header> Uses for a header for a document or section <hgroup> Uses for a header and related content <hr> Self Closing Tag Uses for a thematic change in the content <html> Uses for the root of an HTML document <i> Uses for a part of text in an alternate voice or mood <iframe> Uses for an inline frame <img> Self Closing Tag Uses for an image <input> Self Closing Tag Uses for an input control <ins> Uses for a text that has been inserted into a document <kbd> Uses for keyboard input <label> Uses for a label for an <input> element <legend> Uses for a caption for a <fieldset> element <li> Uses for a list item <link> Self Closing Tag Uses for the relationship between a document and an external resource (most used to link to style sheets) <main> Specifies the main content of a document <map> Uses for an image map <mark> Uses for marked/highlighted text <menu> Uses for an unordered list <meta> Self Closing Tag Uses for metadata about an HTML document <meter> Uses for a scalar measurement within a known range (a gauge) <nav> Uses for navigation links <noframes> Not supported in HTML5.Uses for an alternate content for users that do not support frames <noscript> Uses for an alternate content for users that do not support client-side scripts <object> Uses for a container for an external application <ol> Uses for an ordered list <optgroup> Uses for a group of related options in a drop-down list <option> Uses for an option in a drop-down list <output> Uses for the result of a calculation <p> Uses for a paragraph <param> Self Closing Tag Uses for a parameter for an object <picture> Uses for a container for multiple image resources <pre> Uses for preformatted text <progress> Represents the progress of a task <q> Uses for a short quotation <rp> Uses for what to show in browsers that do not support ruby annotations <rt> Uses for an explanation/pronunciation of characters (for East Asian typography) <ruby> Uses for a ruby annotation (for East Asian typography) <s> Uses for text that is no longer correct <samp> Uses for sample output from a computer program <script> Uses for a client-side script <search> Uses for a search section <section> Uses for a section in a document <select> Uses for a drop-down list <small> Uses for smaller text <source> Self Closing Tag Uses for multiple media resources for media elements (<video> and <audio>) <span> Uses for a section in a document <strike> Not supported in HTML5. Uses for strikethrough text <strong> Uses for important text <style> Uses for style information for a document <sub> Uses for subscripted text <summary> Uses for a visible heading for a <details> element <sup> Uses for superscripted text <svg> Uses for a container for SVG graphics <table> Uses for a table <tbody> Groups the body content in a table <td> Uses for a cell in a table <template> Uses for a container for content that should be hidden when the page loads <textarea> Uses for a multiline input control (text area) <tfoot> Groups the footer content in a table <th> Uses for a header cell in a table <thead> Groups the header content in a table <time> Uses for a specific time (or datetime) <title> Uses for a title for the document <tr> Uses for a row in a table <track> Self Closing Tag Uses for text tracks for media elements (<video> and <audio>) <tt> Not supported in HTML5. Use CSS instead.Uses for teletype text <u> Uses for some text that is unarticulated and styled differently from normal text <ul> Uses for an unordered list <var> Uses for a variable <video> Uses for embedded video content <wbr> Self Closing Tag Uses for a possible line-break
| Tag | Description |
|---|---|
| <!--...--> | Uses for a comment |
| <!DOCTYPE> Self Closing Tag | Uses for the document type |
| <a> | Uses for a hyperlink |
| <abbr> | Uses for an abbreviation or an acronym |
| <acronym> | Not supported in HTML5. Use <abbr> instead. Uses for an acronym |
| <address> | Uses for contact information for the author/owner of a document |
| <applet> | Not supported in HTML5. Use <embed> or <object> instead.Uses for an embedded applet |
| <area> Self Closing Tag | Uses for an area inside an image map |
| <article> | Uses for an article |
| <aside> | Uses for content aside from the page content |
| <audio> | Uses for embedded sound content |
| <b> | Uses for bold text |
| <base> Self Closing Tag | Specifies the base URL/target for all relative URLs in a document |
| <basefont> | Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Not supported in HTML5. Use CSS instead.Uses for big text |
| <blockquote> | Uses for a section that is quoted from another source |
| <body> | Uses for the document's body |
| <br> Self Closing Tag | Uses for a single line break |
| <button> | Uses for a clickable button |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <caption> | Uses for a table caption |
| <center> | Not supported in HTML5. Use CSS instead.Uses for centered text |
| <cite> | Uses for the title of a work |
| <code> | Uses for a piece of computer code |
| <col> Self Closing Tag | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <data> | Adds a machine-readable translation of a given content |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <dd> | Uses for a description/value of a term in a description list |
| <del> | Uses for text that has been deleted from a document |
| <details> | Uses for additional details that the user can view or hide |
| <dfn> | Specifies a term that is going to be defined within the content |
| <dialog> | Uses for a dialog box or window |
| <dir> | Not supported in HTML5. Use <ul> instead.Uses for a directory list |
| <div> | Uses for a section in a document |
| <dl> | Uses for a description list |
| <dt> | Uses for a term/name in a description list |
| <em> | Uses for emphasized text |
| <embed> Self Closing Tag | Uses for a container for an external application |
| <fieldset> | Groups related elements in a form |
| <figcaption> | Uses for a caption for a <figure> element |
| <figure> | Specifies self-contained content |
| <font> | Not supported in HTML5. Use CSS instead.Uses for font, color, and size for text |
| <footer> | Uses for a footer for a document or section |
| <form> | Uses for an HTML form for user input |
| <frame> | Not supported in HTML5.Uses for a window (a frame) in a frameset |
| <frameset> | Not supported in HTML5.Uses for a set of frames |
| <h1> to <h6> | Uses for HTML headings |
| <head> | Contains metadata/information for the document |
| <header> | Uses for a header for a document or section |
| <hgroup> | Uses for a header and related content |
| <hr> Self Closing Tag | Uses for a thematic change in the content |
| <html> | Uses for the root of an HTML document |
| <i> | Uses for a part of text in an alternate voice or mood |
| <iframe> | Uses for an inline frame |
| <img> Self Closing Tag | Uses for an image |
| <input> Self Closing Tag | Uses for an input control |
| <ins> | Uses for a text that has been inserted into a document |
| <kbd> | Uses for keyboard input |
| <label> | Uses for a label for an <input> element |
| <legend> | Uses for a caption for a <fieldset> element |
| <li> | Uses for a list item |
| <link> Self Closing Tag | Uses for the relationship between a document and an external resource (most used to link to style sheets) |
| <main> | Specifies the main content of a document |
| <map> | Uses for an image map |
| <mark> | Uses for marked/highlighted text |
| <menu> | Uses for an unordered list |
| <meta> Self Closing Tag | Uses for metadata about an HTML document |
| <meter> | Uses for a scalar measurement within a known range (a gauge) |
| <nav> | Uses for navigation links |
| <noframes> | Not supported in HTML5.Uses for an alternate content for users that do not support frames |
| <noscript> | Uses for an alternate content for users that do not support client-side scripts |
| <object> | Uses for a container for an external application |
| <ol> | Uses for an ordered list |
| <optgroup> | Uses for a group of related options in a drop-down list |
| <option> | Uses for an option in a drop-down list |
| <output> | Uses for the result of a calculation |
| <p> | Uses for a paragraph |
| <param> Self Closing Tag | Uses for a parameter for an object |
| <picture> | Uses for a container for multiple image resources |
| <pre> | Uses for preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Uses for a short quotation |
| <rp> | Uses for what to show in browsers that do not support ruby annotations |
| <rt> | Uses for an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Uses for a ruby annotation (for East Asian typography) |
| <s> | Uses for text that is no longer correct |
| <samp> | Uses for sample output from a computer program |
| <script> | Uses for a client-side script |
| <search> | Uses for a search section |
| <section> | Uses for a section in a document |
| <select> | Uses for a drop-down list |
| <small> | Uses for smaller text |
| <source> Self Closing Tag | Uses for multiple media resources for media elements (<video> and <audio>) |
| <span> | Uses for a section in a document |
| <strike> | Not supported in HTML5. Uses for strikethrough text |
| <strong> | Uses for important text |
| <style> | Uses for style information for a document |
| <sub> | Uses for subscripted text |
| <summary> | Uses for a visible heading for a <details> element |
| <sup> | Uses for superscripted text |
| <svg> | Uses for a container for SVG graphics |
| <table> | Uses for a table |
| <tbody> | Groups the body content in a table |
| <td> | Uses for a cell in a table |
| <template> | Uses for a container for content that should be hidden when the page loads |
| <textarea> | Uses for a multiline input control (text area) |
| <tfoot> | Groups the footer content in a table |
| <th> | Uses for a header cell in a table |
| <thead> | Groups the header content in a table |
| <time> | Uses for a specific time (or datetime) |
| <title> | Uses for a title for the document |
| <tr> | Uses for a row in a table |
| <track> Self Closing Tag | Uses for text tracks for media elements (<video> and <audio>) |
| <tt> | Not supported in HTML5. Use CSS instead.Uses for teletype text |
| <u> | Uses for some text that is unarticulated and styled differently from normal text |
| <ul> | Uses for an unordered list |
| <var> | Uses for a variable |
| <video> | Uses for embedded video content |
| <wbr> Self Closing Tag | Uses for a possible line-break |