diff options
| -rw-r--r-- | web/html.md | 96 |
1 files changed, 44 insertions, 52 deletions
diff --git a/web/html.md b/web/html.md index 6dcdef6..6e52fb2 100644 --- a/web/html.md +++ b/web/html.md @@ -54,20 +54,12 @@ These wrappers have no style associated with them, but are *semantically meaning `<body>` `<div> </div>` -```css -<h1> </h1> -<h2> </h2> -<h3> </h3> -<h4> </h4> -<h5> </h5> -<h6> </h6> -``` - -`<p> </p>` -`<pre> </pre>` -`<br/>` -`<hr/>` -`<span> </span>` (or below) +- [`<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) ## Content @@ -110,13 +102,13 @@ These wrappers have no style associated with them, but are *semantically meaning Aside from being block elements, they have no styling... -`<main> </main>` -`<header> </header>` -`<footer> </footer>` -`<nav> </nav>` -`<section> </section>` -`<aside> </aside>` -`<article> </article>` +- [`<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): ## Metadata @@ -144,25 +136,25 @@ Okay. That's everything important. 75 tags or so? I dunno. Manageable! ## Tables -- [`<table> </table>`](https://developer.mozilla.org/HTML/Element/table): +- [`<table>`](https://developer.mozilla.org/HTML/Element/table): A table. Structured data. -- [`<thead> </thead>`](https://developer.mozilla.org/HTML/Element/thead): +- [`<thead>`](https://developer.mozilla.org/HTML/Element/thead): A row of cells acting as a header. -- [`<tbody> </tbody>`](https://developer.mozilla.org/HTML/Element/tbody): +- [`<tbody>`](https://developer.mozilla.org/HTML/Element/tbody): The cells that compose the body of the table. -- [`<tfoot> </tfoot>`](https://developer.mozilla.org/HTML/Element/tfoot): +- [`<tfoot>`](https://developer.mozilla.org/HTML/Element/tfoot): A row of cells acting as a footer. -- [`<tr> </tr>`](https://developer.mozilla.org/HTML/Element/tr): +- [`<tr>`](https://developer.mozilla.org/HTML/Element/tr): A row of cells. -- [`<td colspan=1 rowspan=1 headers=""> </td>`](https://developer.mozilla.org/HTML/Element/td): +- [`<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=""> </th>`](https://developer.mozilla.org/HTML/Element/th): +- [`<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> </col>`](https://developer.mozilla.org/HTML/Element/col): +- [`<col span=1>`](https://developer.mozilla.org/HTML/Element/col): A column within a table. Columns span over atop rows. -- [`<colgroup span=1> </colgroup>`](https://developer.mozilla.org/HTML/Element/colgroup): +- [`<colgroup span=1>`](https://developer.mozilla.org/HTML/Element/colgroup): A group of columns within a table. -- [`<caption> </caption>`]((https://developer.mozilla.org/HTML/Element/caption): +- [`<caption>`](https://developer.mozilla.org/HTML/Element/caption): The title of a table. The sheer quantity of tags for tables is quite intimidating. @@ -176,42 +168,42 @@ You can pretty much just ignore them. `<picture>`, `<source>` `<output for name>` -- [`<dl> </dl>`](https://developer.mozilla.org/HTML/Element/dl): +- [`<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> </dt>`](https://developer.mozilla.org/HTML/Element/dt): +- [`<dt>`](https://developer.mozilla.org/HTML/Element/dt): Specifies a *term* entry in a description list. -- [`<dd> </dd>`](https://developer.mozilla.org/HTML/Element/dd): +- [`<dd>`](https://developer.mozilla.org/HTML/Element/dd): Specifies a *description* entry in a description list. -- [`<address> </address>`](https://developer.mozilla.org/HTML/Element/address): +- [`<address>`](https://developer.mozilla.org/HTML/Element/address): An element indicating its contents are contact information. -- [`<blockquote cite="url"> </blockquote>`](https://developer.mozilla.org/HTML/Element/blockquote): +- [`<blockquote cite="url">`](https://developer.mozilla.org/HTML/Element/blockquote): An element indicating its contents are an extended quotation. -- [`<data value="data"> </data>`](https://developer.mozilla.org/HTML/Element/data): +- [`<data value="data">`](https://developer.mozilla.org/HTML/Element/data): An element indicating its content has corresponding data, in the `value` attribute. -- [`<search> </search>`](https://developer.mozilla.org/HTML/Element/search): +- [`<search>`](https://developer.mozilla.org/HTML/Element/search): An element indicating its contents are related to searching. -- [`<time datetime=""> </time>`](https://developer.mozilla.org/HTML/Element/time): +- [`<time datetime="">`](https://developer.mozilla.org/HTML/Element/time): An element indicating a specific time. `datetime` must be set to a machine-readable format. -- [`<wbr> </wbr>`](https://developer.mozilla.org/HTML/Element/wbr): +- [`<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> </abbr>`](https://developer.mozilla.org/HTML/Element/abbr): An element for displaying abbreviations. -- [`<cite> </cite>`](https://developer.mozilla.org/HTML/Element/cite): An element indicating its contents are a citation. -- [`<del> </del>`](https://developer.mozilla.org/HTML/Element/del): An element for displaying deleted text. -- [`<dfn> </dfn>`](https://developer.mozilla.org/HTML/Element/dfn): An element indicating its contents are a definition. -- [`<ins> </ins>`](https://developer.mozilla.org/HTML/Element/ins): An element for displaying inserted text. -- [`<kbd> </kbd>`](https://developer.mozilla.org/HTML/Element/kbd): An element for displaying keyboard shortcuts. -- [`<mark> </mark>`](https://developer.mozilla.org/HTML/Element/mark): An element for displaying highlighted text. -- [`<samp> </samp>`](https://developer.mozilla.org/HTML/Element/samp): An element for displaying sample output. -- [`<var> </var>`](https://developer.mozilla.org/HTML/Element/var): An element for displaying mathematical variables. +- [`<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" name> </object>`](https://developer.mozilla.org/HTML/Element/object): +- [`<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> </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> </progress>`](https://developer.mozilla.org/HTML/Element/progress): +- [`<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?? |