diff options
| author | JJ | 2024-09-19 20:26:47 +0000 |
|---|---|---|
| committer | JJ | 2024-09-19 20:26:47 +0000 |
| commit | 0f9b6ec02fe0e2442c0910a44c3547babf2fd769 (patch) | |
| tree | c474f028814da0f6b4ed73e41e97a92840b0d975 /web/html.md | |
| parent | a39e490d1a3d08d96b1b7219f3824efe619a566a (diff) | |
meow
Diffstat (limited to 'web/html.md')
| -rw-r--r-- | web/html.md | 692 |
1 files changed, 570 insertions, 122 deletions
diff --git a/web/html.md b/web/html.md index f385919..f47a0ec 100644 --- a/web/html.md +++ b/web/html.md @@ -33,90 +33,244 @@ There are about XX important tags. Here they all are. ## Style -- [`<b>`](https://developer.mozilla.org/HTML/Element/b) or [`<strong>`](https://developer.mozilla.org/HTML/Element/strong): <b>bold</b> text -- [`<i>`](https://developer.mozilla.org/HTML/Element/i) or [`<em>`](https://developer.mozilla.org/HTML/Element/em): <i>italic</i> text -- [`<s>`](https://developer.mozilla.org/HTML/Element/s): <s>struckthrough</s> text -- [`<u>`](https://developer.mozilla.org/HTML/Element/u): <u>underlined</u> text -- [`<q>`](https://developer.mozilla.org/HTML/Element/q): <q>quoted</q> text -- [`<small>`](https://developer.mozilla.org/HTML/Element/small): <small>small</small> text -- [`<sub>`](https://developer.mozilla.org/HTML/Element/sub): <sub>subtext</sub> -- [`<sup>`](https://developer.mozilla.org/HTML/Element/sup): <sup>supertext</sup> -- [`<code>`](https://developer.mozilla.org/HTML/Element/code): <code>text styled like code</code> - -Some emphasis must be put: these tags are **semantic**. They are not for styling! You have a much more expressive form of styling with CSS! +- [`<b>`][b] or [`<strong>`][strong]: <b>bold</b> text +- [`<i>`][i] or [`<em>`][em]: <i>italic</i> text +- [`<u>`][u]: <u>underlined</u> text +- [`<s>`][s]: <s>struckthrough</s> text +- [`<q>`][q]: <q>quoted</q> text +- [`<small>`][small]: <small>small</small> text +- [`<sub>`][sub]: <sub>sub</sub>text +- [`<sup>`][sup]: <sup>super</sup>text +- [`<code>`][code]: <code>text styled like code</code> +- [`<pre>`][pre]: <pre>preformatted text</pre> + +Some emphasis must be made: these tags are **semantic**. They are not for styling! You have a much more expressive form of styling with CSS! Given the existence of a quote key on most ASCII keyboards, this is not very useful, unless you're a stickler for Unicode quotes. -## Wrappers -These wrappers have no style associated with them, but are *semantically meaningful*. or is that true? they are all `block`, no? +<details> +<summary>default styles</summary> -`<html>` -`<body>` -`<div> </div>` +```css +b, strong { + font-weight: bolder; +} +``` -- [`<h1>, <h2>, <h3>, <h4>, <h5>, <h6>`](https://developer.mozilla.org/HTML/Element/h1) -- [`<p>`](https://developer.mozilla.org/HTML/Element/p) -- [`<pre>`](https://developer.mozilla.org/HTML/Element/pre) -- [`<br/>`](https://developer.mozilla.org/HTML/Element/br) -- [`<hr/>`](https://developer.mozilla.org/HTML/Element/hr) -- [`<span>`](https://developer.mozilla.org/HTML/Element/span) +```css +i, em { + font-style: italic; +} +``` -## Content +```css +u { + text-decoration: underline; +} +``` ```css -<a> +s { + text-decoration: line-through; +} ``` -`<img/>` -`<video>` -`<audio>` -`<track>` -`<canvas>` -`<iframe>` -`<math>` -## Lists +```css +q:before { + content: open-quote; +} + +q:after { + content: close-quote; +} +``` + +```css +small { + font-size: smaller; +} +``` + +```css +sub { + vertical-align: sub; + font-size: smaller; +} +``` -- [`<li value=1>`](https://developer.mozilla.org/HTML/Element/li): - A *list element*. Goes within either `<ul>` or `<ol>`. When within `<ol>`, `value` indicates the list numbering should skip to its value. -- [`<ul>`](https://developer.mozilla.org/HTML/Element/ul): - An *unordered* list. Contains a bunch of `<li>`s. Displayed with bullet points by default. -- [`<ol type="1" start=1 reversed>`](https://developer.mozilla.org/HTML/Element/ol): - An *ordered* list. Contains a bunch of `<li>`s. Displayed as a numbered list by default. `type` indicates the numbering type, and can be one-of `a` (lowercase ASCII), `A` (uppercase ASCII), `i` (lowercase Roman), `I` (uppercase Roman), `1` (Arabic). `start` indicates the number to start from. The presence of `reversed` indicates the list ordering should be reversed. - -## Stuff - -`<button>` -`<details>`, `<summary>` -`<form>` -`<input/>` -`<label>` -`<map>`, `<area>` -`<meter>` -`<noscript>` -`<textarea>` -`<dialog>` -`<marquee>` -`<select>`, `<datalist>`, `<optgroup>`, `<option>` +```css +sup { + vertical-align: super; + font-size: smaller; +} +``` + +```css +code { + font-family: monospace; +} +``` + +```css +pre { + display: block; + font-family: -moz-fixed; + white-space: pre; + margin-block: 1em; +} +``` + +</details> ## Semantic +- [`<html>`][html]: The root of an HTML document. + - There should exist one and only one `<html>` element in a document. +- [`<body>`][body]: The content of an HTML document. + - There may only exist one `<body>` element in a document. +- [`<h1>, <h2>, <h3>, <h4>, <h5>, <h6>`][heading elements]: Various heading elements. +- [`<p>`][p]: A paragraph. Text should typically be wrapped in a `<p>`. +- [`<hr/>`][hr]: A thematic break. Typically styled as a horizontal rule. +- [`<br/>`][br]: A line break. +- [`<wbr/>`][wbr]: A word break *opportunity*. + - Browsers will prefer breaking there when necessary. This is useful for ex. German and other languages with long words. + +<details> +<summary>default styles</summary> + +```css +html { + display: block; +} +``` + +```css +body { + display: block; + margin: 8px; +} +``` + +```css +h1, h2, h3, h4, h5, h6 { + display: block; + font-weight: bold; +} + +h1 { + font-size: 2em; + margin-block: .67em; +} + +h2 { + font-size: 1.5em; + margin-block: .83em; +} + +h3 { + font-size: 1.17em; + margin-block: 1em; +} + +h4 { + font-size: 1.00em; + margin-block: 1.33em; +} + +h5 { + font-size: 0.83em; + margin-block: 1.67em; +} + +h6 { + font-size: 0.67em; + margin-block: 2.33em; +} +``` + +```css +p { + display: block; + margin-block: 1em; +} +``` + +```css +hr { + display: block; + color: gray; + border: 1px inset; + margin-block: 0.5em; + margin-inline: auto; + overflow: hidden; +} +``` + +```css +br { + display-outside: newline; +} +``` + +```css +wbr { + display-outside: break-opportunity; +} +``` + +</details> + Aside from being block elements, they have no styling... -- [`<main>`](https://developer.mozilla.org/HTML/Element/main): -- [`<header>`](https://developer.mozilla.org/HTML/Element/header): -- [`<footer>`](https://developer.mozilla.org/HTML/Element/footer): -- [`<nav>`](https://developer.mozilla.org/HTML/Element/nav): -- [`<section>`](https://developer.mozilla.org/HTML/Element/section): -- [`<aside>`](https://developer.mozilla.org/HTML/Element/aside): -- [`<article>`](https://developer.mozilla.org/HTML/Element/article): +- [`<main>`][main] + - There should exist at most one `<main>` element in a document. +- [`<section>`][section] +- [`<aside>`][aside] +- [`<header>`][header] +- [`<footer>`][footer] +- [`<article>`][article] +- [`<nav>`][nav] +- [`<div>`][div]: the generic block container. +- [`<span>`][span]: the generic inline container. + +<details> +<summary>default styles</summary> + +```css +main, section, aside, header, footer, article, nav, div { + display: block; +} + +span { + /* display: inline; */ +} +``` + +</details> ## Metadata -`<head>` -`<meta>` -`<link>` -`<title>` -`<base>` +Several HTML elements provide *metadata* about the document in question. They are invisible and removed from the render tree (`display: none`), and only serve to provide information to the browser. + +- [`<head>`][head]: the document metadata container. + - There should exist one and only one `<head>` element in a document. +- [`<title>`][title]: the title of the document to be displayed. +- [`<base href="" target="">`][base]: the base URL for all relative URLs to use. + - There should exist no more than one `<base>` element in a document. +- [`<link ...>`][link]: establishes relationships between the current document and other external resources. + - This is used for a variety of purposes: site icons, external stylesheets, canonical "next" documents, ... +- [`<meta ...>`][meta]: generic metadata. + +<details> +<summary>default styles</summary> + +```css +head, title, base, link, meta, style, script { + display: none; +} +``` + +</details> ```css <style> @@ -130,32 +284,226 @@ Aside from being block elements, they have no styling... `<template>`, `<slot>` +## Content + +So far, the HTML elements we have looked at have been purely semantic, and devoid of actual content. + +- [`<a href="" rel="" type="" target="" download="">`][a]: An external link to arbitrary content. +- [`<img src="" width="" height="" alt="" .../>`][img]: Embedded image content. +- [`<audio src="" ...>`][audio]: Embedded audio content. +- [`<video src="" width="" height="" ...>`][video]: Embedded video content. +- [`<track src="" ...>`][track]: Subtitles for audio/video content. +- [`<canvas width="" height="">`][canvas]: A target for drawing interactive graphics. +- [`<iframe width="" height="" ...>`][iframe]: Embedded arbitrary HTML content. + +<details> +<summary>default styles</summary> + +```css +a { + color: #0000EE; + text-decoration: underline; + cursor: pointer; +} +``` + +```css +img { + /* object-fit: fill; */ +} +``` + +```css +video { + object-fit: contain; +} +``` + +```css +iframe { + border 2px inset; +} +``` + +</details> + +## Lists + +HTML supports *ordered* and *unordered* lists. + +- [`<ul>`][ul]: An *unordered* list. Displayed with bullet points by default. +- [`<ol type="a" start=1 reversed>`][ol]: An *ordered* list. Displayed as a numbered list by default. +- [`<li value=1>`][li]: A *list element*. Nested within either `<ul>` or `<ol>`. + +Both ordered and unordered lists should have only `<li>`s as their directly nested elements. + +On ordered lists, the `type` attribute indicates the numbering type, and can be one-of `a` (lowercase letters), `A` (uppercase letters), `i` (lowercase Roman numerals), `I` (uppercase Roman numerals), or `1` (Arabic numerals, default). The `start` attribute indicates the ordinal at which to start labeling at, and must be an Arabic numeral, even when `type` is not the default. The presence of the `reversed` attribute indicates that a list should be labelled in descending order. As usual, these properties all may be overridden with targeted CSS. + +Within ordered lists, the `value` attribute on an `li` indicates that the ordering should jump to the specified ordinal and continue from there. Like `start`, it takes an Arabic numeral, irrespective of ordering style. + +There are also a third type of lists available: *description lists*. These do not use the `<li>` element and are generally left unused. We discuss them in a future section. + +<details> +<summary>default styles</summary> + +```css +li { + display: list-item; + text-align: match-parent; +} +``` + +```css +ul, menu { + display: block; + counter-reset: list-item; + margin-block: 1em; + padding-inline-start: 40px; + list-style-type: disc; +} +``` + +```css +ol { + display: block; + counter-reset: list-item; + margin-block: 1em; + padding-inline-start: 40px; + list-style-type: decimal; +} +``` + +</details> + +## Hypertext + +- [`<form ...>`][form]: A section that can perform interactive HTTP requests. +- [`<button ...>`][button]: An interactive element to be activated by the user. +- [`<input .../>`][input]: An interactive element that takes user input. +- [`<textarea ...>`][textarea]: An interactive element for multi-line user input. +- [`<label for="idx">`][label]: A label for an element (typically `<input>`) in a user interface. +- [`<meter ...>`][meter]: A fractional/scalar value within a known range. +- [`<select ...>`][select]: An interactive element that provides a list of options. + - [`<option label="" value="" selected disabled>`][option]: A menu option within a `<select>`. + - [`<optgroup label="" disabled>`][optgroup]: A grouping of options within a `<select>`. + +<details> +<summary>default styles</summary> + +```css +form { + display: block; +} +``` + +```css +button { + letter-spacing: initial; + word-spacing: initial; + line-height: initial; + text-transform: initial; + text-indent: initial; + text-shadow: initial; + text-align: center; + display: inline-block; + box-sizing: border-box; +} +``` + +```css +input { + letter-spacing: initial; + word-spacing: initial; + line-height: initial; + text-transform: initial; + text-indent: initial; + text-shadow: initial; + text-align: initial; +} +``` + +```css +input[type="button"], input[type="reset"], input[type="submit"], { + text-align: center; +} +``` + +```css +input[type="button"], input[type="checkbox"], input[type="color"], input[type="file"], +input[type="image"], input[type="radio"], input[type="reset"], input[type="search"], input[type="submit"] { + box-sizing: border-box; +} +``` + +```css +input[type="button"], input[type="color"], input[type="reset"], input[type="submit"] { + display: inline-block; +} +``` + +```css +input[type="hidden"] { + display: none !important; +} +``` + +```css +textarea { + letter-spacing: initial; + word-spacing: initial; + line-height: initial; + text-transform: initial; + text-indent: initial; + text-shadow: initial; + text-align: initial; + box-sizing: border-box; + white-space: pre-wrap; +} +``` + +```css +select { + letter-spacing: initial; + word-spacing: initial; + line-height: initial; + text-transform: initial; + text-indent: initial; + text-shadow: initial; + text-align: initial; + box-sizing: border-box; +} +``` + +</details> + +## Assorted + +There are various assorted HTML elements that don't neatly fit into a particular category. + +- [`<details name="" open>`][details] + - [`<summary>`][summary]: A caption for a corresponding `<details>` element. +- [`<map name="">`][map]: Defines an image map with `<area>` for an `<img>`. + - [`<area>`][area]: Defines clickable areas within a `<map>` element. +- [`<noscript>`][noscript] +- [`<dialog open>`][dialog] +- [`<marquee ...>`][marquee] + Okay. That's everything important. 75 tags or so? I dunno. Manageable! --- ## Tables -- [`<table>`](https://developer.mozilla.org/HTML/Element/table): - A table. Structured data. -- [`<thead>`](https://developer.mozilla.org/HTML/Element/thead): - A row of cells acting as a header. -- [`<tbody>`](https://developer.mozilla.org/HTML/Element/tbody): - The cells that compose the body of the table. -- [`<tfoot>`](https://developer.mozilla.org/HTML/Element/tfoot): - A row of cells acting as a footer. -- [`<tr>`](https://developer.mozilla.org/HTML/Element/tr): - A row of cells. -- [`<td colspan=1 rowspan=1 headers="">`](https://developer.mozilla.org/HTML/Element/td): - Data cells. `colspan` and `rowspan` indicate their size in the table. `headers` indicates the ids of the corresponding header cells. -- [`<th scope="" colspan=1 rowspan=1 headers="">`](https://developer.mozilla.org/HTML/Element/th): - Header cells. `colspan` and `rowspan` indicate their size in the table. `headers` indicates the ids of the corresponding header cells. `scope` may be one-of `row`, `col`, `rowgroup`, `colgroup`, and indicates the set of cells the header corresponds to. -- [`<col span=1>`](https://developer.mozilla.org/HTML/Element/col): - A column within a table. Columns span over atop rows. -- [`<colgroup span=1>`](https://developer.mozilla.org/HTML/Element/colgroup): - A group of columns within a table. -- [`<caption>`](https://developer.mozilla.org/HTML/Element/caption): - The title of a table. +- [`<table>`][table]: A table. Structured data. +- [`<thead>`][thead]: A row of cells acting as a header. +- [`<tbody>`][tbody]: The cells that compose the body of the table. +- [`<tfoot>`][tfoot]: A row of cells acting as a footer. +- [`<tr>`][tr]: A row of cells. +- [`<td colspan=1 rowspan=1 headers="">`][td]: Data cells. `colspan` and `rowspan` indicate their size in the table. `headers` indicates the ids of the corresponding header cells. +- [`<th scope="" colspan=1 rowspan=1 headers="">`][th]: Header cells. `colspan` and `rowspan` indicate their size in the table. `headers` indicates the ids of the corresponding header cells. `scope` may be one-of `row`, `col`, `rowgroup`, `colgroup`, and indicates the set of cells the header corresponds to. +- [`<col span=1>`][col]: A column within a table. Columns span over atop rows. +- [`<colgroup span=1>`][colgroup]: A group of columns within a table. +- [`<caption>`][caption]: The title of a table. The sheer quantity of tags for tables is quite intimidating. In general, tables are *far* less used than they once were, thanks to improvements in the layout capabilities of CSS. @@ -163,47 +511,147 @@ You can pretty much just ignore them. ## Less Useful Elements -`<fieldset>`, `<legend>` -`<figure>`, `<figcaption>` -`<picture>`, `<source>` -`<output for name>` - -- [`<dl>`](https://developer.mozilla.org/HTML/Element/dl): - A *description list*. Consists of terms (`<dt>`) and descriptions (`<dd>`). Ugly as sin, and scarcely used. -- [`<dt>`](https://developer.mozilla.org/HTML/Element/dt): - Specifies a *term* entry in a description list. -- [`<dd>`](https://developer.mozilla.org/HTML/Element/dd): - Specifies a *description* entry in a description list. -- [`<address>`](https://developer.mozilla.org/HTML/Element/address): - An element indicating its contents are contact information. -- [`<blockquote cite="url">`](https://developer.mozilla.org/HTML/Element/blockquote): - An element indicating its contents are an extended quotation. -- [`<data value="data">`](https://developer.mozilla.org/HTML/Element/data): - An element indicating its content has corresponding data, in the `value` attribute. -- [`<search>`](https://developer.mozilla.org/HTML/Element/search): +- [`<fieldset form="" name="" disabled>`][fieldset]: A grouping of controls within a `<form>`. + - [`<legend>`][legend]: A caption for a corresponding `<fieldset>` element. +- [`<output name="" form="id" for="ida idb...">`][output]: + An element into which the result of a user action is to be injected. +- [`<figure>`][figure]: A wrapper for some arbitrary self-contained content. + - [`<figcaption>`][figcaption]: An optional caption for a corresponding `<figure>`. +- [`<picture>`][picture]: Embedded image content. Contains multiple `<source>` elements and a fallback `<img>`. + - [`<source/>`][source]: A media resource for a `<picture>`, `<audio>`, or `<video>` element. + +- [`<dl>`][dl]: A *description list*. Consists of terms (`<dt>`) and descriptions (`<dd>`). Ugly as sin, and scarcely used. +- [`<dt>`][dt]: Specifies a *term* entry in a description list. +- [`<dd>`][dd]: Specifies a *description* entry in a description list. +- [`<address>`][address]: An element indicating its contents are contact information. +- [`<blockquote cite="url">`][blockquote]: An element indicating its contents are an extended quotation. +- [`<data value="data">`][data]: An element indicating its content has corresponding data, in the `value` attribute. +- [`<search>`][search]: An element indicating its contents are related to searching. -- [`<time datetime="">`](https://developer.mozilla.org/HTML/Element/time): +- [`<time datetime="">`][time]: An element indicating a specific time. `datetime` must be set to a machine-readable format. -- [`<wbr>`](https://developer.mozilla.org/HTML/Element/wbr): - An element that represents a word break *opportunity*. Browsers will prefer breaking there when possible. ## Deprecation Fodder These elements are *really* useless. You shouldn't bother knowing them. They're in the spec, but scarcely used. -- [`<abbr>`](https://developer.mozilla.org/HTML/Element/abbr): An element for displaying abbreviations. -- [`<cite>`](https://developer.mozilla.org/HTML/Element/cite): An element indicating its contents are a citation. -- [`<del>`](https://developer.mozilla.org/HTML/Element/del): An element for displaying deleted text. -- [`<dfn>`](https://developer.mozilla.org/HTML/Element/dfn): An element indicating its contents are a definition. -- [`<ins>`](https://developer.mozilla.org/HTML/Element/ins): An element for displaying inserted text. -- [`<kbd>`](https://developer.mozilla.org/HTML/Element/kbd): An element for displaying keyboard shortcuts. -- [`<mark>`](https://developer.mozilla.org/HTML/Element/mark): An element for displaying highlighted text. -- [`<samp>`](https://developer.mozilla.org/HTML/Element/samp): An element for displaying sample output. -- [`<var>`](https://developer.mozilla.org/HTML/Element/var): An element for displaying mathematical variables. -- [`<embed type="mimetype" src="url"/>`](https://developer.mozilla.org/HTML/Element/embed): - An element for generic embedded content. `<object>` is generally slightly preferred, but `<img>`, `<audio>`, `<video>`, and the like are preferred over both of them. -- [`<object type="mimetype" data="url">`](https://developer.mozilla.org/HTML/Element/object): - An element for displaying generic embedded content. Generally slightly preferred over `<embed>`, but `<img>`, `<audio>`, `<video>`, and the like are preferred over both of them. -- [`<menu>`](https://developer.mozilla.org/HTML/Element/menu): Officially identical to `<ul>` in syntax and semantics. Doesn't have much of a reason to exist. -- [`<progress value=50 max=100>`](https://developer.mozilla.org/HTML/Element/progress): - A worse version of `<meter>`. Like, this is *exactly* `<meter>`, but without the `min`, `low`, `high`, and `optimum` attributes. Why?? +- [`<abbr>`][abbr]: An element for displaying abbreviations. +- [`<cite>`][cite]: An element indicating its contents are a citation. +- [`<del>`][del]: An element for displaying deleted text. +- [`<dfn>`][dfn]: An element indicating its contents are a definition. +- [`<ins>`][ins]: An element for displaying inserted text. +- [`<kbd>`][kbd]: An element for displaying keyboard shortcuts. +- [`<mark>`][mark]: An element for displaying highlighted text. +- [`<samp>`][samp]: An element for displaying sample output. +- [`<var>`][var]: An element for displaying mathematical variables. +- [`<datalist>`][datalist]: A wrapper for a set of suggested `<option>`s for an `<input>`. + - `<datalist>` is not widely used and is not implemented in Firefox. +- [`<embed type="mimetype" src="url"/>`][embed]: + - An element for generic embedded content. + - `<object>` is generally slightly preferred, but `<img>`, `<audio>`, `<video>`, and the like are preferred over both of them. +- [`<object type="mimetype" data="url">`][object]: + - An element for displaying generic embedded content. Still useful for embedded PDFs etc. + - Generally slightly preferred over `<embed>`, but `<img>`, `<audio>`, `<video>`, and the like are preferred over both of them. +- [`<menu>`][menu]: Officially identical to `<ul>` in syntax and semantics. + - Doesn't have much of a reason to exist. +- [`<progress value=50 max=100>`][progress]: A worse version of `<meter>`. + - Like, this is *exactly* `<meter>`, but without the `min`, `low`, `high`, and `optimum` attributes. Why?? + +[b]: https://developer.mozilla.org/HTML/Element/b +[strong]: https://developer.mozilla.org/HTML/Element/strong +[i]: https://developer.mozilla.org/HTML/Element/i +[em]: https://developer.mozilla.org/HTML/Element/em +[u]: https://developer.mozilla.org/HTML/Element/u +[s]: https://developer.mozilla.org/HTML/Element/s +[q]: https://developer.mozilla.org/HTML/Element/q +[small]: https://developer.mozilla.org/HTML/Element/small +[sub]: https://developer.mozilla.org/HTML/Element/sub +[sup]: https://developer.mozilla.org/HTML/Element/sup +[code]: https://developer.mozilla.org/HTML/Element/code +[pre]: https://developer.mozilla.org/HTML/Element/pre +[html]: https://developer.mozilla.org/HTML/Element/html +[body]: https://developer.mozilla.org/HTML/Element/body +[heading elements]: https://developer.mozilla.org/HTML/Element/Heading_Elements +[p]: https://developer.mozilla.org/HTML/Element/p +[hr]: https://developer.mozilla.org/HTML/Element/hr +[br]: https://developer.mozilla.org/HTML/Element/br +[wbr]: https://developer.mozilla.org/HTML/Element/wbr +[main]: https://developer.mozilla.org/HTML/Element/main +[section]: https://developer.mozilla.org/HTML/Element/section +[aside]: https://developer.mozilla.org/HTML/Element/aside +[header]: https://developer.mozilla.org/HTML/Element/header +[footer]: https://developer.mozilla.org/HTML/Element/footer +[article]: https://developer.mozilla.org/HTML/Element/article +[nav]: https://developer.mozilla.org/HTML/Element/nav +[div]: https://developer.mozilla.org/HTML/Element/div +[span]: https://developer.mozilla.org/HTML/Element/span +[head]: https://developer.mozilla.org/HTML/Element/head +[title]: https://developer.mozilla.org/HTML/Element/title +[base]: https://developer.mozilla.org/HTML/Element/base +[link]: https://developer.mozilla.org/HTML/Element/link +[meta]: https://developer.mozilla.org/HTML/Element/meta +[a]: https://developer.mozilla.org/HTML/Element/a +[img]: https://developer.mozilla.org/HTML/Element/img +[audio]: https://developer.mozilla.org/HTML/Element/audio +[video]: https://developer.mozilla.org/HTML/Element/video +[track]: https://developer.mozilla.org/HTML/Element/track +[canvas]: https://developer.mozilla.org/HTML/Element/canvas +[iframe]: https://developer.mozilla.org/HTML/Element/iframe +[ul]: https://developer.mozilla.org/HTML/Element/ul +[ol]: https://developer.mozilla.org/HTML/Element/ol +[li]: https://developer.mozilla.org/HTML/Element/details +[form]: https://developer.mozilla.org/HTML/Element/form +[button]: https://developer.mozilla.org/HTML/Element/button +[input]: https://developer.mozilla.org/HTML/Element/input +[textarea]: https://developer.mozilla.org/HTML/Element/textarea +[label]: https://developer.mozilla.org/HTML/Element/label +[meter]: https://developer.mozilla.org/HTML/Element/meter +[select]: https://developer.mozilla.org/HTML/Element/select +[option]: https://developer.mozilla.org/HTML/Element/option +[optgroup]: https://developer.mozilla.org/HTML/Element/optgroup +[details]: https://developer.mozilla.org/HTML/Element/details +[summary]: https://developer.mozilla.org/HTML/Element/summary +[map]: https://developer.mozilla.org/HTML/Element/map +[area]: https://developer.mozilla.org/HTML/Element/area +[noscript]: https://developer.mozilla.org/HTML/Element/noscript +[dialog]: https://developer.mozilla.org/HTML/Element/dialog +[marquee]: https://developer.mozilla.org/HTML/Element/marquee +[table]: https://developer.mozilla.org/HTML/Element/table +[thead]: https://developer.mozilla.org/HTML/Element/thead +[tbody]: https://developer.mozilla.org/HTML/Element/tbody +[tfoot]: https://developer.mozilla.org/HTML/Element/tfoot +[tr]: https://developer.mozilla.org/HTML/Element/tr +[td]: https://developer.mozilla.org/HTML/Element/td +[th]: https://developer.mozilla.org/HTML/Element/th +[col]: https://developer.mozilla.org/HTML/Element/col +[colgroup]: https://developer.mozilla.org/HTML/Element/colgroup +[caption]: https://developer.mozilla.org/HTML/Element/caption +[fieldset]: https://developer.mozilla.org/HTML/Element/fieldset +[legend]: https://developer.mozilla.org/HTML/Element/legend +[output]: https://developer.mozilla.org/HTML/Element/output +[figure]: https://developer.mozilla.org/HTML/Element/figure +[figcaption]: https://developer.mozilla.org/HTML/Element/figcaption +[picture]: https://developer.mozilla.org/HTML/Element/picture +[source]: https://developer.mozilla.org/HTML/Element/source +[dl]: https://developer.mozilla.org/HTML/Element/dl +[dt]: https://developer.mozilla.org/HTML/Element/dt +[dd]: https://developer.mozilla.org/HTML/Element/dd +[address]: https://developer.mozilla.org/HTML/Element/address +[blockquote]: https://developer.mozilla.org/HTML/Element/blockquote +[data]: https://developer.mozilla.org/HTML/Element/data +[search]: https://developer.mozilla.org/HTML/Element/search +[time]: https://developer.mozilla.org/HTML/Element/time +[abbr]: https://developer.mozilla.org/HTML/Element/abbr +[cite]: https://developer.mozilla.org/HTML/Element/cite +[del]: https://developer.mozilla.org/HTML/Element/del +[dfn]: https://developer.mozilla.org/HTML/Element/dfn +[ins]: https://developer.mozilla.org/HTML/Element/ins +[kbd]: https://developer.mozilla.org/HTML/Element/kbd +[mark]: https://developer.mozilla.org/HTML/Element/mark +[samp]: https://developer.mozilla.org/HTML/Element/samp +[var]: https://developer.mozilla.org/HTML/Element/var +[datalist]: https://developer.mozilla.org/HTML/Element/datalist +[embed]: https://developer.mozilla.org/HTML/Element/embed +[object]: https://developer.mozilla.org/HTML/Element/object +[menu]: https://developer.mozilla.org/HTML/Element/menu +[progress]: https://developer.mozilla.org/HTML/Element/menu |