CS 100 (Learn) — CS 100 (Web) — Module 07
So far we have seen a few HTML tags, including:
<html> <head> <title> <body> <em> <strong> <a> <p> <ul> <li>
It may surprise you to learn that you have already seen most of the important HTML tags that were in the early versions of HTML (early 1990s).
Hypothetically, there is nothing stopping you from using these tags to create a massive encyclopedia of knowledge, which was part of the original vision for the World Wide Web.
However, you may find that your encyclopedic web pages look a little "boring".
When the Web started to explode in the late 1990s, people found the "boring" web pages very unsatisfactory.
To make web pages more exciting, HTML was expanded to add features for controlling the appearance of web pages. This included adding colours, different fonts and other formatting choices.
In general, we refer to all of the different ways of changing the appearance and formatting of a web page as style.
If you're so inclined, you can search for "ugly 90s web pages" and see some of the horrific web sites that existed.
For example, the HTML tag <blink> was added as a joke to allow for adding Blinking Text to a web page:
<blink>Blinking Text</blink>
But people used it to make their web pages stand out. Eventually the <blink> tag was removed because, well... it was terrible. (If you're curious, the above blinking text was done with web animation, not using a <blink> tag).
It wasn't just <blink> that was removed from HTML. Most of the stylistic HTML introduced in the 90s has been removed.
The ability to intertwine the style with the content of the web page was a mistake.
HTML was specifically designed to avoid the inclusion of most style. The intent was to separate the content from the style. This is because the style should depend on where the content appears.
For example, consider your favourite novel. The core components of the novel content are the words, paragraphs and chapters. It should not matter what font is used or what the colour of the text is.
You can imagine that a novel might be published in many different styles:
Once again, the goal is to separate the content from the style.
The goal with HTML is to use the most appropriate markup to properly convey the meaning of the content.
For example, consider the following text:
According to the book Wild Birds, the Canada Goose (Branta canadensis) can be very dangerous. If you accidentally approach a nest and a goose starts honking at you, slowly back away while maintaining eye contact.
It might appear that there is a lot of style in that excerpt, but the style was added by the web browser. If we look at the HTML, we can see that the markup was used to convey meaning.
It's not obvious by looking at the displayed text, but there are actually three different types of markup used, even though they all appear as italics.
<em>: add emphasis to text<cite>: reference the title of a work like a book or a movie<i>: text that is italicized without emphasis, such as when a foreign word is usedAccording to the book <cite>Wild Birds</cite>, the Canada Goose (<i>Branta canadensis</i>) can be very dangerous.
If you accidentally approach a nest and a goose starts honking at you, slowly back away while <em>maintaining eye contact</em>.
For most readers on a traditional display device, there is no distinction between using <i>, <em> and <cite>. As a result, people are often careless and use the <i> tag more often than it should (in practice, <i> should be rarely used).
However, this is important for the few people that do not use a traditional display. Imagine that a visually impaired person is using a special device to read the passage. That device may convey the information quite differently, depending on the markup.
To a lesser extent, this is also important as we develop more advanced technologies to search and interpret the web. Someone searching for the book Wild Birds might find this web page more easily because the <cite> tag was used.
We have seen the <strong> tag, which should be used to convey important information. There is a <b> (bold) tag that appears the same in most browsers, but like the <i> tag it should be used rarely (for example, when a new keyword is introduced).
Unfortunately, people often use <strong> or other markup incorrectly to identify headers and sub-sections of a web page.
<p><strong>MAIN HEADER</strong>
<p>blah blah blah....
<p><strong>Sub-Section</strong>
<p>more blah blah blah....
<p><em><Sub-Sub-Section</em>
<p>even more blah blah blah....
MAIN HEADER
blah blah blah....
Sub-Section
more blah blah blah....
Sub-Sub-Section
even more blah blah blah....
The proper way to markup a section in HTML is to use the heading tags: <h1> <h2> <h3> ... <h6>.
The main heading should use <h1>, and then sub-sections should use <h2> and then sub-sub-sections should use <h3> and so on.
<h1>Main Header</h1>
<p>blah blah blah....
<h2>Sub-Section</h2>
<p>more blah blah blah....
<h3>Sub-Sub-Section</h3>
<p>even more blah blah blah....
Main Header
blah blah blah....
Sub-Section
more blah blah blah....
Sub-Sub-Section
even more blah blah blah....
Note that the headings are not paragraphs, so do not use them inside of a <p> tag.