.

2026-06-12 20:05:53 -04:00 · 2026-06-12 20:05:53 -04:00 · b253f8b14f
commit b253f8b14f
parent 420c2ea076
1 changed files with 111 additions and 0 deletions
--- a/HTML-Notes.md
+++ b/HTML-Notes.md
@ -1 +1,112 @@
 # HTML Notes
+
+## Core
+```html
+<!DOCTYPE html>
+<html lang="en">
+```
+
+If `DOCTYPE` is omitted, the page is rendered in Quirks mode, using non-standard layout rules and emulating older browsers. Compared to Standards mode which uses the HTML Living Standard.
+
+`<head>` is optional but almost always included.
+
+[W3C HTML Validator](https://validator.w3.org/)
+
+## Basic Elements
+
+### Sections and Headings
+
+A section is a collection of related content created with a `<section>` elements. A heading provides a title for _each_ section. There are six levels of headers/sections. Use headings strictly with the hierarchy of the document, not to achieve title sizes. Each `<section>` should have an associated `<hX>` header.
+
+### Text Formatting
+
+| Element | HTML Example | Semantics |
+| ------- | ------------ | --------- |
+em | `<em>emphasis</em>` | Emphasized text
+cite | `<cite>cite</cite>` | Title of a work
+strong | `<strong>strong</strong>` | Important text
+mark | `<mark>mark</mark>` | Marked or highlighted text
+var | `<var>variable</var>` | Definition of a variable in a computer program
+kbd | `<kbd>keyboard</kbd>` | Keyboard input
+code | `<code>code</code>` | Computer code
+samp | `<samp>sample</samp>` | Sample output from a computer
+b | `<b>bold</b>` | Bold text
+i | `<i>italic</i>` | Text of an alternate voice or word from another language
+u | `<u>underline</u>` | Text that is rendered differently from normal text
+
+## Comments
+
+Cannot be nested.
+
+## Lists
+
+### Unordered
+
+```html
+<ul> <!-- optionally add css property style="list-style-type:[square|lower-greek]">
+    <li>list item one</li>
+    <li>list item two</li>
+</ul>
+```
+
+### Ordered
+
+```html
+<ol type="A"> <!-- Or "a", "1", "I", or "i" -->
+    <li>list item one</li>
+    <li>list item two</li>
+</ol>
+```
+
+## Tables
+
+Headers (`<th>`) can be applied to both columns and rows, and optionally can be tagged with the `scope` attribute to improve accessibility (`<th scope="[col|row]>`)
+
+Cell spanning is accomplished with the `colspan` and `rowspan` attributes applied to `td` and `th` elements.
+
+## Images
+
+Required attributes:
+* `src="xyz.jpg"` - URL of the image file
+* `alt="Description of image"` - text description to use as an alternative to displaying the image
+
+Optional attributes:
+* `width` - self explanatory
+* `height` - ditto
+* If only `width` or `height` are included, the aspect ratio will be maintained, if both are provided then they will be strictly adhered to, stretching as needed.
+
+### Favicon
+
+Any format and any size. PNG is common due to transparency.
+
+```html
+<head>
+    <link rel="icon" href="favicon.png">
+    ...
+```
+
+## Links
+
+`<a>` is an **anchor** element. 
+
+### Section Links
+
+A URL can point to a section or ***fragment*** of a document by adding a hash tag and a fragment identifier at the end of the URL. Ex. https://en.wikipedia.org/wiki/Computer_science#History
+
+Adding the ***id attribute*** to any element creates a fragment identifier.
+
+ID value rules:
+
+* Any characters except whitespace
+* Cannot start with a number
+* Is case sensitive
+* Must be unique in the document
+* Best practice is start with a letter and use only letters, digits, dashes, and underscores.
+
+### Target Attribute
+
+Indicates how the browser should display the link when clicked.
+
+* `_self` is the default and will open in the same tab or window
+* `_blank` will open in a new tab or window
+