In 2010, Ethan Marcotte coined the term responsive web design which is a unified approach of three techniques:

• lexible grid layout
• flexible images/media
• media queries

The viewport meta tag tells the browser how to render a web page

For images prefer max-width instead of width:

        img {
          max-width: 100%;
        }
      

Specifications for CSS Media Queries: level 3; level 4

The living standard of HTML

The void tags are: area, base, br, col, embed, hr, img, input, link, meta, param, param, source, track and wbr

Full list of languages for the lang attribute

Pre-made "best practice" HTML5 file

Check if the markup is valid

a, button, form can not be wrapped inside of an a tag

Full list of HTML5 elements

Group the HTML elements by specification:

• Sectioning elements: ( aside, footer, form, header, main, nav, section)
• Grouping elements: ( address, blockquote, dd, dl, div, dt, figcaption, figure, hr, li, main, ol, pre, pre, ul )
• Text-level semantics: ( a, abbr, b, br, bdi, bdo, cite, code, data, dfn, em, i, kbd, mark, q, ruby, rt, rp, s, samp, small, span, sub, sup, strong, time, u, var, wbr)

Keep only one main on each page and do not use it as a descendent child element of article, aside, header, footer or nav

Use section as the wrapping element for visual components

For navigational elements replace ul with nav and li with a

The outline is all headings in a document, in tree order

Test the outline of your documents with https://gsnedders.html5.org/outliner or https://hoyois.github.io/html5outliner

Obsolete HTML features (conforming and non-conforming)

Understanding levels of conformance for WCAG

A paraphrased summary of WCAG

Quick reference to WCAG

How to implement ARIA

Using ARIA

Set of accessible design patterns

All things accessibility (a11y)

To make the video tag responsive, remove any height and width attributes in the markup then apply a CSS style:

      
        video {
          max-width: 100%;
          height: auto;
        }
      
    

For videos embedded within an iframe, correct the aspect ratio with Thierry Koblentz's technique or with Embed Responsively

The modern way to embed iframes and keep aspect ratio is using aspect-ratio CSS property:

        
          .iframe-16-9 {
            aspect-ratio: 16/9;
            max-width: 100%;
          }
        
      

The loading="lazy" tells the browser to fetch the item with this attribute only if the user scrolls it into view. The default is loading="eager"

The dialog element has some accessibility issues. See it in action

Media queries in link tags:

        
            <link rel="stylesheet" media="screen and (orientation: portrait)"
            href="portrait-screen.css" />
            <!-- or -->
            <link rel="stylesheet" media="not screen and (orientation: portrait)"
            href="portrait-screen.css" />
            <!-- or -->
            <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)"
            href="800wide-portrait-screen.css" />
            <!-- or -->
            <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px),
            projection" href="800wide-portrait-screen.css" />
        
    

Media query on an @import at-rule

        @import url("portrait-screen.css") screen and (orientation: portrait);
    

Media queries in a CSS file

        @media screen and (orientation: portrait) {
        /* styles here */
        }
    

What can media queries test for?

Features deprecated in CSS Media Queries Level 5

Render blocking CSS

Specifications progress Working Draft (WD) -> Candidate Recommendation (CR) -> Proposed Recommendation (PR) -> Recommendation (REC). Explanation of the standards ratification process