Web Standards
Background
In the 1980s, universities and research organizations were looking to centralize
digital document storage and retrieval both campus-wide and for sharing with
other institutions. Out of the many solutions developed by researchers, the most
popular paradigm arose out of a project from
He called this system of syntax, along with its related software and
communication protocols, the WorldWideWeb. In April of 1993,
The rest, of course, is history.
The idea of a document is a foundational concept in web development. From a web applications perspective, this nomenclature is now mainly a relic, but it still appears in many contexts and also provides perspective on why browser technologies are the way they are and whence they evolved. Keep in the back of your mind the knowledge that these technologies originated out of the need to store and display actual documents – a research paper, or article, for example – digital entities more or less directly analogous to their analog counterparts in print and physical media. You will see that much of the terminology used in styling is derived from print and typographical principles as old as print itself.
The majority of existing texts and courses aimed at instructing those starting out in web development take a perspective with an ultimate goal of making document- or article-like content; that is, websites which have clearly-defined pages, the main feature of which is a something like a body of text with interspersed images and other supporting media. This approach is useful and necessary in many instances, if not the majority of published web content.
However, our aim in this text is to lay the foundations for building first-class web applications. Until fairly recently, achieving the layout and positioning needs of non-trivial applications was tediously difficult and required a deep understanding of many moving parts and subtleties of CSS in order to produce by hand. (Hence, the rise and proliferation of UI frameworks which allow developers to abstract away their layout concerns… to an extent.)
But things have changed dramatically even in just the past few years. We have amazing, flexible standards at our disposal which were designed from the start to build layouts for applications that respond to the needs of the content and the size of the user’s screen.
Throughout this text we will focus on the latest specifications which have been created specifically with web applications in mind and are supported by all modern browsers. If your project requires targeting or supporting much older legacy browsers, be aware that you will have some more work to do in ensuring that your content will work properly and/or have graceful fallback functionality.
Separation of Concerns
One of the fundamental architectural designs of how the front-end works arises from the principle of Separation of Concerns. (Of course this general principle is common throughout many software patterns and is not unique to the web.) In the browser we define three general “spheres” of concern: content, presentation, and behavior.
Content
What data is on the page? What elements should exist? How should related content be logically grouped and/or nested? What is the context of each piece of content – does it have a type, like a paragraph, button, link, heading, table of data, list, or image? This is where we make sure we “have the right stuff”.
Presentation
How should the content be displayed? How should it be laid out on the screen relative to other content? What visual styles should be applied to different pieces of the content?
Behavior
How should the content behave? How should the user be able to behave and interact with the content? How might the content change over time, or dynamically communicate with external services after initially rendering the page?
The implementation of these three spheres of concern are expressed in HTML, CSS, and JavaScript, respectively. Each of these languages’ syntax, specifications, and conventions are well-tuned to function effectively for their own domain.
We will later see how these pieces tie together in the browser. For highly interactive and dynamic web applications especially, the separation between these spheres can become blurred. Content, rather than being expressed in static HTML documents, will instead be updated dynamically through JavaScript using the DOM API; styles, too, may be changed on the application’s page over time rather than through pre-authored static CSS.
However, first grasping static HTML and CSS are still crucial preliminary steps to understanding the web platform as a whole.
Standards Organizations
Web standards are fundamental to the operation and longevity of websites and web applications. Strong, common standards are what allow us to run an application from one codebase on any device with a standards-compliant browser, regardless of underlying operating system or hardware.
The first decade and a half of web development saw some bumps in the road in regards to standards – and, even more noticeably, their implementation across browsers. The story is incredibly different today, however. With defined and well-managed standards organizations and processes, and the ubiquity of frequently self-updating “evergreen” browsers, developers use web standards to correctly implement their programs with cross-browser quirks few and far between.
W3C
The HTML and CSS specifications are maintained by the World Wide Web Consortium (W3C).