Web standards are an umbrella term for a series of standards that form the foundation, operation, and development of the Web. If front-end developers are compared to “Monkey King”, then Web standards are “Buddha’s palm”. It is no exaggeration to say that for the front-end practitioner, Web standards represent capabilities, represent the stage, symbolize the space, and guide development.

Web standards are not developed by a standards body, involving IETF, Ecma, W3C, WHATWG, etc. This paper briefly describes the relevant Web standards according to the Web standards organization to provide guidance for the front-end learning of Web standards.

IETF

The Internet Engineering Task Force (IETF) was established in 1986. The Internet’s namesake TCP/IP protocol was standardized by the IETF.

In 1991, Web inventor Tim Berners-Lee summarized the HTTP protocol implemented in his Web server and browser, HTTP 0.9:

  • HTTP/0.9:www.w3.org/Protocols/H…

HTTP 0.9 is less than 700 words long and defines the simplest protocol for browsers to communicate with servers to get HTML pages. This protocol defines only GET requests.

With the rapid popularity of the Web, many Web servers have added extensions to version 0.9. In order to document these extensions in time, the IETF formed the HTTP Working Group (HTTP WG) to develop HTTP/1.0. In May 1996, the IETF published a Request for Comments (RFC) : RFC 1945. The IETF RFC can be accepted as an official standard or as a reference document. RFC 1945 is a reference document (i.e. HTTP/1.0) :

  • HTTP/1.0:tools.ietf.org/html/rfc194…

HTTP/1.0 added HEAD and POST methods. Added optional HTTP version number. Added HTTP header fields describing the request and response. Added 3-digit response code (1XX reserved, 2XX successful, 3XX redirection, 4XX client error, 5XX server error). HTTP/1.0 has reached 20,000 words.

Just nine months later, HTTP/1.1 was released in January 1997. HTTP/1.1 is also largely an improvement over HTTP/1.0, adding persistent connections, mandatory server headers, better caching, and chunking encoding. Laid the foundation for the development of the Web.

It was replaced by an updated version in May 1999. It was updated again in May 2014. With each update, the previous version becomes obsolete. HTTP/1.1 is already 305 pages and 100,000 words long.

  • HTTP / 1.1:

    • Tools.ietf.org/html/rfc206…
    • Tools.ietf.org/html/rfc261…
    • Tools.ietf.org/html/rfc723… . Tools.ietf.org/html/rfc723…

HTTP was originally a plain text protocol. HTTP messages are sent in clear text. Can be intercepted and viewed at will. HTTPS encrypts transmitted messages using the Transport Layer Security (TLS) protocol

  • The Transport Layer Security (TLS) Protocol Version 1.3 :tools.ietf.org/html/rfc844…

HTTP/1.1 is a text-only protocol that is difficult to parse, and only one resource can be requested per connection. As the volume of HTTP requests increases, this inefficiency becomes more apparent. Although various schemes have been devised to improve efficiency, such as static resource server sharding and merge requests, the results are limited and create new problems.

HTTP/2 is a standardized version of Google SPDY. Includes byte streams for multiplexing, request optimization levels, and HTTP header compression. In 2012, the HTTP Working Group took note of SPDY’s success and proposed a new version of HTTP. In May 2015, HTTP/2 or RFC 7450 was approved as an official standard:

  • HTTP/2:tools.ietf.org/html/rfc754…

Since HTTP/2 is based on SPDY, many browsers already support HTTP/2 (Firefox, Chrome, Opera), All browsers will support HTTP/2 by the end of 2015 (Internet Explorer 11, Edge, Safari).

HTTP/2 currently accounts for 43.8% of global traffic (w3techs.com/technologie…) .

Ecma

Ecma International was founded in 1961. The C# and Dart languages are standardized by the organization. Of course, JavaScript is also standardized by Ecma. TC39 is responsible for the development of ECMA-262, the ECMAScript standard.

  • June 1997: ECMA-262 1st Edition (110 pages)
  • August 1998: ECMA-262 2nd Edition
  • December 1999: ECMA-262 3rd Edition
  • Ecma-262 4th Edition: Does not exist
  • 2009 年 12 月 : ECMA-262 5th Edition (252 页)
  • June 2011: ECMA-262 5.1 Edition
  • Ecma-262 6th Edition (566 pages)
  • Ecma-2627th Edition (556 pages)
  • June 2017: ECMA-262 8th Edition (885 pages)
  • June 2018: ECMA-262 9th Edition (805 pages)
  • June 2019: ECMA-262.pdf (764 pages)

