A Collection of Front-End Cheat Sheets

HTML Boilerplate

1<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport"content="width=device-width, initial-scale=1.0"> 6 <meta name="description" content="A brief description of the page content."> 7 <title>Page Title</title> 8 <link rel="stylesheet" href="styles.css"> 9 </head> 10 <body> 11 <header> 12 <!-- Header content --> 13 </header> 14 15 <main> 16 <!-- Main content --> 17 <h1>Welcome to My Website</h1> 18 <p>This is a paragraph.</p> 19 </main> 20 21 <footer> 22 <!-- Footer content --> 23 </footer> 24 25 <script src="script.js"></script> 26 </body> 27 </html>
  • DOCTYPE: <!DOCTYPE html> declares this as an HTML5 document.
  • HTML Tag: <html lang="en"> specifies the language for better accessibility.
  • Head Section:
    • <meta charset="UTF-8"> sets the character encoding to UTF-8.
    • <meta name="viewport"> ensures correct rendering on mobile devices.
    • <title> defines the page title, important for SEO and browser tabs.
    • <meta name="description"> for SEO purposes in search results.
    • <link rel="stylesheet"> to include external CSS.
  • Body Section:
    • Use semantic tags like <header>, <main>, <footer> for structure.
    • <script> at the end of <body> for better page load performance.
  • Closing Tags: All opened tags must be properly closed for valid HTML.

Headings

1<h1>This is Heading 1 - Largest</h1> 2<h2>This is Heading 2</h2> 3<h3>This is Heading 3</h3> 4<h4>This is Heading 4</h4> 5<h5>This is Heading 5</h5> 6<h6>This is Heading 6 - Smallest</h6>
  • Hierarchy: The headings range from <h1> (the highest level) to <h6> (the lowest level), allowing for clear structural hierarchy in content.
  • Syntax: Each heading starts with an opening tag <hX> and ends with a closing tag </hX>, where X is a number from 1 to 6.
  • Content: The text between these tags is what appears as the heading on the page.
  • Default Styling: Browsers apply different default font sizes and weights to each heading level, with <h1> being the largest and <h6> the smallest.
  • Semantic Use: These tags are intended for semantic structuring of content, not merely for visual presentation. <h1> should generally be used once per page for the main heading, with subsequent <h2> through <h6> for subsections.

Text Formatting Tags

1<p>This is a paragraph.</p> 2 3<strong>This text is bold.</strong> 4or 5<b>This text is also bold.</b> 6 7<em>This text is italicized.</em> 8or 9<i>This text is also italicized.</i> 10 11<mark>This text is highlighted.</mark> 12 13<small>This text is smaller.</small> 14 15<del>This text is deleted.</del> 16 17<ins>This text is inserted.</ins> 18 19<sub>This is subscript.</sub> 20 21<sup>This is superscript.</sup> 22 23<!-- Inline quotation --> 24<q>Short quotation</q> 25 26<!-- Block quotation --> 27<blockquote> 28 <p>Here's a longer quote.</p> 29</blockquote>
  • Paragraph: The <p> tag is used to define a paragraph of text.
  • Bold Text:
    • <strong> conveys semantic importance or emphasis, making text bold.
    • <b> provides the same visual effect but without semantic meaning, used for stylistic purposes.
  • Italicized Text:
    • <em> implies emphasis or stress, rendering text in italics.
    • <i> provides italics for stylistic reasons, not semantic emphasis.
  • Highlighted Text: <mark> is used to highlight parts of text for reference or notation.
  • Smaller Text: <small> reduces the font size of the enclosed text.
  • Deleted Text: <del> indicates text that has been removed or deleted from a document.
  • Inserted Text: <ins> shows text that has been added or inserted into the document.
  • Subscript: <sub> lowers text and makes it smaller, typically used for chemical formulas or mathematical expressions.
  • Superscript: <sup> raises text and makes it smaller, often used for exponents or footnotes.
  • Inline Quotation: <q> is for short, inline quotations, automatically adding quotation marks in most browsers.
  • Block Quotation: <blockquote> is used for longer quotations or cited content, usually with indentation or different styling to visually distinguish it from the rest of the text.

Lists

