Rendering

As explained in Web Design Playground, Second Edition

Rendering is the process of interpreting web document code and producing its visual representation on a device.

Rendering is the browser’s translation of HTML tags and CSS properties into the visible layout of a web page on a device. section 1.1 section 1.4

Rendering connects a visitor’s request to the page they see:

• A web browser requests a page from a web server. section 1.4
• The server sends the HTML and CSS files to the browser. section 1.4
• The browser interprets the code and displays the resulting page. section 1.1 section 1.4

From plain text to a readable page

A browser can display a plain-text file, but HTML tags turn its text into structured paragraphs, lists, links, and other readable page elements. Rendering performs that visible transformation. section 1.1

Figure 1.4 To go from HTML and CSS to a web page, you send your code to a web server, and visitors use their web browsers to retrieve and render your code into a page.

Trace the complete path from HTML and CSS files to a browser-rendered page. section 1.4

How Web Design Playground, Second Edition covers it

How deep it goes

Defines rendering and traces the request-and-display workflow, but defers the more convoluted web-publishing procedure.

Examples

Uses plain-text files, HTML tags, structured page elements, and a server-to-browser page diagram.

What you can do after

Evaluate/understand how browser requests and interprets HTML and CSS to produce a displayed page.

How it connects

Connects HTML, CSS, web browsers, web servers, and web pages through the delivery and display process.

liveBookmanning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  React Quickly, Second EditionA render method is a component method that returns the element tree representing the component's user-interface output.
• 

  liveBookmanning.com
  CSS in Depth, Second EditionRendering is the process of converting computed document styles and content into pixels displayed on a screen.
• 

  liveBookmanning.com
  Web Components in ActionA render method is a component method that returns the markup representing the component's rendered content.

Compare how 4 books explain rendering →

Related concepts

• compositehas part · Composite is the rendering stage that combines painted layers into the final displayed image in stacking order.
• stateuses · State is information or a configuration describing the condition of a system, entity, or computation at a particular time and potentially influencing subsequent behavior or decisions.
• parsingcontrasts with · Parsing is the analysis of input according to structural or syntactic rules to identify its components and produce a structured, usable representation.
• layouthas part · A layout is the arrangement and positioning of content or interface elements within a page, screen, or other visual area.
• painthas part · Paint is the browser rendering stage that converts styled document content into visual output.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.