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
  <summary> Details </summary>
  Something small enough to escape casual notice.

<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.
  <img ... />

<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>
  this is like the alt

<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

<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:

    <!-- inputs and other stuff -->

And now for something completely different:

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