1<!-- Unordered List (Bullets) --> 2<ul> 3 <li>Item 1</li> 4 <li>Item 2</li> 5 <li>Item 3</li> 6</ul> 7 8<!-- Ordered List (Numbers) --> 9<ol> 10 <li>First Item</li> 11 <li>Second Item</li> 12 <li>Third Item</li> 13</ol> 14 15<!-- Description List --> 16<dl> 17 <dt>Term 1</dt> 18 <dd>Description of Term 1</dd> 19 <dt>Term 2</dt> 20 <dd>Description of Term 2</dd> 21</dl> 22 23<!-- Nested Lists --> 24<ul> 25 <li>Parent Item 26 <ul> 27 <li>Child Item 1</li> 28 <li>Child Item 2</li> 29 </ul> 30 </li> 31 <li>Another Parent Item</li> 32</ul> 33 34<!-- Custom Bullet Points --> 35<ul style="list-style-type: square;"> 36 <li>Square Bullet</li> 37</ul> 38<ul style="list-style-type: circle;"> 39 <li>Circle Bullet</li> 40</ul> 41<ul style="list-style-type: none;"> 42 <li>No Bullet</li> 43</ul> 44 45<!-- Custom Numbering --> 46<ol type="A"> 47 <li>Capital Letters</li> 48 <li>Next Letter</li> 49</ol> 50<ol type="i"> 51 <li>Lower Roman Numerals</li> 52 <li>Next Roman Numeral</li> 53</ol>
  • Unordered Lists: Use <ul> for bullet-point lists. Default is disc-shaped bullets.
  • Ordered Lists: Use <ol> for numbered lists. Default starts with Arabic numbers.
  • Description Lists: Use <dl> for terms and descriptions, with <dt> for terms and <dd> for descriptions.
  • Nested Lists: Can be placed inside another list item for hierarchy. Both <ul> and <ol> can be nested within each other.
  • Custom Bullet Points: Change bullet style with CSS, e.g., style="list-style-type: square;".
  • Custom Numbering: Use the type attribute on <ol> for letter or roman numeral numbering, like type="A" or type="i".
  • List Styling: While HTML provides basic list structures, CSS is often used for advanced styling of lists.

Links

1<!-- Basic Hyperlink --> 2<a href="https://example.com">Visit Example.com</a> 3 4<!-- Link to Local File --> 5<a href="documents/myfile.pdf">Download PDF</a> 6 7<!-- Link to Another Page in the Same Site --> 8<a href="/about.html">About Us</a> 9 10<!-- Email Link --> 11<a href="mailto:[email protected]">Email Us</a> 12 13<!-- Telephone Link --> 14<a href="tel:+1234567890">Call Us</a> 15 16<!-- Link with Title Attribute --> 17<a href="https://example.com" title="Visit our homepage">Home</a> 18 19<!-- Opening Link in New Tab/Window --> 20<a href="https://example.com" target="_blank">Open in New Tab</a> 21 22<!-- Link to a Specific Part of the Page --> 23<p id="top">This is the top of the page.</p> 24<a href="#bottom">Go to Bottom</a> 25<p id="bottom" style="margin-top: 1000px;">This is the bottom of the page.</p> 26<a href="#top">Back to Top</a> 27 28<!-- Download Link --> 29<a href="images/picture.jpg" download="cool-picture">Download Image</a> 30
  • Basic Hyperlink: Use <a href="URL">Text</a> to link to external sites.
  • Local File: Link to local files with <a href="path/to/file">Text</a>.
  • Same Site Navigation: Navigate within your site using <a href="/page.html">Text</a>.
  • Email Link: Use <a href="mailto:[email protected]">Text</a> to create email links.
  • Telephone Link: Create phone number links with <a href="tel:+1234567890">Text</a>.
  • Title Attribute: Provide extra info on hover with title, e.g., <a href="URL" title="Info">Text</a>.
  • New Tab/Window: Open links in new tabs with target="_blank", like <a href="URL" target="_blank">Text</a>.
  • Anchor Links: Link within a page using IDs, e.g., <a href="#section">Text</a> and <p id="section">.
  • Download Link: Force a download with download, like <a href="URL" download="filename">Text</a>.

Tables

