learn.fttgsolutions.com · Cheat Sheets
Structure. Semantics. Content.
| <!DOCTYPE> | <!DOCTYPE html> | Must be the very first line — tells the browser this is an HTML5 document. |
| <html> | <html lang="en">...</html> | Root element that wraps all page content. Set lang for accessibility and SEO. |
| <head> | <head>...</head> | Contains metadata, title, styles, and scripts — nothing visible on the page. |
| <body> | <body>...</body> | Contains all visible page content. |
| <title> | <title>Page Title</title> | Sets the text shown in the browser tab and used by search engines. |
| <meta charset> | <meta charset="UTF-8"> | Declares character encoding. UTF-8 supports all languages and symbols. |
| <meta viewport> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Makes the page scale correctly on mobile devices. |
| <!-- --> | <!-- this is a comment --> | HTML comment — not displayed in the browser, useful for notes in your code. |
| <p> | <p>Paragraph text.</p> | Defines a paragraph. Browsers add space above and below. |
| <br> | <br> | Line break — moves content to the next line without starting a new paragraph. |
| <hr> | <hr> | Horizontal rule — draws a thematic dividing line across the page. |
| <strong> | <strong>Important text</strong> | Bold text with semantic importance — screen readers emphasise it. |
| <b> | <b>Bold text</b> | Bold text for stylistic purposes only, no semantic meaning. |
| <em> | <em>Emphasised text</em> | Italic text with semantic emphasis — screen readers stress it. |
| <i> | <i>Italic text</i> | Italic text for stylistic purposes — used for technical terms, foreign words. |
| <u> | <u>Underlined text</u> | Underline text. Avoid for links — users may confuse it with a hyperlink. |
| <mark> | <mark>Highlighted text</mark> | Highlight text as if with a marker pen — yellow background by default. |
| <del> | <del>Deleted text</del> | Strikethrough text representing removed content. |
| <ins> | <ins>Inserted text</ins> | Underlined text representing newly added content. |
| <small> | <small>Fine print</small> | Renders text smaller — used for disclaimers, copyright, side comments. |
| <sup> | E = mc<sup>2</sup> | Superscript text — raised above the baseline. Used for exponents and footnotes. |
| <sub> | H<sub>2</sub>O | Subscript text — lowered below the baseline. Used in chemical formulas. |
| <code> | <code>let x = 1</code> | Inline code snippet — displayed in monospace font. |
| <pre> | <pre> indented
text</pre> | Preformatted text — preserves all whitespace and line breaks exactly as written. |
| <kbd> | <kbd>Ctrl</kbd>+<kbd>C</kbd> | Represents keyboard input — usually styled like a key cap. |
| <blockquote> | <blockquote>Quoted text</blockquote> | Block-level quotation — indented by default. Use cite attribute for the source URL. |
| <h1> | <h1>Page Title</h1> | Top-level heading. Use only once per page — critical for SEO and accessibility. |
| <h2> | <h2>Section Title</h2> | Second-level heading for major sections. |
| <h3> | <h3>Subsection</h3> | Third-level heading for subsections within an h2 section. |
| <h4> – <h6> | <h4>...</h4> through <h6>...</h6> | Fourth through sixth level headings. Use hierarchy in order — don't skip levels. |
| <a> | <a href="https://example.com">Link text</a> | Hyperlink — navigates to another page, section, file, or resource. |
| target="_blank" | <a href="url" target="_blank">Open in new tab</a> | Open the link in a new browser tab. Add rel="noopener" for security. |
| Email link | <a href="mailto:hi@example.com">Email us</a> | Opens the user's default email client with the address pre-filled. |
| Phone link | <a href="tel:+1234567890">Call us</a> | Dials the number on mobile devices when tapped. |
| Anchor link | <a href="#section-id">Jump to section</a> | Scrolls to an element on the same page with the matching id. |
| rel="noopener" | <a href="url" target="_blank" rel="noopener noreferrer"> | Prevents the new tab from accessing the opener page — important for security. |
| <img> | <img src="photo.jpg" alt="Description" width="400" height="300"> | Embeds an image. Always include alt text for accessibility. |
| loading="lazy" | <img src="photo.jpg" loading="lazy" alt="..."> | Defer loading the image until it's near the viewport — improves page speed. |
| <figure> | <figure>
<img src="photo.jpg" alt="...">
<figcaption>Caption</figcaption>
</figure> | Wraps an image with an optional caption. Semantically links the image and its description. |
| <picture> | <picture>
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="...">
</picture> | Serves different image formats or sizes based on the browser and screen. |
| <video> | <video controls width="100%">
<source src="video.mp4" type="video/mp4">
</video> | Embeds a video. The controls attribute shows play/pause/volume UI. |
| <audio> | <audio controls src="audio.mp3">Fallback</audio> | Embeds an audio player. Add controls to show the browser's default UI. |
| <iframe> | <iframe src="https://example.com" title="Example" width="600" height="400"></iframe> | Embeds another web page inside the current one. Always include a title. |
| <canvas> | <canvas id="myCanvas" width="500" height="300"></canvas> | A blank drawing surface — graphics are rendered onto it using JavaScript. |
| <div> | <div class="container">...</div> | Generic block-level container with no semantic meaning. Used for layout and styling. |
| <span> | <span class="highlight">text</span> | Generic inline container with no semantic meaning. Used to style part of a text. |
| <header> | <header>...</header> | Page or section header — typically contains logo, nav, or introductory content. |
| <nav> | <nav><ul>...</ul></nav> | Navigation links section — helps screen readers and search engines find the menu. |
| <main> | <main>...</main> | The primary unique content of the page. Only one per page. |
| <article> | <article>...</article> | Self-contained content that could stand alone — blog post, news article, comment. |
| <section> | <section>...</section> | Thematic grouping of content, usually with a heading. |
| <aside> | <aside>...</aside> | Supplementary content tangentially related to the main content — sidebars, callouts. |
| <footer> | <footer>...</footer> | Page or section footer — typically contains copyright, links, or contact info. |
| <details> | <details>
<summary>Click to expand</summary>
Hidden content here.
</details> | Native accordion/disclosure widget. Content is hidden until the user clicks the summary. |
| <table> | <table>...</table> | Defines a data table. Use only for tabular data, not for layout. |
| <thead> | <thead><tr><th>Name</th></tr></thead> | Groups the header row(s) of the table. Repeated when printing on multiple pages. |
| <tbody> | <tbody><tr><td>Data</td></tr></tbody> | Groups the body rows of the table — the main data. |
| <tfoot> | <tfoot><tr><td>Total</td></tr></tfoot> | Groups footer rows — totals, summaries. Rendered last but declared after thead. |
| <tr> | <tr><td>Cell</td></tr> | Defines a table row. |
| <th> | <th scope="col">Column Header</th> | Header cell — bold and centred by default. Use scope="col" or scope="row". |
| <td> | <td>Data cell</td> | Standard data cell. |
| colspan | <td colspan="2">Spans 2 cols</td> | Makes a cell span across multiple columns. |
| rowspan | <td rowspan="3">Spans 3 rows</td> | Makes a cell span across multiple rows. |
| <caption> | <caption>Monthly Sales</caption> | Provides a title for the table — important for accessibility. |
| <ul> | <ul>
<li>Apples</li>
<li>Bananas</li>
</ul> | Unordered (bulleted) list — for items with no meaningful sequence. |
| <ol> | <ol>
<li>First</li>
<li>Second</li>
</ol> | Ordered (numbered) list — for items where sequence matters. |
| <li> | <li>List item</li> | A single item inside a ul or ol. Can contain nested lists. |
| <dl> | <dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl> | Definition list — pairs of terms and their descriptions. Good for glossaries and FAQs. |
| <dt> | <dt>Term</dt> | The term being defined in a description list. |
| <dd> | <dd>The definition of the term.</dd> | The description or definition of the preceding dt term. |
| <form> | <form method="POST" action="/submit">...</form> | Container for form controls. method is GET or POST; action is the server endpoint. |
| <label> | <label for="email">Email</label>
<input id="email" type="email"> | Associates a text label with a form control. Clicking the label focuses the input. |
| <input> | <input type="text" name="username" placeholder="Enter name"> | The most versatile form element — behaviour changes entirely with the type attribute. |
| <textarea> | <textarea name="bio" rows="4" cols="40"></textarea> | Multi-line text input. Set rows and cols or use CSS for sizing. |
| <select> | <select name="city">
<option value="nyc">New York</option>
</select> | Dropdown selection list. Use multiple attribute to allow multiple selections. |
| <option> | <option value="nyc">New York</option> | A selectable item inside a select element. value is what gets submitted. |
| <button> | <button type="submit">Submit</button> | Clickable button. type can be submit (default), reset, or button. |
| <fieldset> | <fieldset>
<legend>Address</legend>
...
</fieldset> | Groups related form fields with an optional border and legend caption. |
| <datalist> | <input list="colours">
<datalist id="colours">
<option value="Red">
</datalist> | Provides autocomplete suggestions for a text input without restricting values. |
| text | <input type="text"> | Single-line text field — the default input type. |
| password | <input type="password"> | Masked text field — characters are hidden as the user types. |
<input type="email"> | Email address field — validates format and shows email keyboard on mobile. | |
| number | <input type="number" min="0" max="100"> | Numeric input with optional min, max, and step constraints. |
| tel | <input type="tel"> | Phone number field — shows numeric keyboard on mobile. |
| url | <input type="url"> | URL input — validates format and shows URL keyboard on mobile. |
| search | <input type="search"> | Search field — may show a clear button and uses search keyboard on mobile. |
| checkbox | <input type="checkbox" name="agree"> | Tick box — allows multiple selections from a group. |
| radio | <input type="radio" name="plan" value="pro"> | Radio button — only one option in a group (same name) can be selected. |
| range | <input type="range" min="0" max="100" step="5"> | Slider for selecting a value within a range. |
| color | <input type="color"> | Color picker that returns a hex value. |
| date | <input type="date"> | Date picker — returns a yyyy-mm-dd value. |
| time | <input type="time"> | Time picker — returns an hh:mm value. |
| datetime-local | <input type="datetime-local"> | Combined date and time picker. |
| file | <input type="file" accept=".jpg,.png"> | File upload control. Use accept to restrict allowed file types. |
| hidden | <input type="hidden" name="token" value="abc"> | Invisible field that submits a value — used for CSRF tokens and tracking. |
| submit | <input type="submit" value="Send"> | Button that submits the form. |
| reset | <input type="reset"> | Button that resets all form fields to their default values. |
| placeholder | placeholder="Enter email…" | Hint text shown inside the input when it is empty. |
| required | required | Form cannot be submitted until this field has a value. |
| disabled | disabled | Prevents user interaction — the field's value is not submitted. |
| readonly | readonly | User cannot edit the value, but it is still submitted with the form. |
| autofocus | autofocus | Automatically focuses this field when the page loads. |
| autocomplete | autocomplete="off" | Controls whether the browser offers to fill in the field automatically. |
| minlength / maxlength | minlength="6" maxlength="20" | Minimum and maximum number of characters allowed in a text field. |
| min / max | min="0" max="100" | Minimum and maximum values for number, range, or date inputs. |
| step | step="5" | The increment for number and range inputs. |
| pattern | pattern="[A-Z]{3}" | Regular expression the value must match for the form to submit. |
| multiple | multiple | Allows the user to select multiple files (file input) or options (select). |
| checked | checked | Pre-selects a checkbox or radio button when the page loads. |
| <script> inline | <script>
console.log('hello')
</script> | Embeds JavaScript directly in the HTML document. |
| <script> external | <script src="app.js" defer></script> | Loads an external JS file. defer runs the script after the HTML is parsed. |
| <style> | <style>
h1 { color: red; }
</style> | Embeds CSS styles directly in the document — best placed in <head>. |
| <link> stylesheet | <link rel="stylesheet" href="style.css"> | Links an external CSS file — the standard way to add styles to a page. |
| <link> favicon | <link rel="icon" href="favicon.ico"> | Sets the favicon shown in the browser tab. |
| defer | <script src="app.js" defer></script> | Script runs after the HTML is fully parsed — keeps the page fast. |
| async | <script src="app.js" async></script> | Script downloads in parallel and runs as soon as it's ready, without waiting for parsing. |
| description | <meta name="description" content="Page summary here."> | Short description of the page shown in search engine results. |
| canonical | <link rel="canonical" href="https://example.com/page"> | Tells search engines the preferred URL for this page — avoids duplicate content. |
| robots | <meta name="robots" content="index, follow"> | Instructs search engine crawlers whether to index and follow links on this page. |
| og:title | <meta property="og:title" content="Page Title"> | Title shown when the page is shared on social media (Open Graph). |
| og:description | <meta property="og:description" content="Description."> | Description shown in social media previews. |
| og:image | <meta property="og:image" content="https://example.com/img.jpg"> | Image shown when the page is shared on Facebook, LinkedIn, etc. |
| og:url | <meta property="og:url" content="https://example.com/page"> | Canonical URL for social sharing. |
| twitter:card | <meta name="twitter:card" content="summary_large_image"> | Controls how the page appears when shared on Twitter/X. |
| twitter:image | <meta name="twitter:image" content="https://example.com/img.jpg"> | Image shown in Twitter/X card previews. |