HTML Cheatsheet
Cheatsheet Content
1. Basic Document Structure <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document Title</title> </head> <body> <!-- Content goes here --> </body> </html> <!DOCTYPE html> : Document type declaration. <html lang="en"> : Root element, specifies language. <head> : Contains meta-information about the document. <body> : Contains the visible page content. 2. Head Elements <meta charset="UTF-8"> : Character encoding. <meta name="viewport" ...> : Responsive design settings. <title>Page Title</title> : Appears in browser tab. <link rel="stylesheet" href="style.css"> : Links external CSS. <script src="script.js" defer></script> : Links external JavaScript. <style> /* CSS here */ </style> : Internal CSS. 3. Text Formatting <h1> to <h6> : Headings (level 1 to 6). <p> : Paragraph. <a href="url">Link Text</a> : Hyperlink. target="_blank" : Opens in new tab. <b> or <strong> : Bold text (stronger semantic meaning). <i> or <em> : Italic text (emphasis). <u> : Underlined text. <s> or <del> : Strikethrough text. <mark> : Highlighted text. <br> : Line break (self-closing). <hr> : Horizontal rule (self-closing). <sub> / <sup> : Subscript / Superscript. <code> : Inline code. <pre><code>...</code></pre> : Preformatted text with code. <blockquote> : Block quotation. 4. Lists Unordered List <ul> <li>Item 1</li> <li>Item 2</li> </ul> Ordered List <ol> <li>First item</li> <li>Second item</li> </ol> Description List <dl> <dt>Term</dt> <dd>Description of the term.</dd> </dl> 5. Images & Media <img src="image.jpg" alt="Description" width="300"> : Image. alt : Alternative text for accessibility. width / height : Image dimensions (avoid for responsive). <figure><img ...><figcaption>Caption</figcaption></figure> : Image with caption. <audio controls src="audio.mp3"></audio> : Audio player. <video controls src="video.mp4"></video> : Video player. 6. Tables <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </tbody> </table> <table> : Table container. <thead> : Table header group. <tbody> : Table body group. <tr> : Table row. <th> : Table header cell. <td> : Table data cell. <caption> : Table caption (inside <table> , before <thead> ). 7. Forms <form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="user_name"><br> <input type="radio" id="opt1" name="option" value="1"> <label for="opt1">Option 1</label><br> <textarea name="message" rows="4" cols="50"></textarea><br> <select name="fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> </select><br> <button type="submit">Submit</button> </form> <form> : Form container. action : URL to send data. method : HTTP method (e.g., get , post ). <label for="id"> : Label for an input element. <input type="..."> : Input field. text , password , email , number , date , checkbox , radio , file , submit , reset . placeholder : Hint text. required : Makes field mandatory. <textarea> : Multi-line text input. <select> , <option> : Dropdown list. <button type="submit"> : Submit button. <fieldset> , <legend> : Group related form elements. 8. Semantic HTML5 Elements <header> : Introductory content, usually contains navigation. <nav> : Navigation links. <main> : Dominant content of the <body> . <article> : Self-contained composition (e.g., blog post). <section> : Generic standalone section (e.g., chapter). <aside> : Content tangentially related to main content (e.g., sidebar). <footer> : Footer for its nearest ancestor sectioning content or body. <div> : Generic block-level container (no semantic meaning). <span> : Generic inline container (no semantic meaning). 9. Special Characters (Entities) Character Entity Name Entity Number < < < > > > & & & " " " ' ' '   © © © ® ® ® ™ ™ ™
