✂️ HTML

September 22, 2020 · 3 min · 497 words | source

Small information nuggets and recipies about HTML

Table of Contents

(alphabetical order)

Templates

Page structure

<header>header</header>
<nav>nav</nav>
<main>
  <section>section</section>
  <article>article</article>
  <aside>aside</aside>
</main>
<footer>footer</footer>

layout illustrating the relative page placement of the semantic tags: header, nav, section, article, aside, and footer

Other idioms

Elements

abbreviation

<abbr title="title">abbreviation</abbr>

➔ abbreviation

anchor / link

<a href="">hyperlink</a>

➔ hyperlink

blockquote

… inline

Inline <q>simple quote</q>.
Inline <q cite="http://example.com">quote with citation</q>.

➔ Inline simple quote.
➔ Inline quote with citation.

… simple

<blockquote>
  <p>Simple quote.</p>
</blockquote>

Simple quote.

… with citation

<blockquote>
  <p>Quote with citation.</p>
  <footer>— <cite class="author">Author</cite> (in <cite class="title">Source</cite>)</footer>
</blockquote>

Quote with citation.

— Author (in Source)

citation

<cite>person or title</cite>

➔ person or title

code

<code>computer code</code>

➔ computer code

definition

<dfn title="explanation">term</dfn>

➔ term

delete

<del>deleted text</del>

➔ deleted text

details

<details>
  <summary>Collapsed title</summary>
  <p>Content</p>
</details>
Collapsed title

Content

emphasis

<em>emphatic text</em>

➔ emphatic text

figure

The img tag is used to embed the image in an HTML document whereas the figure tag is used to semantically organize the content of an image in the HTML document.

— HTML5 - When to use figure tag - Learning Journal

<figure>
  <img src="http://placehold.it/100x100.png" alt="Image alternate text">
  <figcaption>Image caption</figcaption>
</figure>
Image alternate text
Image caption

footnote

text<sup>1</sup>

<small><sup>1</sup> footnote</small>

➔ text1
➔ 1 footnote

heading / titles

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

— How to mark up subheadings, subtitles, alternative titles and taglines | HTML5 Doctor

<header>
  <h2>Title</h2>
  <p>Tagline or subtitle</p>
</header>
<p>Content</p>
Title

Tagline or subtitle

Content

image

<img src="http://placehold.it/100x100.png" alt="Example alternate text">
Example alternate text

insert

<ins>inserted text</ins>

➔ inserted text

keyboard

<kbd>user keyboard input</kbd>

➔ user keyboard input

list

… ordered

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
  1. item
  2. item
  3. item

… unordered

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
  • item
  • item
  • item

main

There must not be more than one <main> element in a document.

— HTML main Tag

<main>content unique to the document</main>
content unique to the document

mark / highlight

<mark>marked/highlighted text</mark>

➔ marked/highlighted text

sample output

<samp>sample output</samp>

➔ sample output

small print

<small>copyright or side-comments</small>

➔ copyright or side-comments

strong

<strong>strong importance</strong>

➔ strong importance

subscript

<sub>subscript</sub>

➔ subscript

superscript

<sup>superscript</sup>

➔ superscript

table

<table>
  <tr>
    <th>header cell</th>
    <th>header cell</th>
  </tr>
  <tr>
    <td>value cell</td>
    <td>value cell</td>
  </tr>
</table>
header cell header cell
value cell value cell

time

Dinner at <time>20:00</time> on <time datetime="2020-12-31">New Year’s eve</time>

➔ Dinner at on

variable

<var>code or math variable</var>

➔ code or math variable