History version: www.ecma-international.org/publication…

The current version: www.ecma-international.org/publication…

W3C

W3C, the World Wide Web Consortium, was founded in 1994 at MIT in the United States and is the main architect of Web standards. There are currently nearly 300 (293) formal recommendations in force:

  • The Latest Recommendation: www.w3.org/TR/?status=…

An overview of

  • BOM: BOM (Browser Object Model) The main content of BOM is covered in a section of the HTML5 specification because the W3C wants to standardize the most basic part of JavaScript in browsers.

    • The Window object, which is the Global object defined in ECMAScript. All global objects, variables, and functions in a web page are exposed to this object.
    • Location object, passedlocationObject to programmatically manipulate the browser’s navigation system.
    • Navigator object, which provides information about the browser.
    • Screen object, which holds information about the client’s display.
    • The history object, which provides the ability to manipulate browser history.

  • DOM: DOM (Document Object Model) is a programming interface for HTML and XML documents. The DOM represents a document made up of several layers of nodes through which developers can add, remove, and modify parts of the page. Born out of Netscape and Microsoft’s early DHTML (Dynamic HTML), DOM is now a truly cross-platform, language-neutral way of presenting and manipulating web pages.

  • DOM Level 2 and Level 3: DOM1 (DOM Level 1) mainly defines the underlying structure of HTML and XML documents. DOM2 (DOM Level 2) and DOM3 (DOM Level 3) add more interactive capabilities on top of these structures, providing more advanced XML features. In fact, DOM2 and DOM3 are standardized with the idea of modularity, with each module associated but targeting a subset of the DOM. These patterns are shown below.

    • DOM Core: Adds methods and properties to nodes based on the DOM1 Core.
    • DOM Views: Define different Views based on style information.
    • DOM Events: Defines DOM document interactions through Events.
    • DOM Style: Defines an interface for programmatically accessing and modifying CSS styles.
    • DOM Traversal and Range: New interface for traversing a DOM document and selecting its content.
    • DOM HTML: Adds attributes, methods, and a new interface to the HTML section of DOM1.
    • DOM Mutation Observers: Defines interfaces that trigger callbacks based on DOM changes. This module is a DOM4-level module that replaces Mutation Events.

  • Animation and Canvas Graphics: requestAnimationFrame and draw 2D graphics using < Canvas > and 3D graphics using WebGL.

Here is a filter of the major W3C Web standards related to front-end development, including the tags CSS, DOM, Graphics, HTML, HTTP, Performance, Security, and Web API. These are just some of the recommendations that have been made. There are also more standard drafts in WD (Working Draft), CR (Candidate Recommandation) and PR (Proposed Recommandation) states. Such as Web Payment, Web of Things, or even proposals for applets.

CSS

  1. CSS Containment Module Level 1
  2. Selectors Level 3
  3. CSS Fonts Module Level 3
  4. CSS Basic User Interface Module Level 3 (CSS3 UI)
  5. CSS Color Module Level 3
  6. CSS Namespaces Module Level 3
  7. CSS Style Attributes
  8. Selectors API Level 1
  9. Media Queries
  10. A MathML for CSS Profile
  11. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  12. Associating Style Sheets with XML documents 1.0 (Second Edition)
  13. Document Object Model (DOM) Level 2 Style Specification

DOM

  1. Server-Sent Events
  2. Progress Events
  3. Element Traversal Specification
  4. Document Object Model (DOM) Level 3 Core Specification
  5. Document Object Model (DOM) Level 3 Load and Save Specification
  6. Document Object Model (DOM) Level 3 Validation Specification
  7. XML Events
  8. Document Object Model (DOM) Level 2 HTML Specification
  9. Document Object Model (DOM) Level 2 Style Specification
  10. Document Object Model (DOM) Level 2 Traversal and Range Specification
  11. Document Object Model (DOM) Level 2 Views Specification
  12. Document Object Model (DOM) Level 2 Core Specification
  13. Document Object Model (DOM) Level 2 Events Specification