1<!-- Basic Table --> 2<table> 3 <tr> 4 <th>Header 1</th> 5 <th>Header 2</th> 6 </tr> 7 <tr> 8 <td>Row 1, Cell 1</td> 9 <td>Row 1, Cell 2</td> 10 </tr> 11 <tr> 12 <td>Row 2, Cell 1</td> 13 <td>Row 2, Cell 2</td> 14 </tr> 15</table> 16 17<!-- Table with Row and Column Span --> 18<table> 19 <tr> 20 <th colspan="2">Header Spanning Two Columns</th> 21 </tr> 22 <tr> 23 <td rowspan="2">Cell Spanning Two Rows</td> 24 <td>Cell A</td> 25 </tr> 26 <tr> 27 <td>Cell B</td> 28 </tr> 29</table> 30 31<!-- Table with Border --> 32<table border="1"> 33 <tr> 34 <th>Name</th> 35 <th>Age</th> 36 </tr> 37 <tr> 38 <td>Alice</td> 39 <td>25</td> 40 </tr> 41</table> 42 43<!-- Table Caption --> 44<table> 45 <caption>Population by Country</caption> 46 <tr> 47 <th>Country</th> 48 <th>Population</th> 49 </tr> 50 <tr> 51 <td>USA</td> 52 <td>331 million</td> 53 </tr> 54</table> 55 56<!-- Table with Header, Body, and Footer --> 57<table> 58 <thead> 59 <tr> 60 <th>Header 1</th> 61 <th>Header 2</th> 62 </tr> 63 </thead> 64 <tbody> 65 <tr> 66 <td>Body Row 1, Cell 1</td> 67 <td>Body Row 1, Cell 2</td> 68 </tr> 69 </tbody> 70 <tfoot> 71 <tr> 72 <td>Footer 1</td> 73 <td>Footer 2</td> 74 </tr> 75 </tfoot> 76</table> 77
  • Basic Structure: Use <table> for tables, <tr> for rows, <th> for headers, and <td> for data cells.
  • Row and Column Span: Merge cells with colspan for columns and rowspan for rows.
  • Border Attribute: Add a simple border with border="1", though this is outdated; CSS is preferred for styling.
  • Caption: Describe the table with <caption></caption>.
  • Semantic Sections: Use <thead>, <tbody>, and <tfoot> for table structure readability.
  • Styling Tables: Apply CSS for appearance, either inline or externally, for color, borders, widths, etc.

Forms - Basic Form

1<!-- Basic Form --> 2<form action="#" method="get"> 3 <label for="username">Username:</label> 4 <input type="text" id="username" name="username"> 5 <label for="password">Password:</label> 6 <input type="password" id="password" name="password"> 7 <input type="submit" value="Submit"> 8</form> 9 10<!-- Form with Placeholder and Required --> 11<form action="#"> 12 <label for="email">Email:</label> 13 <input type="email" id="email" name="email" placeholder="[email protected]" required> 14 <input type="submit" value="Submit"> 15</form> 16 17<!-- Form with Button and Reset --> 18<form action="#"> 19 <label for="search">Search:</label> 20 <input type="text" id="search" name="search"> 21 <button type="submit">Search</button> 22 <button type="reset">Reset</button> 23</form> 24
  • Basic Form Structure: Use <form>, <label>, <input>, and submit buttons.
  • Action Attribute: The action attribute in the <form> tag specifies where to send the form data when submitted, typically a URL or a server script.
  • Placeholders & Required: Use placeholder for hints and required for mandatory fields.
  • Buttons: Use <button> for submit and reset actions.

Forms - Radio Buttons

1<!-- Radio Buttons --> 2<form action="#"> 3 <p>Choose your favorite:</p> 4 <label><input type="radio" name="favorite" value="apple"> Apple</label> 5 <label><input type="radio" name="favorite" value="banana"> Banana</label> 6 <input type="submit" value="Submit"> 7</form> 8
  • Radio Buttons: Group choices with <input type="radio"> for single selection.

Forms - Checkboxes

1<!-- Checkboxes --> 2<form action="#"> 3 <p>Select your interests:</p> 4 <label><input type="checkbox" name="interest" value="coding"> Coding</label> 5 <label><input type="checkbox" name="interest" value="music"> Music</label> 6 <input type="submit" value="Submit"> 7</form>
  • Checkboxes: Allow multiple selections with <input type="checkbox">.

Forms - Select Dropdown

