html
#define html: \
I-----------------------------------------------------------\
I-----------------------------------------------------------\
I-----------------------------------------------------------\
I /$$ /$$ /$$$$$$$$ /$$ /$$ /$$ \
I | $$ | $$|__ $$__/| $$$ /$$$| $$ \
I | $$ | $$ | $$ | $$$$ /$$$$| $$ \
I | $$$$$$$$ | $$ | $$ $$/$$ $$| $$ \
I | $$__ $$ | $$ | $$ $$$| $$| $$ \
I | $$ | $$ | $$ | $$\ $ | $$| $$ \
I | $$ | $$ | $$ | $$ \/ | $$| $$$$$$$$ \
I |__/ |__/ |__/ |__/ |__/|________/ \
I-----------------------------------------------------------\
I-----------------------------------------------------------\
I-----------------------------------------------------------I
SGML
• "HyperText Markup Language"
• mark up language
• a program that can display rendered html documents is a browser
( stricter definitions would require handling the HTTP protocol too)
• to customize the looks of a HTML document, a stylesheet language must be used;
it is either provided as a link to the external resource or embedded inside a <style>;
the only stylesheet language supported natively by browsers is CSS;
there are other stylesheet languages which transpile to CSS
• to customize the behaviour of a HTML document, a scripting language must be used;
it is either provided as a link to an external resource or embedded inside a <script>;
the only scripting language supported natively by browsers is Javascript;
there are other scripting languages which transpile to Javascript
• your only realistic option to write a website
• bloated by legacy features
• features introduced at different periods often interact poorly
• was designed around the idea of well-structured, vertical documents;
however web-design has surpassed these concepts,
and putting lots of stress on HTML's short comings;
this is evident when developing (single) screen oriented applications,
complex structures or dynamic and/or responsive layouts
COMMENTS: COMMENTS:
<!-- [comment] --> : multiline html comment; applies only in a html context
"\
According to specifications, HTML comments are expressed as SGML declarations. \
Declaration is special markup that begins with <! and ends with >, such as \
<!DOCTYPE ...>, that may contain comments between a pair of -- delimiters. HTML \
comments are \"empty declarations\", SGML declarations without any non-comment text. \
Therefore, <!--foo--> is a valid comment, and so is <!--one-- --two-->, but \
<!--1--2--> is not. \
\
On the other hand, most HTML writers don’t perceive comments as anything other \
than text delimited with <!-- and -->, which is not quite the same. For example, \
something like <!------------> works as a valid comment as long as the number of \
dashes is a multiple of four (!). If not, the comment technically lasts until the \
next --, which may be at the other end of the document. Because of this, many \
popular browsers completely ignore the specification and implement what users have \
come to expect: comments delimited with <!-- and -->. \
" - man wget
TAGS: TAGS:
• inherited from SGML
• uses SGML-style attributes
• both unpaired and paired tags are supported
• self-closing tags are allowed to omit the trailing '\\' character
• non-standard tags are interpreted correctly,
to the extend of working within CSS rules and
being usable inside JS
• a list of tags and their description is provided further BELOW
<p style="color: red;">
This is a paragraph,<br>
with a forced line break.
</p>
ATTRIBUTES: ATTRIBUTES:
• inherited from SGML
• some tags are universal
• some attributes are tag specific, they will not be discussed here
id="<string>" : adds a unique identifier to an element
used for referring to a set of elements in CSS or JS
class="<string>" : adds a class to the element;
used for referring to a set of elements in CSS or JS
style="[css]" : applies CSS to the element inline;
generally not a good idea
— some HTML tags are deprecated and map to CSS attributes, such as:
font
align
border
bgcolor
nowrap
TEXT: TEXT:
• may exist inside a tag
• the contents are arbitrary as long as it doesnt contain special characters
• unbreakable by default, ie. it will never be split;
even if that means that it overflows its container
or the page must be expanded horizontally
CHARACTERS: CHARACTERS:
{
special-character: & <identifier> ;
identifier: # <NUMBER|NAME>
}
• notation to express special characters inside text
TLDR:
: nonbreaking space ("I am" will always go to the same line)
: ?!
: tab
+------------+------------+-------------+-----------------------------------+
| Character | Number | Name | Description |
+------------+------------+-------------+-----------------------------------+
| " | " | " | quotation mark |
| ' | ' | ' | apostrophe |
| & | & | & | ampersand |
| < | < | < | less-than |
| > | > | > | greater-th |
| Π| Π| Π| capital ligature OE |
| œ | œ | œ | small ligature oe |
| Š | Š | Š | capital S with caron |
| š | š | š | small S with caron |
| Ÿ | Ÿ | Ÿ | capital Y with diaeres |
| ƒ | ƒ | ƒ | f with hook |
| ˆ | ˆ | ˆ | modifier letter circumflex accent |
| ˜ | ˜ | ˜ | small tilde |
| N/A | | | en space |
| N/A | | | em space |
| N/A | | | thin space |
| N/A | | | zero width non-joiner |
| N/A | | | zero width joiner |
| N/A | | | left-to-right mark |
| N/A | | | right-to-left mark |
| – | – | – | en dash |
| — | — | — | em dash |
| ‘ | ‘ | ‘ | left single quotation mark |
| ’ | ’ | ’ | right single quotation mark |
| ‚ | ‚ | ‚ | single low-9 quotation mark |
| “ | “ | “ | left double quotation mark |
| ” | ” | ” | right double quotation mark |
| „ | „ | „ | double low-9 quotation mark |
| † | † | † | dagger |
| ‡ | ‡ | ‡ | double dagger |
| • | • | • | bullet |
| … | … | … | horizontal ellipsis |
| ‰ | ‰ | ‰ | per mille |
| ′ | ′ | ′ | minutes |
| ″ | ″ | ″ | seconds |
| ‹ | ‹ | ‹ | single left angle quotation |
| › | › | › | single right angle quotation |
| ‾ | ‾ | ‾ | overline |
| € | € | € | euro |
| ™ | ™ | ™ | trademark |
| ← | ← | ← | left arrow |
| ↑ | ↑ | ↑ | up arrow |
| → | → | → | right arrow |
| ↓ | ↓ | ↓ | down arrow |
| ↔ | ↔ | ↔ | left right arrow |
| ↵ | ↵ | ↵ | carriage return arrow |
| ⌈ | ⌈ | ⌈ | left ceiling |
| ⌉ | ⌉ | ⌉ | right ceiling |
| ⌊ | ⌊ | ⌊ | left floor |
| ⌋ | ⌋ | ⌋ | right floor |
| ◊ | ◊ | ◊ | lozenge |
| ♠ | ♠ | ♠ | spade |
| ♣ | ♣ | ♣ | club |
| ♥ | ♥ | ♥ | heart |
| ♦ | ♦ | ♦ | diamondan |
| ∀ | ∀ | ∀ | for all |
| ∂ | ∂ | ∂ | part |
| ∃ | ∃ | ∃ | exists |
| ∅ | ∅ | ∅ | empty |
| ∇ | ∇ | ∇ | nabla |
| ∈ | ∈ | ∈ | isin |
| ∉ | ∉ | ∉ | notin |
| ∋ | ∋ | ∋ | ni |
| ∏ | ∏ | ∏ | prod |
| ∑ | ∑ | ∑ | sum |
| − | − | − | minus |
| ∗ | ∗ | ∗ | lowast |
| √ | √ | √ | square root |
| ∝ | ∝ | ∝ | proportional to |
| ∞ | ∞ | ∞ | infinity |
| ∠ | ∠ | ∠ | angle |
| ∧ | ∧ | ∧ | and |
| ∨ | ∨ | ∨ | or |
| ∩ | ∩ | ∩ | cap |
| ∪ | ∪ | ∪ | cup |
| ∫ | ∫ | ∫ | integral |
| ∴ | ∴ | ∴ | therefore |
| ∼ | ∼ | ∼ | similar to |
| ≅ | ≅ | ≅ | congruent to |
| ≈ | ≈ | ≈ | almost equal |
| ≠ | ≠ | ≠ | not equal |
| ≡ | ≡ | ≡ | equivalent |
| ≤ | ≤ | ≤ | less or equal |
| ≥ | ≥ | ≥ | greater or equal |
| ⊂ | ⊂ | ⊂ | subset of |
| ⊃ | ⊃ | ⊃ | superset of |
| ⊄ | ⊄ | ⊄ | not subset of |
| ⊆ | ⊆ | ⊆ | subset or equal |
| ⊇ | ⊇ | ⊇ | superset or equal |
| ⊕ | ⊕ | ⊕ | circled plus |
| ⊗ | ⊗ | ⊗ | circled times |
| ⊥ | ⊥ | ⊥ | perpendicular |
| ⋅ | ⋅ | ⋅ | dot operator |
| Α | Α | Α | Alpha |
| Β | Β | Β | Beta |
| Γ | Γ | Γ | Gamma |
| Δ | Δ | Δ | Delta |
| Ε | Ε | Ε | Epsilon |
| Ζ | Ζ | Ζ | Zeta |
| Η | Η | Η | Eta |
| Θ | Θ | Θ | Theta |
| Ι | Ι | Ι | Iota |
| Κ | Κ | Κ | Kappa |
| Λ | Λ | Λ | Lambda |
| Μ | Μ | Μ | Mu |
| Ν | Ν | Ν | Nu |
| Ξ | Ξ | Ξ | Xi |
| Ο | Ο | Ο | Omicron |
| Π | Π | Π | Pi |
| Ρ | Ρ | Ρ | Rho |
| N/A | undefined | N/A | Sigmaf |
| Σ | Σ | Σ | Sigma |
| Τ | Τ | Τ | Tau |
| Υ | Υ | Υ | Upsilon |
| Φ | Φ | Φ | Phi |
| Χ | Χ | Χ | Chi |
| Ψ | Ψ | Ψ | Psi |
| Ω | Ω | Ω | Omega |
| α | α | α | alpha |
| β | β | β | beta |
| γ | γ | γ | gamma |
| δ | δ | δ | delta |
| ε | ε | ε | epsilon |
| ζ | ζ | ζ | zeta |
| η | η | η | eta |
| θ | θ | θ | theta |
| ι | ι | ι | iota |
| κ | κ | κ | kappa |
| λ | λ | λ | lambda |
| μ | μ | μ | mu |
| ν | ν | ν | nu |
| ξ | ξ | ξ | xi |
| ο | ο | ο | omicron |
| π | π | π | pi |
| ρ | ρ | ρ | rho |
| ς | ς | ς | sigmaf |
| σ | σ | σ | sigma |
| τ | τ | τ | tau |
| υ | υ | υ | upsilon |
| φ | φ | φ | phi |
| χ | χ | χ | chi |
| ψ | ψ | ψ | psi |
| ω | ω | ω | omega |
| ϑ | ϑ | ϑ | theta symbol |
| ϒ | ϒ | ϒ | upsilon symbol |
| ϖ | ϖ | ϖ | pi symbol |
| À | À | À | capital a, grave accent |
| Á | Á | Á | capital a, acute accent |
| Â | Â | Â | capital a, circumflex accent |
| Ã | Ã | Ã | capital a, tilde |
| Ä | Ä | Ä | capital a, umlaut mark |
| Å | Å | Å | capital a, ring |
| Æ | Æ | Æ | capital ae |
| Ç | Ç | Ç | capital c, cedilla |
| È | È | È | capital e, grave accent |
| É | É | É | capital e, acute accent |
| Ê | Ê | Ê | capital e, circumflex accent |
| Ë | Ë | Ë | capital e, umlaut mark |
| Ì | Ì | Ì | capital i, grave accent |
| Í | Í | Í | capital i, acute accent |
| Î | Î | Î | capital i, circumflex accent |
| Ï | Ï | Ï | capital i, umlaut mark |
| Ð | Ð | Ð | capital eth, Icelandic |
| Ñ | Ñ | Ñ | capital n, tilde |
| Ò | Ò | Ò | capital o, grave accent |
| Ó | Ó | Ó | capital o, acute accent |
| Ô | Ô | Ô | capital o, circumflex accent |
| Õ | Õ | Õ | capital o, tilde |
| Ö | Ö | Ö | capital o, umlaut mark |
| Ø | Ø | Ø | capital o, slash |
| Ù | Ù | Ù | capital u, grave accent |
| Ú | Ú | Ú | capital u, acute accent |
| Û | Û | Û | capital u, circumflex accent |
| Ü | Ü | Ü | capital u, umlaut mark |
| Ý | Ý | Ý | capital y, acute accent |
| Þ | Þ | Þ | capital THORN, Icelandic |
| ß | ß | ß | small sharp s, German |
| à | à | à | small a, grave accent |
| á | á | á | small a, acute accent |
| â | â | â | small a, circumflex accent |
| ã | ã | ã | small a, tilde |
| ä | ä | ä | small a, umlaut mark |
| å | å | å | small a, ring |
| æ | æ | æ | small ae |
| ç | ç | ç | small c, cedilla |
| è | è | è | small e, grave accent |
| é | é | é | small e, acute accent |
| ê | ê | ê | small e, circumflex accent |
| ë | ë | ë | small e, umlaut mark |
| ì | ì | ì | small i, grave accent |
| í | í | í | small i, acute accent |
| î | î | î | small i, circumflex accent |
| ï | ï | ï | small i, umlaut mark |
| ð | ð | ð | small eth, Icelandic |
| ñ | ñ | ñ | small n, tilde |
| ò | ò | ò | small o, grave accent |
| ó | ó | ó | small o, acute accent |
| ô | ô | ô | small o, circumflex accent |
| õ | õ | õ | small o, tilde |
| ö | ö | ö | small o, umlaut mark |
| ø | ø | ø | small o, slash |
| ù | ù | ù | small u, grave accent |
| ú | ú | ú | small u, acute accent |
| û | û | û | small u, circumflex accent |
| ü | ü | ü | small u, umlaut mark |
| ý | ý | ý | small y, acute accent |
| þ | þ | þ | small thorn, Icelandic |
| ÿ | ÿ | ÿ | small y, umlaut mark |
| N/A | | | non-breaking space |
| ¡ | ¡ | ¡ | inverted exclamation mark |
| ¢ | ¢ | ¢ | cent |
| £ | £ | £ | pound |
| ¤ | ¤ | ¤ | currency |
| ¥ | ¥ | ¥ | yen |
| ¦ | ¦ | ¦ | broken vertical bar |
| § | § | § | section |
| ¨ | ¨ | ¨ | spacing diaeresis |
| © | © | © | copyright |
| ª | ª | ª | feminine ordinal indicator |
| « | « | « | angle quotation mark (left) |
| ¬ | ¬ | ¬ | negation |
| N/A | | | soft hyphen |
| ® | ® | ® | registered trademark |
| ¯ | ¯ | ¯ | spacing macron |
| ° | ° | ° | degree |
| ± | ± | ± | plus-or-minus |
| ² | ² | ² | superscript 2 |
| ³ | ³ | ³ | superscript 3 |
| ´ | ´ | ´ | spacing acute |
| µ | µ | µ | micro |
| ¶ | ¶ | ¶ | paragraph |
| · | · | · | middle dot |
| ¸ | ¸ | ¸ | spacing cedilla |
| ¹ | ¹ | ¹ | superscript 1 |
| º | º | º | masculine ordinal indicator |
| » | » | » | angle quotation mark (right) |
| ¼ | ¼ | ¼ | fraction 1/4 |
| ½ | ½ | ½ | fraction 1/2 |
| ¾ | ¾ | ¾ | fraction 3/4 |
| ¿ | ¿ | ¿ | inverted question mark |
| × | × | × | multiplication |
| ÷ | ÷ | ÷ | division |
+------------+------------+-------------+-----------------------------------+
LAYOUT: LAYOUT:
• every element has a layout which determines how it will be displayed
• raw HTML uses only 3 types of layout, however many more are introduced with CSS
Metadata: Metadata:
• doesnt have a hitbox
• not physically represented
• has no affect on the layout
• used for seemless actions {including}
{ <link rel="stylesheet" href="css.css">
┌─────Page─────┐
there --> │ │
│ │
│ │
│ │
│ │
└──────────────┘
}
— elements:
Block: Block:
• fills the width of its parent
• as high as its contents
— the screen can be visualized as a stack of blocks, optionally of different height:
#####
#####
#####
#####
#####
#####
#####
#####
• forces itself to the beginning of the line
• forces elements after it to a new line
• shows how HTML was designed in a line-oriented manner,
similar in philosophy to a terminal
{ <p syle="background:red">
Text
</p>
<p syle="background:red">
Text
</p>
┌─────Page─────┐
│ Text │
│ Text │
│ │
│ │
│ │
└──────────────┘
}
Inline: Inline:
• as high as its contents
• as wide as its contents
• CANNOT contain any block elements
• if an element which is inline by default, has its display changed with css to "block"
it shall still NOT contain block elements,
but generally the browser handles it OK regardless
• their width and height CANNOT be set
• their top and bottom paddings are not respected; see AT "/CSS/Box modell/Padding"
{ <a syle="background:blue">
i
</a>
<a syle="background:Blue">
i
</a>
┌─────Page─────┐
│ i i │
│ │
│ │
│ │
│ │
└──────────────┘
}
— Block with inline:
{ <a syle="background:blue">
i
</a>
<p syle="background:red">
Text
</p>
<a syle="background:Blue">
i
</a>
┌─────Page─────┐
│ i │
│ Text │
│ i │
│ │
│ │
└──────────────┘
}
STRUCTURE: STRUCTURE:
<!DOCTYPE html>
<html>
<head>
<!-- metadata tags -->
</head>
<body>
<!-- content tags -->
</body>
</html>
Doctype:
<!DOCTYPE html>
• the magick header (metadata) that should stand at the beginning of every html file
• NOT an html tag
• could reference an external DTD resource, but this is rare and unrecommended
HTML:
<html>[...]</html>
• the element highest up the hierarchy
• all elements (must) exist inside of it
• "root element"
Head:
<head>[...]</head>
• a container for metadata (data about data)
• metadata typically defines the documents title, character set, style, scripts, etc.
• its placed inside the <html> tag next to (preferably above) the <body> tag
Attributes:
dir="[ltr||rtl]" : specifes which way the text should flow
lang="[country code]" : specifes language of the page
Body:
<body>[...]</body>
• has a margin by default
TAG_TYPES: TAG_TYPES:
Legend: Legend:
[pairedness]; [display]; "[meaing]"
○ [pairedness]
• "pair" in the description signals that *this is paired
<exaple> : this is an exaple; pair
• if *this is unpaired, the field is left empty
>"inline" signals that the tag will insert a new line in the document;
considering that offically and by common sense inline should signal the
oppisite case, this convention is indeed deeply counter intuitive, however
marking the tags which add a '\n' is better logistically as theres less of those
<html> : pair; block
<head> : pair; metadata
<body> : pair; block
Head: Head:
• elements which are only valid inside the <head>
<title> [string] </title> : sets title of the tab to <string>
<style> [CSS] </style> : specifies CSS to be rendered
<meta [options]> : adds metadata
charset="[encoding]" : sets character set to [encoding]
Body: Body:
• elemets which are only valid inside the <body>
<p> : pair; block; paragraph
<div> : pair; block; division or a section; useful for adding custom stuff
<a> : pair; inline; achor; intended for hyperlinks
<a href="[url||path]"> [] </a> : adds hyperlink; blue and underlined by default
<span> : pair; inline; intended for usage when no other tag is appropriate
Text_style: Text_style:
<b> : pair; metadata; "bold"
<u> : pair; metadata; "underlined"
<i> : pair; metadata; "italics"
<strong> : pair; metadata; "strong"; like <b>
<em> : pair; metadata; "emphesised (like <i>)"
<strike> : pair; metadata; "strikethrough"
<sup> : pair; metadata; "superscript"
<tt> : pair; metadata; monospaced font
<h[int 1-6]> : pair; metadata; header sizes 1-6; the larger the int the smaller the font
<small> : pair; metadata; one font size smaller than the rest of the text surrounding it
<big> : pair; metadata; one font size larger than the rest of the text surrounding it
<font> : allows font editing with attributes
○ attributes
size
color
Text_placement: Text_placement:
</br> : new line(=='\n'); inline
<left> : aligns text to left; pair
<center> : centers text; pair
<right> : aligns text to right; pair
<hr> : horizontal line in new line; inline
<pre> : preserve original formating (enters, etc.); practically a raw string; pair
lists:
<ul> : unordered list; all items are marked the same way; pair
<ol> : ordered list; all items are marked with an id; pair
<li> : list item; used inside a list tag { <ul>; <ol>}; pair; inline
attributes:
type : type of ordering symbols
i : roman numbers
Media: Media:
<img src="[url||path]" alt="" width="<int>" height="<int>"> : inserts image
<video> src="[url||path]" type="video/mp4" </video> : inserts video (full size)
<style></style> : adds inline css
<?php [code] ?> : adds inline php code; its server side
<script> [code] </script> : adds inline javascript code; its client side
Graphics:
<svg>[SVG]</svg>
<canvas></canvas>
Forms: Forms:
<form> [...] </form>
○ atrributes
accept-charset
action
autocomplete
enctype
method
post
name
novalidate
rel
target
○ sub elements
<input>
<textarea>
<button> : clickable button
○ atrributes
"reset" : empties out the form
"submit" : sends <form>
<select>
<option>
<optgroup>
<fieldset>
<label>
<output>
List_by_layout: List_by_layout:
• there are zero guarantees your browsers will actually display them accordingly
○ metadata
<base>
<command>
<data>
<datalist>
<link>
<map>
<meta>
<noscript>
<ruby>
<script>
<style>
<template>
<title>
<wbr>
○ block:
<address>
<article>
<aside>
<blockquote>
<dd>
<details>
<dialog>
<div>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<header>
<hgroup>
<hr>
<li>
<main>
<nav>
<ol>
<p>
<pre>
<section>
<table>
<ul>
○ inline
<a>
<abbr>
<acronym>
<audio>
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<mark>
<meter>
<object>
<output>
<picture>
<progress>
<q>
<s>
<samp>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<textarea>
<time>
<u>
<tt>
<var>
<video>