So far, our browser sees web pages as a stream of open tags, close tags, and text. But HTML is actually a tree, and though the tree structure hasn’t been important yet, it will be central to later features like CSS, JavaScript, and visual effects. So this chapter adds a proper HTML parser and converts the layout engine to use it.
Laying Out Pages | Web Browser Engineering
So far, layout has been a linear process that handles open tags and close tags independently. But web pages are trees, and look like them: borders and backgrounds visually nest inside one another. To support that, this chapter switches to tree-based layout, where the tree of elements is transformed into a tree of layout objects before drawing. In the process, we’ll make web pages more colorful with backgrounds.
Chiaroscuro, or Expressive Trees in Web Components
This space intentionally left blank.
Useful patterns for building HTML tools
I’ve started using the term HTML tools to refer to HTML applications that I’ve been building which combine HTML, JavaScript, and CSS in a single file and use them to …
Close to the metal: web design and the browser
Websites have evolved over the years, but in the name of evolution, there seems to be mistaken thinking that the process of building a website needs to get more complex, using Javascript frameworks and modern backend systems; when at the end of the day, browsers still only need static HTML content to interpret.
Supporting Embedded Content | Web Browser Engineering
While our browser can render complex styles, visual effects, and animations, all of those apply basically just to text. Yet web pages contain a variety of non-text embedded content, from images to other web pages. Support for embedded content has powerful implications for browser architecture, performance, security, and open information access, and has played a key role throughout the web’s history.
Automation and customization of rendered web pages
The names of commands and objects are vital to the usability of a programming system. We are developing a web automation system in which users need to identify web page elements, such as hyperlinks and form fields, in pages written by other designers. ...
HTML Can Do That
HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML.
HTML Can Do That
HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML.
About HTML semantics and front-end architecture – Notes by Nicolas Gallagher
A critical look the term 'semantic HTML' and the limitations it has created for web engineers
Shoelace: A forward-thinking library of web components.
Hand-crafted custom elements for any occasion.
A Web of Data
Thoughts on making a "Web of Data" instead of a "Web of Pages", and how that might let us take a step away from the dominance of large, complicated browsers.
A Complete Introduction to Web Components
Web Components are a standard way to create reusable and modular HTML elements without using a JavaScript framework.
The HotJava Browser: A White Paper
Browsers allow people to treat the data spread across the Internet as a cohesive whole. Web browsers integrate the function of fetching the data with figuring out what it is and displaying it. One of the most important file types browsers understand is the hypertext markup language (HTML). HTML allows text data objects to embed simple formatting information and references to other objects.
playhtml — make the web feel alive
Make the web feel alive with interactive, collaborative HTML elements and no backend to run.
Building the DOM faster: speculative parsing, async, defer and preload – Mozilla Hacks - the Web developer blog
In 2017, the toolbox for making sure your web page loads fast includes everything from minification and asset optimization to caching, CDNs, code splitting and tree shaking. Understanding what goes ...
