Web Standards & Advanced Features

Origin of the Web

The World Wide Web is attributed to computer scientist Sir Timothy Berners-Lee, who at the time worked for the European Organization for Atomic Research (CERN). He was looking for a way for visiting scientists to share research results. Sir Timothy was knighted by Queen Elizabeth in 2004.

The Web is standardized by the World Wide Web Consortium (https://w3.org), which publishes standards for HTML, CSS, and other components.

Fonts

Not all users may have the font(s) on their computers that you want to use. Solution: give the font(s) to the readers by (1) linking to the font file with the @font-face rule, (2) linking to the font on Google Fonts or a similar free fonts web site, or (3) providing a “fallback list” of fonts in order of preference.

Meta Elements

Meta elements go in the <head> and are important in search engine optimization, which is helping search engines like Google to find your site.

  <head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  

Page Structure

Standardized page structure includes tags for <header>, <main>, and <footer>, along with other useful tags including <sidebar>, <aside>, and <details>. Example of details and its accompanying <summary> tag:

Who is Alice in Wonderland? (Details example) According to Wikipedia, Alice in Wonderland, or simply Alice, is a Disney media franchise, commencing in 1951 with the theatrical release of the animated film Alice in Wonderland. The film is an adaptation of the books by Lewis Carroll, the 1865 novel Alice's Adventures in Wonderland and its 1871 sequel Through the Looking-Glass, which featured his character Alice.

Favicons

A favicon is a small image that appears at the left of browser tabs. Favicons are a nifty feature that can be important for a client’s brand identity.

To make a favicon, start with a PNG file, upload it to a favicon site like RealFaviconGenerator.net, and place the resulting code into the <head> of your document.

Variable-Width Pages

Variable-width pages showcase images when they are the primary feature, e.g., CNN’s feature article on photographer Drew Doggett. Two types of variable-width pages are those where the image is more important than the text and those where both images and text are important. Below are links to two such examples.