HTML

Content categories

display

html block
├── head none Metadata
│   ├── title none
│   └── link none
└── body block Flow
    ├── header block

block

• address
• article
• aside
• blockquote
• body
• dd
• details
• div
• dl
• dt
• fieldset
• figcaption
• footer
• form
• h1 … h6
• hr
• iframe[seamless]
• legend
• menu
• nav
• ol
• p
• pre
• section
• summary
• ul

inline-block

• img
• map
• output
• q

table

• caption
• col
• colgroup
• table
• tbody
• td
• tfoot
• th
• thead
• tr

none

• area
• datalist

flex

Not set by default for any elements

grid

Not set by default for any elements

Semantic Elements

w3schools

html
├── head
└── body
    ├── header
    ├── nav
    ├── main
    └── footer

By convention, I use HTML’s section to correspond with Hugo’s section, ie subdirectories or branches, while HTML’s article are Hugo’s single page. The corresponding URL structure is ‘/section/article’

1. Mozilla
   1. Basics
   2. Forms

tidy \
  -indent \
  --indent-spaces 2 \
  -quiet \
  --tidy-mark no \
  index.html

Sending forms through JavaScript

Fetch Living Standard

Fetch API

Using Fetch

Simple example:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Response Object

With the optional init second parameter:

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

FormData instead of JSON

HTMLFormElement

const form = new FormData(document.getElementById('login-form'));
fetch('/login', {
  method: 'POST',
  body: form
});