sgrant/wgu-d277
1
0
Code Issues Actions Packages Projects Wiki
Page: HTML Notes
Pages
HTML Notes Home
3 HTML Notes
Skylar Grant edited this page 2026-06-12 20:30:06 -04:00
Table of Contents

HTML Notes

Core

<!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

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

<ul> <!-- optionally add css property style="list-style-type:[square|lower-greek]">
    <li>list item one</li>
    <li>list item two</li>
</ul>

Ordered

<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.

<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

Special Characters

Entities

An entity is a mechanism for writing special charctyers or symbols in HTML, such as mathematical symbols, characters in most languages, and many other symbols. Many can be specified by name but some must be referred to by decimal or hexadecimal numbers.