Heyo! Make it stop snowing.

Details

Landmarks
Main
Aside
Footer
Header
Heading
Image
Link
Button
Navigation
Menu
Select Input
Disclosure Widget
Dialog
List
Description List
Form
Input
Label
Fieldset
Legend
Table
Data Cell
Header Cell

Landmarks

Landmarks are special regions of a page. They give screen readers and other assistive technologies the ability to jump around, therefore enhancing the navigation experience for the user.

Main Aside

Main

A main is a landmark that indicates main content of a page.

HTML tag: <main>

Aside

An aside is a landmark that indicates complimentary content that indirectly relates to the main.

HTML tag: <aside>

A footer is a landmark that indicates footer content of a page—eg. copyright data, related links, etc.

HTML tag: <footer>

A header is a landmark that indicates header content of a page—eg. logo, navigation, search, etc.

HTML tag: <header>

Heading

A heading describes a section of content. There are 6 levels. Level 1 is usually used for the title of a page. Subsequent headings should not skip levels.

HTML tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

This is a level 1 heading

This is a level 2 heading

This is a level 3 heading

This is a level 4 heading

This is a level 5 heading

This is a level 6 heading

Image

An image embeds a graphic, whether it is raster based (JPG, GIF, PNG, etc.) or vector based (SVG). Alternative text should be provided for images that are essential information.

HTML tag: <img alt="...">

Link

A link helps the user to navigate to another page or another section of the same page. The enter key triggers it. A link is not a button.

HTML tag: <a href="...">

This is a link

Button

A button helps the user to perform a function—eg. submit a form, expand/collapse a block of content, etc. The enter or space key triggers it. A button is not a link.

HTML tag: <button type="...">

A navigation is a list of links—eg. site navigation, table of contents, etc. A navigation is not a menu.

HTML tag: <nav>

A menu is a list of buttons. It is usually hidden until a trigger expands it—eg. right click on an interface or tap on an expand button. A menu is not a navigation.

HTML tags: <ul role="menu"> and <li role="menuitem">

Select Input

A select input expands a list of options. It is usually used within the context of a form. The space key triggers it. A select input is neither a menu or navigation.

HTML tags: <select> and <option>

A disclosure widget expands hidden content. It is usually used for secondary information that can be displayed on the user’s demand. The enter or space key triggers it. A disclosure widget is neither a menu or navigation.

HTML tags: <details> and <summary>

This is a disclosure widget

Now open.

Dialog

A dialog is a content container that overlays the page content. It is not to be confused with the word modal. Modal is a state: a state that excludes all interaction with elements outside the dialog. The esc key triggers the close of a dialog. A dialog is neither a menu or navigation.

HTML tag: <dialog>

List

A list contains a list of items. It can be ordered or unordered.

HTML tags: <ul> and <li>, <ol> and <li>

This is a list item
This is a list item
This is a list item

This is a list item
This is a list item
This is a list item

Description List

A description list is a list of groups of terms. Each group contains a term and its description. It is commonly used in glossary pages.

HTML tags: <dl> and <dt> and <dd>

This is a term: This is its description.
This is a term: This is its description.
This is a term: This is its description.

Form

A form contains controls for submitting information.

HTML tag: <form>

Input

An input accepts value to be submitted via a form. There are different types of inputs—eg. text, number, email, checkbox, radio, textarea, select, etc. An input must be used inside a form.

HTML tags: <input type="...">, <textarea>, <select>

Label

A label defines the purpose of an input. A label must be used inside a form.

HTML tag: <label>

Fieldset

A fieldset is a group of related inputs—eg. a first name input and a last name input grouped together by a fieldset called Personal Info. A fieldset must be used inside a form.

HTML tag: <fieldset>

Legend

A legend defines the purpose of a fieldset. A legend must be used inside a fieldset in a form.

HTML tag: <legend>

Table

A table contains tabular content displayed in a grid. A table is not to be used for layouts.

HTML tag: <table>

This is a header cell	This is a header cell	This is a header cell
This is a data cell	This is a data cell	This is a data cell
This is a data cell	This is a data cell	This is a data cell
This is a data cell	This is a data cell	This is a data cell

Data Cell

A data cell is a regular cell in a table. A data cell must be used inside a table.

HTML tag: <td>

Header Cell

A header cell is a cell in a table that can act as a column header or row header. A header cell must be used inside a table.

HTML tag: <th>

Posted by Mike Mai, 04 Dec 2022.

Built with Typesettings.css

<style>

  @import url('https://fonts.googleapis.com/css2?family=Rye&family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --ts-font-family-serif: "Rye", Georgia, serif;
  --ts-font-family-sans: "Lato", system-ui, sans-serif;
  --ts-font-weight-regular: 400;
  --ts-font-size: 1.125rem;
  --ts-color-heading: darkred;
  --ts-color-body: black;
  --ts-color-link: darkgreen;
  --ts-color-border: limegreen;
  --ts-color-background: mintcream;
  scroll-behavior: smooth;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ts-color-heading: lightgreen;
    --ts-color-body: mintcream;
    --ts-color-link: white;
    --ts-color-muted: lightgray;
    --ts-color-subtle: black;
    --ts-color-border: crimson;
    --ts-color-background: #022400;
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
}

[data-typesettings] main {
  padding-block-start: 0;
}

[data-typesettings] :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 400;
  letter-spacing: 0;
  scroll-margin-block-start: 4rem;
}

[data-typesettings] header[role="banner"] {
  background: transparent;
  filter: none;
}

[data-typesettings] header[role="banner"] h1 {
  display: grid;
  place-items: center;
  min-block-size: 50vh;
  font-size: clamp(var(--ts-font-size-xlarge), var(--ts-font-size-xlarge) + 4.5vw, var(--ts-font-size-xxlarge) * 2.5);
  text-shadow: 0 -2px 1px white;
}

[data-typesettings] :is(figure, header[role="banner"]) {
  border-radius: 1em;
}

[data-typesettings] table {
  min-inline-size: auto;
}

[data-typesettings] section figure {
  display: flex;
  flex-direction: column;
  overflow: auto;
  text-align: start;
  padding-block: 5vmax;
  padding-inline: var(--ts-paragraph-indent);
  border: 2px dashed var(--ts-color-border);
}

[data-typesettings] section figure > * {
  margin-inline: auto;
}

[data-typesettings] section figure :is(h1, h2, h3, h4, h5, h6, figcaption) {
  text-align: center;
}

[data-typesettings] section figure :is(input[type="text"], div) {
  inline-size: 100%;
}

[data-typesettings] section figure nav ul {
  gap: 2ch;
  row-gap: 0.5ex;
}

[data-typesettings] section figure img {
  border-radius: inherit;
}

[data-typesettings] section figure form ul {
  padding-inline: 0;
}

dialog {
  color: var(--ts-color-body);
  background: var(--ts-color-background);
}

.landmarks {
  display: grid;
  grid-template-areas: 
    "header header"
    "main aside"
    "footer footer";
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 4fr 1fr;
  gap: 1vmin;
  inline-size: 100%;
}

.landmarks > * {
  padding: 1vmin;
  text-align: center;
  background: var(--ts-color-border);
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  gap: 1vmin;
  list-style: none;
  counter-reset: calendar-list;
}

.calendar li {
  margin: 0;
  padding: 0;
  counter-increment: calendar-list;
  background: var(--ts-color-background);
}

.calendar li a {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 100%;
  padding: 1em;
  text-align: center;
  background: var(--ts-color-subtle);
  border: 0;
  border-radius: 0 1em 1em 1em;
}

.calendar li a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.calendar li a:before {
  content: counter(calendar-list);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: 3px;
  font-size: 0.7em;
  font-family: var(--ts-font-family-serif);
  line-height: 1;
}

/* https://codepen.io/codeconvey/pen/xRzQay */
.snowflake {
  font-size: 1.5rem;
  font-family: system-ui;
  color: white;
  text-shadow: 0 0 1px #022400;
  pointer-events: none;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

@media (prefers-reduced-motion: reduce) {
  .snowflake {
    display: none;
  }
}

:has(#snow-switch:checked) .snowflake {
  display: none;
}


</style>

<div data-typesettings="golden sans-serif">

  …

</div>

Typesettings.css Docs »

24 Semantic Terms Web Pros Should Know

Table of Contents