HTML Cheat Sheet
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 |
<base /> | Base URL |
<meta /> | Meta data |
<title>….</title> | Title |
<link /> | Relevant resource |
<style>….</style> | Style resource |
<script>….</script> | Script resource |
<h1>….</h1> to <h6>….</h6> | Heading |
<div>….</div> | Page section |
<span>….</span> | Inline section |
<p>….</p> | Paragraph |
<br> | Line break |
<hr> | Horizontal rule |
<a href=””> | Page link |
<a href=”mailto:”> | Email link |
<a name=”name”> | Anchor |
<a href=”#name”> | Link to anchor |
<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 |
<ol>….</ol> | Ordered list |
<ul>….</ul> | Unordered list |
<li>….</li> | List item |
<dl>….</dl> | Definition list |
<dt>….</dt> | Definition term |
<dd>….</dd> | Term description |
<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 |
<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 |
Image
Image Map
Area of image map
& & Ampersand
< < Less than
> > Greater than
@ @ “At” symbol
€ € Euro
• • Small bullet
™ ™ Trademark
£ £ Pound
  Non-breaking space
© © Copyright symbol
Object
Parameter
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
Note: Core attributes may not be used in base, head, html, meta, param, script, style or title elements.
Note: Language Attributes may not be used in base, br, frame, framest, hr, iframe, param or script elements.
onChange onSelect
onFocus onSubmit
onKeypress
onDblclick onMouseover
onMousedown onMouseup
onMousemove
0 Komentar: