HTML Cheatsheet
Below are some reference materials for HTML elements! Items
include semantic markup, HTML tables, and more!
Semantic HTML Template
<html lang="en">
<head>
<title>Title<title>
</head>
<body>
<header>
Logo, title, navigation
<nav>
Primary and secondary menus but ever nest navs
</nav>
</header>
<section>
Related grouping of semantic meaning
<article>
Self-contained content
</article>
<article>
Would still make sense if all other content removed
<aside>
<blockquote>
Related to main but outside the main flow
</blockquote>
</aside>
</article>
</section>
<footer>
Copyright, contact, links
</footer>
</body>
</html>
This template ensures that your HTML document is written with the best practices in mind. Each section uses the element that best represents what it's purpose is. This doubles as a way to increase your website's accessibility and SEO, since screen readers and search engine crawlers will be able to understand your site much more!
HTML Table Template
<table>
<caption>Table Caption</caption>
<colgroup>
<col>
<col span="2" class="left-two">
<col span="2" class="right-two">
</colgroup>
<thead>
<tr>
<th></th>
<th colspan="2">Left Two</th>
<th colspan="2">Right Two</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">Top Two</th>
<td>Body 1,1</td>
<td>Body 1,2</td>
<td>Body 1,3</td>
<td>Body 1,4</td>
</tr>
<tr>
<td>Body 2,1</td>
<td>Body 2,2</td>
<td>Body 2,3</td>
<td>Body 2,4</td>
</tr>
<tr>
<th rowspan="2">Bottom Two</th>
<td>Body 3,1</td>
<td>Body 3,2</td>
<td>Body 3,3</td>
<td>Body 3,4</td>
</tr>
<tr>
<td>Body 4,1</td>
<td>Body 4,2</td>
<td>Body 4,3</td>
<td>Body 4,4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
This template creates a table with some filler info in each cell.
This is highly customizable, allowing the user to expand the
table, remove columns/rows, and more! It's here in case you need a
reminder on how to make tables, or you're strapped for time and
need a head start!
CSS Cheatsheet
Below are some reference materials for CSS! This
section has a plethora of useful CSS properties and concepts to get a
quick refresher!
CSS definitions
The Box Model
Defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page. MDN
CSS Margin Collapse
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins. MDN
Centering Horizontally
To center an element horizontally, use margin: auto;. This method, while older, centers the element within its parent container IF the width is less than the width of the parent container.
Floating Elements
The float property allows you to position an element as far LEFT or RIGHT as possible. This is best used for things like wrapping text around and image.
Clearing Floated Elements
When floating an element, it can cause other elements to "bump" into one another, a typically unwanted behavior. The clear property specifies how elements should behave when they bump into each other!
| Property | Description | Values |
|---|---|---|
| box-sizing | Controls the type of box model the browser will use. | content-box, border-box |
| margin | Controls the space on the outside of the box. |
up, down, left, right margin: 0 auto; (centers the element horizontally in its container) |
| overflow | Instructs the browser on about to handle overflowing content in an element. | hidden, scroll, visible (DEFAULT) |
| padding | Controls the space between the content and its border. | up, down, left, right |
| position | Controls how the browser positions elements in the web page. | static (DEFAULT), relative, absolute, fixed, sticky |
| display | Controls whether or not an HTML element takes up the entire line, shares the space, or a mix of the two. Some elements have a default of inline, while others have a default of block. | inline, inline-block, block |