Chapter 11 ■ the World Wide Web
188
The Hypertext Markup Language
There are shelves of books about the core document formats that power the Web. There are also the active standards
that describe the hypertext document format itself, the mechanisms available for styling them with Cascading Style
Sheets (CSS), and the API through which a browser-embedded language such as JavaScript (JS) can make live changes
to a document as the user interacts with it or as more information is retrieved from the server. The core standards and
resources are as follows:
http://www.w3.org/TR/html5/
http://www.w3.org/TR/CSS/
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
As this is a network-programming book, I will limit my attention to the way that these technologies involve
the network.
The Hypertext Markup Language (HTML) is a scheme for taking plain text and decorating it using almost
unreasonable numbers of angle brackets—that is, the less-than and greater-than signs <...> reimaged as opening
and closing brackets. Each pair of angle brackets creates a tag that either opens a new element in the document or
indicates with an initial slash that it closes an element that was previously opened. A simple paragraph with a word in
bold and another in italics might appear as follows:
This is a paragraph with bold and italic words.
Some tags are self-contained instead of requiring a corresponding closing tag to appear later—most famously,
the
tag that creates a mid-paragraph line break. More scrupulous authors type this as the self-closing tag
instead, a habit they learn from the Extensible Markup Language (XML), but HTML makes this optional.
In fact, HTML makes many things optional, including proper closing tags. When an
- unordered list element
- that it has been reading is also
now closed and finished, whether or not an actual tag was encountered.
ends, a conforming parser will also understand that the particular list element
The example paragraph given previously makes it clear that HTML is concentric. A designer can put elements
inside of elements inside of yet other elements as they build up a complete web page out of boxes. As the designer
builds, they almost inevitably wind up reusing elements from the limited set that HTML defines for several different
purposes on the page. Even though the new HTML5 standard allows new elements to be created on the fly in mid-
page, designers tend to stick with the standard ones.
A large page might use a generic tag like
generic way to mark running text) for a dozen different purposes each. How can CSS style each element appropriately,
and JavaScript let the user interact with them differently, when all
The answer is that the HTML author can specify a class for each element that provides a more specific label by
which it can be addressed. There are two general approaches to using classes.
The blanket approach is for the designer to attach a unique class to every single HTML element in their design.
Provo
61°F
Their CSS and JavaScript could then refer to these elements with selectors like .city and .temperature or, if they
want to be more specific, h5.city and p.temperature. The simplest form of CSS selector provides a tag name and
then a period-prefixed class name, either of which is optional.