Graphics

  1. Graphics Accessibility API Mappings
  2. WAI-ARIA Graphics Module
  3. HTML Canvas 2D Context
  4. WebCGM 2.1
  5. Scalable Vector Graphics (SVG) Tiny 1.2 Specification
  6. Portable Network Graphics (PNG) Specification (Second Edition)
  7. Mobile SVG Profiles: SVG Tiny and SVG Basic

HTML

  1. HTML Media Capture
  2. HTML 5.2
  3. HTML 5.1 2nd Edition
  4. Encrypted Media Extensions
  5. Media Source Extensions ™
  6. Web Storage (Second Edition)
  7. HTML Canvas 2D Context
  8. XHTML+RDFa 1.1 – Third Edition
  9. RDFa Core 1.1 – Third Edition
  10. RDFa Lite 1.1-Second Edition
  11. HTML+RDFa 1.1-second Edition
  12. HTML5 Image Description Extension (longdesc)
  13. CSS Style Attributes
  14. Internationalization Tag Set (ITS) Version 2.0
  15. Mobile Web Best Practices 1.0
  16. Document Object Model (DOM) Level 2 HTML Specification
  17. Ruby Annotation

HTTP

  1. Server-Sent Events

Performance

  1. Trace Context – Level 1
  2. WebAssembly Core Specification
  3. WebAssembly JavaScript Interface
  4. WebAssembly Web API
  5. High Resolution Time Level 2
  6. User Timing Level 2
  7. Performance Timeline
  8. Page Visibility (Second Edition)
  9. Navigation Timing

Security

  1. Web Authentication:An API for accessing Public Key Credentials Level 1
  2. Web Cryptography API
  3. Content Security Policy Level 2
  4. Subresource Integrity
  5. Cross-Origin Resource Sharing

Web API

  1. WebAssembly JavaScript Interface
  2. High Resolution Time Level 2
  3. Pointer Events
  4. User Timing Level 2
  5. WebDriver
  6. HTML Media Capture
  7. Indexed Database API 2.0
  8. Encrypted Media Extensions
  9. Web Cryptography API
  10. WebIDL Level 1
  11. Media Source Extensions ™
  12. Geolocation API Specification 2nd Edition
  13. Pointer Lock
  14. Vibration API (Second Edition)
  15. Web Storage (Second Edition)
  16. Web Notifications
  17. HTML5 Web Messaging
  18. Server-Sent Events
  19. Indexed Database API
  20. Metadata API for Media Resources 1.0
  21. Progress Events
  22. Performance Timeline
  23. Page Visibility (Second Edition)
  24. Touch Events
  25. Selectors API Level 1
  26. Navigation Timing
  27. Element Traversal Specification

WHATWG

WHATWG (Web Hypertext Application Technology Working Group), Dedicated to “Maintaining and Evolving HTML since 2004”.

The WHATWG currently works with the W3C to develop HTML and DOM standards.

See “Memorandum of Understanding Between W3C and WHATWG” : www.w3.org/2019/04/WHA…

In addition to HTML and DOM standards, the WHATWG is also developing other Web-related standards.

  • HTML Living Standard：html.spec.whatwg.org/multipage/
  • DOM Living Standard：dom.spec.whatwg.org/
  • Encoding Living Standard：encoding.spec.whatwg.org/
  • Fetch Living Standard：fetch.spec.whatwg.org/
  • Stream Living Standard：streams.spec.whatwg.org/
  • Console Living Standard：console.spec.whatwg.org/

More background: Do your own Internet search for “HTML5 Design Principles.”

summary

Web standards are mainly planned and formulated by W3C (World Wide Web Consortium), but IETF, Ecma and WHATWG are also important makers of Web standards. In general, the formulation of Web standards is open and international. Browser manufacturers and other Web standards implementers have more say, but front-end developers also have many ways to participate in the formulation of Web standards.

Web standards are not only a mandatory specification for front-end development, but also a cornerstone for the development of the front-end industry. Anyone who wants to make achievements, make achievements, innovate and make breakthroughs in the front-end industry should learn, study, master and practice Web standards. In this sense, Web standards are the force for all front-end developers, and the level of knowledge and mastery of Web standards determines the fate of each front-end practitioner.

I hope every student can learn Web standards seriously and show their skills in the field of front-end development.

The resources

  • HTTP/2 in Action(2019, Manning)
  • Professional JavaScript for Web Developers 4th Edition(2019, John Wiley & Sons, Inc.)