Basic coding
HTML Tags and Their Uses
| Tag | Description | Typical Use |
|---|---|---|
| <!DOCTYPE> | Defines the document type and version of HTML being used. | At the beginning of an HTML document. |
| <html> | The root element of an HTML document. | Contains all other HTML elements. |
| <head> | Contains meta-information about the HTML document. | Includes metadata, title, and links to stylesheets and scripts. |
| <title> | Sets the title of the HTML document, displayed in the browser's title bar or tab. | Within the head section to define the document's title. |
| <meta> | Provides metadata about the HTML document. | Includes character encoding, viewport settings, and other metadata. |
| <link> | Used to link external resources like stylesheets to the HTML document. | In the head section to link stylesheets. |
| <style> | Contains CSS rules for styling the content within its parent element. | In the head section or directly in the HTML document to define styles. |
| <script> | Used to include JavaScript code in the HTML document or link to an external JavaScript file. | In the head or body section to add interactivity. |
| <body> | Contains the visible content of the HTML document. | Includes text, images, links, and other visible elements. |
| <h1> to <h6> | Headings of different levels, where <h1> is the highest and <h6> is the lowest. | For creating titles and headings in the content. |
| <p> | Represents a paragraph of text. | For organizing and displaying text content. |
| <a> | Creates hyperlinks to other web pages or resources. | For creating clickable links. |
| <img> | Embeds images in the document. | To display images on the web page. |
| <ul> | Represents an unordered (bulleted) list. | For creating lists without a specific order. |
| <ol> | Represents an ordered (numbered) list. | For creating lists with a specific order. |
| <li> | Represents a list item within <ul> or <ol>. | Used inside lists to define individual items. |
| <div> | A generic container used for grouping and styling elements with CSS. | For creating layout structures and applying CSS styles. |
| <span> | A generic inline container often used for styling small portions of text. | For applying styles to specific portions of text or inline content. |
| <form> | Represents an HTML form for user input. | For creating forms to collect user data. |
| <input> | Represents an input field, like text, password, radio buttons, checkboxes, etc. | For collecting various types of user input. |
| <textarea> | Represents a multi-line text input area. | For collecting longer text inputs. |
| <button> | Represents a clickable button. | For triggering actions or submitting forms. |
| <select> | Creates a dropdown menu for selecting options. | For presenting a list of options to choose from. |
| <option> | Represents an option within a <select> element. | Defines individual options within a dropdown menu. |
| <label> | Provides a label for an input element. | Improves user experience and accessibility for form elements. |
| <table> | Creates a table for organizing tabular data. | For presenting data in rows and columns. |
| <tr> | Represents a table row. | Defines a row within a table. |
| <td> | Represents a table cell. | Defines a cell within a table row. |
| <th> | Represents a table header cell. | Defines a header cell within a table row. |
| <thead> | Groups the header content of a table. | Wraps the header rows of a table. |
| <tbody> | Groups the body content of a table. | Wraps the main data rows of a table. |
| <tfoot> | Groups the footer content of a table. | Wraps the footer rows of a table. |
| <iframe> | Embeds another document within the current HTML document. | For embedding external content like maps or videos. |
| <audio> | Embeds audio content. | For playing audio files on the web page. |
| <video> | Embeds video content. | For playing video files on the web page. |
| <canvas> | Provides a space for rendering dynamic graphics using JavaScript. | For creating interactive graphics and animations. |
| <svg> | Defines scalable vector graphics. | For creating vector-based graphics and illustrations. |
HTML Cheat Sheet
| Element | Usage | Example |
|---|---|---|
| <html> | Defines the root of an HTML document. | <!DOCTYPE html> <html> ... </html> |
| <head> | Contains meta-information about the document. | <head> ... </head> |
| <title> | Defines the title of the document, displayed in the browser tab. | <title>My Webpage</title> |
| <body> | Contains the visible content of the document. | <body> ... </body> |
| <h1> to <h6> | Headings of decreasing importance. | <h1>Main Heading</h1> <h2>Subheading</h2> |
| <p> | Paragraph element. | <p>This is a paragraph.</p> |
| <a> | Creates a hyperlink. | <a href="https://www.example.com">Visit Example</a> |
| <img> | Embeds an image. | <img src="image.jpg" alt="Description"> |
| <ul> and <ol> | Unordered and ordered lists. | <ul> <li>Item 1</li> <li>Item 2</li> </ul> |
| <table> | Creates a table. | <table> ... </table> |
Join the conversation