1<!-- Select Dropdown --> 2<form action="#"> 3 <label for="country">Choose a country:</label> 4 <select id="country" name="country"> 5 <option value="usa">USA</option> 6 <option value="canada">Canada</option> 7 <option value="uk">UK</option> 8 </select> 9 <input type="submit" value="Submit"> 10</form> 11
  • Select Dropdown: Create drop-down menus with <select> and <option>.

Forms - Textarea

1<!-- Textarea --> 2<form action="#"> 3 <label for="comments">Comments:</label> 4 <textarea id="comments" name="comments" rows="4" cols="50"></textarea> 5 <input type="submit" value="Submit"> 6</form>
  • Textarea: Provide space for longer text input using <textarea>.

Forms - Multiple Input Types

1<!-- Multiple Input Types --> 2<form action="#"> 3 <label for="number">Number:</label> 4 <input type="number" id="number" name="number" min="1" max="10"> 5 <label for="date">Date:</label> 6 <input type="date" id="date" name="date"> 7 <label for="range">Range:</label> 8 <input type="range" id="range" name="range" min="0" max="100"> 9 <label for="color">Color:</label> 10 <input type="color" id="color" name="color"> 11 <input type="submit" value="Submit"> 12</form>
  • Varied Input Types: Include number, date, range, and color for specialized inputs.

Forms - File Upload

1<!-- File Upload --> 2<form action="#" method="post" enctype="multipart/form-data"> 3 <label for="file">Upload a file:</label> 4 <input type="file" id="file" name="file"> 5 <input type="submit" value="Submit"> 6</form>
  • File Upload: Use <input type="file"> with enctype="multipart/form-data" in the form.

Line Break - Horizontal Rule

1<!-- Basic Line Break --> 2<p>This is the first line.<br>This is the second line.</p> 3 4<!-- Multiple Line Breaks --> 5<p>This is the first paragraph.<br><br><br>This is the third paragraph.</p> 6 7<!-- Horizontal Rule --> 8<hr> 9 10<!-- Horizontal Rule with Attributes --> 11<hr width="50%" size="3" color="red"> 12 13<!-- Combining br and hr --> 14<p>Here's some text.<br> 15 <hr> 16 And here's more text after a line break and a horizontal rule. 17</p> 18
  • Line Break <br>: Adds a single line break in the text flow, for new lines without paragraph separation.
  • Multiple <br>s: Can be used consecutively to create more vertical space.
  • Horizontal Rule <hr>: Creates a thematic break or a line in the document, visually separating content.
  • HR Attributes: Although less common now, <hr> can use attributes like width, size, and color for basic styling. CSS is preferred for modern use.

Div (Division Element)

1<!-- Basic Div Usage --> 2<div> 3 This is a simple div for block-level content. 4</div> 5 6<!-- Div with Class for Styling --> 7<div class="box blue-background"> 8 This div uses a class for background color styling. 9</div> 10 11<!-- Div with ID --> 12<div id="unique-div" class="box"> 13 This div has an ID for unique targeting or JavaScript interaction. 14</div> 15 16<!-- Nested Divs --> 17<div class="box"> 18 <div>First nested div.</div> 19 <div>Second nested div.</div> 20</div> 21 22<!-- Div for Sectioning Content --> 23<div class="box"> 24 <h3>Section Title</h3> 25 <p>This div groups related content into a section.</p> 26</div> 27
  • Block-Level Container: <div> is used for block-level layout, creating new lines before and after itself.
  • Styling: Easily styled with CSS through classes or IDs for layout, borders, backgrounds, etc.
  • Unique Targeting: Use id for uniquely identifying a div for specific CSS or JavaScript actions.
  • Nesting: Can contain other <div>s or elements, useful for nested or complex structures.
  • Semantic Container: While not inherently semantic, it can group related content when no specific semantic element exists.
  • Generic Use: A go-to when you need a non-semantic container for custom layouts or when no more specific HTML5 element fits the context.

Span

