sgrant/wgu-d277
1
0
Code Issues Actions Packages Projects Wiki

.

Skylar Grant 2026-06-12 20:05:53 -04:00
parent 420c2ea076
commit b253f8b14f
1 changed files with 111 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
HTML-Notes.md

@ -1 +1,112 @@
# HTML Notes # 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