All Articles

HTML Nuances

Keep it semantic™

<header> header for document or individual section

  • Same with footer, but opposite

<main> main content of a document

<article> self contained composition in a document. Intended to be distributable or reusable.

<aside> portion of document only indirectly related to main content

<section> standalone section in document, generally with a header

<details> and <summary>

  • This will create an accordion, summary is the title, text is what is seen when clicked
<details>
  <summary> Details </summary>
  Something small enough to escape casual notice.
</details>

<dialog> similar to a notification

<dialog open>this is seen</dialog>
<dialog>this is not seen</dialog>

<figure> and <figcaption>

  • Used for an image that has a description. The description is right below the image.
<figure>
  <img ... />
  <figcaption>...</figcaption>
</figure>

<mark> Highlights text

<nav> For a section of a page that provides navigation links

<meter> creates a battery looking thing

  • It even changes colors based on the low/high/optimum values
<label for="fuel"> Fuel level: </label>
<meter
  id="fuel"
  name="fuel"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="80"
  value="50"
>
  this is like the alt
</meter>

<progress> shows indicator for the completion progress of a task

<label for="file"> File progress: </label>
<progress id="“file”" max="“100”" value="“30”">
  alt for it
</progress>

<summary> for a summary, caption, or legend for <details>

<time> represents a specific period in time.

<!-- date time can represent three forms of time -->
<!-- Precise date -->
<time datetime="2018-07-07"> July 7 </time>
<!-- Time on a 24 hour clock -->
<time datetime="20:00"> 20:00 </time>
<!-- A valid time duration -->
<time datetime="PT2H30M"> 2h 30m </time>

<dl> - for a row of definitions

  • <dt> - is the word
  • <dd> - is the definition

Write way to do a form:

<form>
  <fieldset>
    <legend>...</legend>
    <!-- inputs and other stuff -->
  </fieldset>
</form>

And now for something completely different:

he's the most dangerous of animals, a clever sheep