| Tag | Description | Example |
| <html> | Root element of an HTML page | <html>...</html> |
| <head> | Contains meta-information about the document | <head>...</head> |
| <title> | Specifies the title of the document | <title>Page Title</title> |
| <body> | Contains the content of the document | <body>...</body> |
| <h1> to <h6> | Headings, with <h1> being the highest level | <h1>Heading</h1> |
| <p> | Defines a paragraph | <p>This is a paragraph.</p> |
| <a> | Defines a hyperlink | <a href='url'>Link text</a> |
| <img> | Embeds an image | <img src="image.jpg" alt="description"> |
| <ul> | Unordered list | <ul><li>Item</li></ul> |
| <ol> | Ordered list | <ol><li>First Item</li></ol> |
| <li> | List item | <li>List Item</li> |
| <table> | Defines a table | <table>...</table> |
| <tr> | Table row | <tr>...</tr> |
| <td> | Table data cell | <td>Data</td> |
| <th> | Table header cell | <th>Header</th> |
| <form> | Defines an HTML form | <form>...</form> |
| <input> | Input field | <input type='text'> |
| <button> | Clickable button | <button>Click me</button> |
| <div> | Defines a division or section | <div>...</div> |
| <span> | Inline container for text | <span>Text</span> |
| <br> | Inserts a single line break | Text<br>More text |
| <hr> | Defines a thematic break | <hr> |
| <strong> | Defines important text | <strong>Important</strong> |
| <em> | Defines emphasized text | <em>Emphasized</em> |
| <iframe> | Inline frame for embedding other documents | <iframe src="url"></iframe> |
| <header> | Defines a header for a document or section | <header>...</header> |
| <footer> | Defines a footer for a document or section | <footer>...</footer> |
| <article> | Defines independent, self-contained content | <article>...</article> |
| <section> | Defines sections in a document | <section>...</section> |
| <nav> | Defines navigation links | <nav>...</nav> |
| <aside> | Content aside from the page content | <aside>...</aside> |
| <meta> | Specifies metadata about the HTML document | <meta charset="UTF-8"> |
| <link> | Defines a link between a document and an external resource | <link rel="stylesheet" href="styles.css"> |
| <style> | Contains style information for a document | <style>body {background-color: #fff;}</style> |
| <script> | Defines a client-side script | <script>alert('Hello World');</script> |
| <noscript> | Defines an alternate content for users that do not support client-side scripts | <noscript>JavaScript is not enabled in your browser.</noscript> |
| <canvas> | Used to draw graphics via scripting (usually JavaScript) | <canvas id="myCanvas"></canvas> |
| <audio> | Embeds sound content | <audio controls><source src="audio.mp3" type="audio/mpeg"></audio> |
| <video> | Embeds video content | <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"></video> |
| <source> | Specifies multiple media resources for <picture>, <audio>, or <video> | <video><source src="movie.mp4" type="video/mp4"></video> |
| <embed> | Embeds external content at the specified point in the document | <embed type="image/jpg" src="image.jpg" width="300" height="200"> |
| <object> | Defines an embedded object | <object data="movie.swf" type="application/x-shockwave-flash"></object> |
| <param> | Defines parameters for an <object> | <object data="movie.swf"><param name="movie" value="movie.swf"></object> |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. | <figure><img src="image.jpg" alt="Image"><figcaption>Caption</figcaption></figure> |
| <figcaption> | Defines a caption for a <figure> element | <figure><img src="image.jpg"><figcaption>Caption here</figcaption></figure> |
| <details> | Defines additional details that the user can view or hide | <details><summary>Title</summary><p>Details here</p></details> |
| <summary> | Defines a visible heading for a <details> element | <details><summary>Title</summary><p>Details here</p></details> |
| <mark> | Defines text that should be marked or highlighted | <p>Do not forget to <mark>highlight</mark> this text.</p> |
| <time> | Represents a specific period in time | <time datetime="2020-05-10">May 10</time> |
| <progress> | Represents the progress of a task | <progress value="50" max="100"></progress> |
| <meter> | Represents a scalar measurement within a known range, or a fractional value | <meter value="2" min="0" max="10">2 out of 10</meter> |
| <datalist> | Specifies a list of pre-defined options for input controls | <input list="browsers"><datalist id="browsers"><option value="Chrome"></datalist> |
| <output> | Represents the result of a calculation | <output name="result">42</output> |
| <abbr> | Represents an abbreviation or acronym | <abbr title="Hypertext Markup Language">HTML</abbr> |
| <b> | Defines bold text without extra importance | <b>Bold text</b> |
| <cite> | Defines the title of a creative work | <cite>The Scream</cite> by Edvard Munch. |
| <data> | Links the given content with a machine-readable translation | <data value="21053">Product 21053</data> |
| <dl> | Defines a description list | <dl><dt>Term</dt><dd>Description</dd></dl> |
| <dt> | Defines a term/name in a description list | <dl><dt>HTML</dt><dd>Markup Language</dd></dl> |
| <dd> | Describes the term/name in a description list | <dl><dt>HTML</dt><dd>Markup Language</dd></dl> |
| <i> | Defines a part of text in an alternate voice or mood | <i>Italic text</i> |
| <kbd> | Represents user input, like keyboard input | <kbd>Ctrl</kbd> + <kbd>C</kbd> |
| <label> | Defines a label for <input> elements | <label for="name">Name:</label><input type="text" id="name"> |
| <legend> | Represents a caption for the content of its parent <fieldset> | <fieldset><legend>Personal Information</legend>...</fieldset> |
| <optgroup> | Groups related options in a dropdown list | <select><optgroup label="Fruits"><option>Apple</option></optgroup></select> |
| <option> | Defines an option in a select list | <select><option>Option 1</option></select> |
| <q> | Defines a short quotation | <p>He said, <q>To be or not to be</q>, that is the question.</p> |
| <s> | Defines text that is no longer correct | <s>Incorrect text</s> |
| <samp> | Represents sample output from a computer program | <samp>Sample output</samp> |
| <small> | Defines smaller text | <small>Small text</small> |
| <sub> | Defines subscripted text | H<sub>2</sub>O |
| <sup> | Defines superscripted text | x<sup>2</sup> |
| <template> | Holds content that is hidden when the page loads, to be displayed later via JavaScript | <template><p>Hello World!</p></template> |
| <textarea> | Defines a multi-line text input control | <textarea rows="4" cols="50">Text here</textarea> |
| <u> | Defines text that should be stylistically different from normal text | <u>Underlined text</u> |
| <var> | Represents a variable | <p>The variable <var>x</var> is equal to 5.</p> |
| <wbr> | Indicates where in a text it would be okay to add a line-break | A very long word<wbr>in a paragraph. |
| <address> | Indicates that the enclosed HTML provides contact information | <address>Contact me at email@example.com</address> |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it | <bdi>User input here</bdi> |
| <bdo> | Overrides the current text direction | <bdo dir="rtl">This text will go right to left.</bdo> |
| <col> | Specifies column properties for each column within a <colgroup> element | <table><colgroup><col style="background-color:yellow"></colgroup>...</table> |
| <colgroup> | Specifies a group of one or more columns in a table for formatting | <table><colgroup><col span="2" style="background-color:yellow"></colgroup>...</table> |
| <dialog> | Represents a dialog box or other interactive component | <dialog open>This is an open dialog window</dialog> |
| <fieldset> | Groups related elements in a form | <fieldset><legend>Personal Information</legend>...</fieldset> |
| <hgroup> | Groups a set of <h1> to <h6> elements when they represent a multi-level heading | <hgroup><h1>Main title</h1><h2>Subtitle</h2></hgroup> |
| <main> | Specifies the main content of a document | <main>Main content here</main> |
| <picture> | Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios | <picture><source media="(min-width: 800px)" srcset="large.jpg"><img src="small.jpg" alt="Description"></picture> |
| <ruby> | Represents a ruby annotation 鈥?small text used for East Asian typography | <ruby>婕?<rt>kan</rt></ruby> |
| <rt> | Specifies the ruby text component of a ruby annotation | <ruby>婕?<rt>kan</rt></ruby> |
| <track> | Used as a child of the media elements, <audio> and <video>. It allows you to specify timed text tracks (like subtitles) | <video><source src="movie.mp4" type="video/mp4"><track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"></video> |
Comments
Post a Comment