The World Wide Web Consortium (W3C) creates standards for web content and programing languages, including the standards followed by reliable web browsers (i.e. not IE). The level of detail in W3C documents makes them difficult to follow, even for experienced developers. Thankfully, you generally don’t need to know precisely how and why HTML, CSS, and JavaScript work, since your content management system and similar tools create and manage code for you, letting you focus on content and presentation. If you’re nonetheless interested, this page explains the basics of how browsers interpret web content.
Web page content: the Document Object Model
When a web browser renders a web page, it creates the page according to the Document Object Model (DOM) specification. The structure of the DOM, among other functions, makes it possible for the components of a web page to relate to one another. The DOM spec understands each page as a document, consisting of many components, or objects. Typically, an object is initially defined by HTML, styled by CSS, and then, possibly, manipulated with JavaScript.
HTML
HTML (HyperText Markup Language) code is the basis of most web pages. HTML may be hard-coded and saved as text file, or it might be generated dynamically by server-side software, such as PHP, merging data from a database into a template. In both cases, HTML provides the structure of a web page and informs a web browser that is should load and display page basic components such as scripts, style definitions, text, images, audio, and video. When a browser reads an HTML file, it understands that each component of the file should become an object in the DOM. However, HTML does not define the details of how DOM objects should look or behave.
CSS
CSS (Cascading Style Sheets) files are lists of rules about how browsers should render and present DOM content. Separating HTML from CSS pursues the ideal that content and its presentation should be made distinct. Once a browser processes HTML into the DOM, CSS can inform the browser that, for example, all paragraph text should be of a certain size and color. CSS rules can be general or highly contextual. CSS can define different rules for different size devices, so the same HTML can be optimized for both desktop and mobile viewing. CSS can also define rules differently for screen and print versions, for example, to hide navigation for print outs.
JavaScript
JavaScript is used to create, modify, and delete elements of the DOM after the browser creates the initial document. JavaScript can be run automatically when a page loads but usually responds to user interaction with a web document. For example, tapping or clicking a paragraph could cause new text to appear. JavaScript can modify the functionality of a link on a page so that, instead of opening a new page, the link will display or hide content elsewhere on the page, all without reloading the page.
JavaScript is a client-side language, meaning JavaScript code is provided as-written to web browsers, and browsers execute the code without needing to communicate with a server (unless the code directs the browser to do so). Client-side code can be processed quickly, without regard for network speed and delays. JavaScript is not closely related to the language Java, except that JavaScript may have been named after Java for marketing reasons.
Other content formats
Web pages, including embedded multimedia, make up most of the human-facing internet, but other formats are used to help servers and web applications communicate between one another. Though it’s occasionally helpful to be able to recognize such formats, you will rarely need to use them directly but will instead run across them when exporting or importing data.
XML
Most web browsers can interpret not only HTML but other markup languages, including documents complying with a set of standards known as XML (eXtensible Markup Language). XML can be used to code data and metadata of almost any type and is the basis of RSS and ATOM syndication feeds, including those used to define Podcasts.
JSON
JSON (JavaScript Object Notation) is, much like XML, a standard used for coding data and metadata. JSON’s syntax is similar to, but not identical to, JavaScript’s syntax for defining an object. JSON is not part of JavaScript but was inspired by it.