1# web-page-template
2
3This is a template I use as a starting point when I create new HTML pages.
4
5<table>
6  <tr>
7    <td><img src="sketch.png" alt="A sketch of my standard layout"></td>
8    <td><img src="screenshot.png" alt="A screenshot fo the layout rendered as HTML"></td>
9  </tr>
10</table>
11
12Features:
13
14*   My preferred one-column layout for content, which puts a header/footer at the top and puts the content in the middle.
15*   The standard `<meta>` tags I want on every HTML page.
16*   An example of how to use `<script>` and `<link>` tags to load external files (because I always forget the exact syntax)
17
18## Usage
19
20Copy the contents of `TEMPLATE.html` into a new HTML file.
21
22I have a text expansion snippet in Alfred that inserts this template: when I type `!html`, I get this HTML template.
23
24## Motivation
25
26This layout isn't perfect, but it's pretty good and covers a wide variety of use cases.
27I prefer it to the default browser styles you get in a completely new HTML file.
28
29I used to copy the HTML and CSS from project-to-project, but it was difficult to know what was part of my basic layout, and what was project-specific.
30I also had no canonical definition of this basic layout, and I didn't apply fixes and improvements consistently.
31
32Creating a single template gives me something a canonical version that's easier to copy/paste.
33It's also allowed me to look at this template more carefully, and make sure I'm following best practices.
34
35## Useful reading
36
37*   [The Surprising Truth About Pixels and Accessibility](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/), by Josh Comeau (2023).
38    This helped me understand the difference between pixels and ems/rems for measurements, and when to use which.