1<!-- Basic Span Usage --> 2<p>This is a paragraph with some <span>inline text</span>.</p> 3 4<!-- Span for Styling --> 5<p>Here's a <span class="highlight">highlighted</span> word for emphasis.</p> 6 7<!-- Span for Semantic Meaning --> 8<p>Here, <span lang="fr">Bonjour</span> is French for "Hello".</p> 9 10<!-- Span for Errors or Warnings --> 11<p>Input <span class="error">error</span> detected.</p> 12 13<!-- Span for Size Adjustment --> 14<p>This sentence has <span class="small-text">smaller text</span> within it.</p> 15 16<!-- Multiple Spans for Different Effects --> 17<p>This <span class="highlight">highlighted</span> <span class="small-text">small</span> <span class="error">error</span> demonstrates multiple spans.</p> 18 19<!-- Span with Title for Tooltip --> 20<p>Hover over this <span title="This is a tooltip">text</span> for a tooltip.</p> 21 22
  • Inline Element: <span> is used for inline content, affecting only the text it wraps without breaking the flow.
  • Styling: Ideal for applying CSS to small segments of text for effects like color, size, or background changes.
  • Semantic Use: Can denote language changes, technical terms, or other inline semantic distinctions using attributes like lang.
  • Error/Warning: Useful for highlighting errors or warnings within text.
  • Tooltips: The title attribute can be used for providing additional info on hover.

Image Element - Img

1<img src="image.jpg" alt="Description of image"> 2 3<!-- Common attributes --> 4<img src="image.jpg" 5 alt="Description" 6 width="300" 7 height="200" 8 loading="lazy" 9 srcset="image-small.jpg 300w, image-large.jpg 600w" 10 sizes="(max-width: 300px) 100vw, 300px"> 11 12<!-- With figure and figcaption --> 13<figure> 14 <img src="image.jpg" alt="Description of image"> 15 <figcaption>Image caption goes here.</figcaption> 16</figure> 17
  • src - Specifies the path to the image.
  • alt - Provides alternative text for accessibility.
  • width - Sets the width of the image.
  • height - Sets the height of the image.
  • loading - Use 'lazy' for performance.
  • srcset - Allows for responsive images by specifying different image sources.
  • sizes - Helps in selecting the appropriate image from srcset based on viewport size.
  • figure - Container for self-contained content like images, illustrations, diagrams, etc.
  • figcaption - Provides a caption or legend for the content within a figure element.
  • Use figure for content that can be moved away from the main flow without affecting the document's meaning.
  • figcaption can be the first or last child within figure.

ARIA Attributes

1<!-- ARIA Live Regions --> 2<div aria-live="polite">Live updates here.</div> 3 4<!-- ARIA Labels --> 5<button aria-label="Close">X</button> 6<input type="text" aria-labelledby="nameLabel" placeholder="Name"> 7<label id="nameLabel">Enter your name:</label> 8 9<!-- ARIA Roles --> 10<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc"> 11 <h2 id="dialogTitle">Dialog Title</h2> 12 <p id="dialogDesc">Dialog description.</p> 13</div> 14 15<!-- ARIA States and Properties --> 16<button aria-expanded="false">Expand Menu</button> 17<div role="tablist"> 18 <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button> 19 <div id="panel1" role="tabpanel" aria-labelledby="tab1">Content for tab 1</div> 20</button> 21 22<!-- ARIA for Form Elements --> 23<input type="checkbox" aria-checked="false" aria-label="Agree to terms"> 24<select aria-required="true"> 25 <option value="option1">Option 1</option> 26</select> 27 28<!-- ARIA for Landmarks --> 29<nav role="navigation" aria-label="Main Menu"> 30 <ul> 31 <li><a href="#home">Home</a></li> 32 </ul> 33</nav> 34 35<!-- ARIA for Dynamic Content --> 36<div role="region" aria-relevant="additions" aria-live="assertive"> 37 Dynamic content will be announced here. 38</div>
  • aria-live - Announces dynamic content changes to screen readers.
  • aria-label/aria-labelledby - Provides an accessible name for elements without visible text.
  • role - Defines the role of an element for assistive technologies, like 'dialog', 'tab', or 'button'.
  • aria-expanded - Indicates if an element is expandable or collapsible.
  • aria-selected - Marks the current item as selected within a set.
  • aria-controls - Identifies one or more elements controlled by another.
  • aria-checked - Indicates the state of checkboxes or similar toggles.
  • aria-required - Specifies that user input is mandatory for an element before form submission.
  • aria-relevant - Determines what types of changes in a live region are to be announced.
  • aria-assertive - Used with aria-live for immediate announcement of changes.
  • ARIA should enhance or repair native semantics, not replace them.