 |
HTML Cheat Sheet |
Mastering HTML: Your Ultimate Cheat Sheet for Web Development
HTML (Hypertext Markup Language) is the backbone of the web, defining the structure and content of web pages. Whether you are a novice web designer or an experienced developer, having a quick reference guide can significantly boost your productivity and efficiency. This HTML cheat sheet provides a comprehensive list of HTML elements, attributes, and their usage, serving as a handy resource for building robust and well-structured web pages.
https://intitute.blogspot.com/2018/10/html-cheat-sheet.html
HTML Cheat Sheet
Basic Structure
html<!DOCTYPE html><html><head> <title>Page Title</title></head><body></body></html>Document Metadata
html<!DOCTYPE html> <!-- Defines the document type --><html lang="en"> <!-- Declares the language of the document --><head> <meta charset="UTF-8"> <!-- Character encoding --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design --> <meta name="description" content="A brief description of the page"> <!-- Page description --> <title>Page Title</title> <!-- Page title in the browser tab --></head><body></body></html>Text Formatting
html<p>This is a paragraph.</p><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6><strong>Bold text</strong><em>Italic text</em><u>Underlined text</u><del>Deleted text</del><ins>Inserted text</ins><small>Smaller text</small><mark>Highlighted text</mark><blockquote>Blockquote text</blockquote>Lists
html<ul> <li>Unordered list item</li> <li>Unordered list item</li></ul><ol> <li>Ordered list item</li> <li>Ordered list item</li></ol><dl> <dt>Definition term</dt> <dd>Definition description</dd></dl>Links
html<a href="https://www.example.com">This is a link</a><a href="https://www.example.com" target="_blank">Open link in a new tab</a><a href="#section">Jump to section</a>Images
html<img src="image.jpg" alt="Description of image"><img src="image.jpg" alt="Description of image" width="500" height="600">Tables
html<table> <caption>Table Caption</caption> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </tbody> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> </tr> </tfoot></table>Forms
html<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <label for="dob">Date of Birth:</label> <input type="date" id="dob" name="dob"> <label for="gender">Gender:</label> <select id="gender" name="gender"> <option value="male">Male</option> <option value="female">Female</option> </select> <label> <input type="checkbox" name="subscribe" checked> Subscribe to newsletter </label> <button type="submit">Submit</button></form>Media
html<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio><video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.</video><iframe src="https://www.example.com" width="600" height="400"></iframe>Semantic Elements
html<header> <h1>Header content</h1></header><nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul></nav><main> <article> <h2>Article title</h2> <p>Article content</p> </article></main><aside> <h2>Aside title</h2> <p>Aside content</p></aside><footer> <p>Footer content</p></footer>Miscellaneous
html<div>Generic container for content</div><span>Inline container for content</span><br> <!-- Line break --><hr> <!-- Horizontal rule -->This HTML cheat sheet covers the most commonly used elements and attributes, providing a quick reference for web developers. With this guide, you can efficiently structure and style your web pages, enhancing both functionality and aesthetics.
 |
| HTML Cheat Sheet |
Document Outline
| <!DOCTYPE> | Version of (X)HTML |
| <html>….</html> | HTML document |
| <head>….</head> | Page information |
| <body>….</body> | Page contests |
Comments
<!– Comment Test –>
Page Information
| <base /> | Base URL |
| <meta /> | Meta data |
| <title>….</title> | Title |
| <link /> | Relevant resource |
| <style>….</style> | Style resource |
| <script>….</script> | Script resource |
Document Structure
| <h1>….</h1> to <h6>….</h6> | Heading |
| <div>….</div> | Page section |
| <span>….</span> | Inline section |
| <p>….</p> | Paragraph |
| <br> | Line break |
| <hr> | Horizontal rule |
Links
| <a href=””> | Page link |
| <a href=”mailto:”> | Email link |
| <a name=”name”> | Anchor |
| <a href=”#name”> | Link to anchor |
Text Markup
| <strong>….</strong> | Strong emphasis |
| <em>….</em> | Emphasis |
| <blockquote>….</blockquote> | Long quotation |
| <q>….</q> | Short quotation |
| <abbr>….</abbr> | Abbreviation |
| <acronym>….</acronym> | Acronym |
| <address>….</address> | Address |
| <pre>….</pre> | Pre-formatted text |
| <dfn>….</dfn> | Definition |
| <code>….</code> | Code |
| <cite>….</cite> | Citation |
| <del>….</del> | Deleted text |
| <ins>….</ins> | Inserted text |
| <sub>….</sub> | Subscript |
| <sup>….</sup> | Superscript |
| <bdo>….</bdo> | Text direction |
List
| <ol>….</ol> | Ordered list |
| <ul>….</ul> | Unordered list |
| <li>….</li> | List item |
| <dl>….</dl> | Definition list |
| <dt>….</dt> | Definition term |
| <dd>….</dd> | Term description |
Forms
| <form>….</form> | Form |
| <fieldset>….</fieldset> | Collection of fields |
| <legend>….</legend> | Form legend |
| <label>….</label> | Input label |
| <input>….</input> | Form input |
| <select>….</select> | Drop-down box |
| <optgroup>….</optgroup> | Group of options |
| <option>….</option> | Drop-down options |
| <textarea>….</textarea> | Large text input |
| <button>….</button> | Button |
Tables
| <table>….</table> | Table |
| <caption>….</caption> | Caption |
| <thead>….</thead> | Table body |
| <tbody>….</tbody> | Table body |
| <tfoot>….</tfoot> | Table footer |
| <colgroup> | Column group |
| <col /> | Column |
| <tr>….</tr> | Table row |
| <th>….</th> | Header cell |
| <td>….</td> | Table cell |
Images and Image Maps
<img />
Image
Image
<map>….</map>
Image Map
Image Map
<area />
Area of image map
Area of image map
Common Character Entities
" ” Quotation mark
& & Ampersand
< < Less than
> > Greater than
@ @ “At” symbol
€ € Euro
• • Small bullet
™ ™ Trademark
£ £ Pound
  Non-breaking space
© © Copyright symbol
& & Ampersand
< < Less than
> > Greater than
@ @ “At” symbol
€ € Euro
• • Small bullet
™ ™ Trademark
£ £ Pound
  Non-breaking space
© © Copyright symbol
Objects
<object>….</object>
Object
Object
<param />
Parameter
Parameter
Empty Elements
<area />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
Core Attributes
Class: id Style: title
Note: Core attributes may not be used in base, head, html, meta, param, script, style or title elements.
Note: Core attributes may not be used in base, head, html, meta, param, script, style or title elements.
Language Attributes
dir lang
Note: Language Attributes may not be used in base, br, frame, framest, hr, iframe, param or script elements.
Note: Language Attributes may not be used in base, br, frame, framest, hr, iframe, param or script elements.
Keyboard Attributes
accesskey tabindex
Window Events
onLoad onUnload
Form Events
onBlur onReset
onChange onSelect
onFocus onSubmit
onChange onSelect
onFocus onSubmit
Keyboard Events
onKeydown onKeyup
onKeypress
onKeypress
Mouse Events
onClick onMouseout
onDblclick onMouseover
onMousedown onMouseup
onMousemove
onDblclick onMouseover
onMousedown onMouseup
onMousemove
