Eric Frederickson

E

Technical overview

When you view a page on emfred.com (or on any website), what you see is the result of your web browser rendering a special kind of data called hypertext, which is just regular text augmented with mechanisms for describing all of the bells and whistles that we expect to see on web pages (things like links, images, text of different sizes and styles, and so on). For instance, the hypertext code for this paragraph, and the title “Technical overview” above it, looks like this:


<h1>
  Technical overview
</h1>

<p>
  When you view a page on emfred.com (or on any website), what you see is the
  result of your web browser rendering a special kind of data called
  <em> <strong> hypertext </strong> </em>
  , which is just regular text augmented with all of the bells and whistles that
  we expect to see on web pages (things like links, images, text of different
  sizes and styles, and so on). For instance, the hypertext code for this
  paragraph, and the title "Technical overview" above it, looks like this:
</p>

Notice how, in the hypertext, the phrase “Technical overview” is surrounded by the symbols <h1> and </h1>. These are called tags, and they surround pieces of text to define special styling that should be applied to that text when your browser renders it. In the example we were looking at, h1 is short for “header (level 1)”. The purpose of h1 tags is to tell the browser that whatever’s inside of them should be header-size, i.e. big. Now notice how, at the top of this webpage, the words “Technical overview” are in a large, title-sized font: this is because the h1 tags in my website’s code (as shown in the hypertext block above) told your browser to render the text that way.