Ian Marshall

Getting Started with HTML and CSS

Lesson 2: Thinking in HTML

If you wrote out all the HTML code exercises from the last lesson—and if you haven't, go do it now!—then no doubt you've wondered one or more of the following:

  1. Why is there sometimes so much typing involved just to display a little bit of text in the browser?
  2. Why are there different element tags that all result in displaying text the same way? (For example: <dfn>, <em>, <cite>, and <var> all just italicize text.)
  3. Why can't I just format text in a text editor like Word Wrangler or MS-Word and have that show up in the browser? That would be so much easier!
  4. Dude, how did any of this extraneous complication ever become a good idea?!

Dude, I feel ya. It seems like a lot of work now. But let's take a look at what we get for our efforts.



The above code, entered into a browser as HTML, produces the following result:

That's not exactly the intention, and running the text together kinda ruins one of the funniest lines in cinema ever (so says I). So text alone simply isn't enough. We have to also add some instructions to the browser so we have more control over how our text is displayed.

We can identify the dialogue as quotes and cite the movie as the source of the quotes. What would that look like?



    

Not a lot of improvement, actually. We do have quotation marks. And Airplane! is italicized (as it should be for correct grammar). But is that really worth the effort? Well, let's not give up yet.

Speaking of grammar, let's replace the terrible double hyphens with the grammatically correct em-dash using one of our HTML entities. Also, we still don't get separate lines, so let's handle that with line breaks.



    

Better, but still not good. The line breaks with <br> don't really do the job properly. (They should be avoided for other reasons, too, which we'll discuss with CSS.) Really, we want the quotes to have more significance than the movie title and date. We could absolutely style the heck out of this text using CSS, but for now we only have HTML. We already have access to tags with relative importance: <h1> through <h6> and <p>. Let's try some of those.



    

Aha! This is what we're after! This conveys the intention of displaying the quote in the first place. (Using the <h3> still isn't the best option for semantic reasons, but we don't have the CSS knowledge yet to achieve this in any other way.)

One last detail: what if we wanted a more explicit date and time for the movie's premiere on July 2, 1980? This explicit date and time would be available to the browser and other HTML readers, but not taking up valuable space on the actual screen. For that we could use the <time> element with its datetime attribute. Let's also add a user interface—in this case a tooltip—for our users who want to see the premiere date. We can do this with a title attribute!



    

Use your cursor to hover over the "1980" above and you'll see the date as a tooltip. Also, the timestamp is in a semantic and machine-readable format, just in case that's needed.

The <time> element with its datetime attribute are intended be be semantic and machine readable. Why is this important? Imagine you're creating a lot of articles and you want to display them in order of their published date. Well, you're not going to sort them by hand; you'll write code for a computer program to do it. How will the code know in what order to put the articles? By (machine) reading the date in the article! This and many, many other uses exist for keeping your HTML code readable by both machines and humans.

HTML Refresher

Let's take a moment to reacquaint ourselves with the HTML elements we've learned so far.

Interactive:

Hover over the HTML tag names below to see its effect on text.

<p>There's no reason to become alarmed, and we hope you'll enjoy the rest of your flight. By the way, is there anyone on board who knows how to fly a plane?</p>

Time for a little practice.

Exercise 2.01: Einstein

Instructions:

Using your code editor, create a new document called einstein.html. Try to recreate the below output on your own, and check your work in a browser.

I used only the following tags: <q> and <p>. There's also an em-dash.

Exercise 2.02: Nightmare

Instructions:

Using your code editor, create a new document called nightmare.html. Try to recreate the below output on your own, and check your work in a browser.

I used only the following tags: <p>, <br>, <h3>, and <cite>.

Exercise 2.03: Rock Paper Scissors Lizard Spock

Instructions:

Using your code editor, create a new document called rock_paper_scissors_lizard_spock.html. Try to recreate the below output on your own, and check your work in a browser.

Note:

  1. When your list items are all nested inside an ordered list, they will be displayed with numbers.

I used only the following tags: <h2>, <ol>, and <li>.

Exercise 2.04: Goddesses

Instructions:

Using your code editor, create a new document called goddesses.html. Try to recreate the below output on your own, and check your work in a browser.

Note:

  1. Remember that your dictionary terms and dictionary definitions should all be nested inside a dictionary list.

I used only the following tags: <dl>, <dt>, and <dd>.

Exercise 2.05: Fluffy Slime

Instructions:

Using your code editor, create a new document called fluffy_slime.html. Try to recreate the below output on your own, and check your work in a browser.

Notes:

  1. When your list items are all nested inside an unordered list, they will be displayed with bullets.
  2. A horizontal rule will draw a line.
  3. Content intended to come after the main content, like a footnote, should probably be nested inside a footer element.

I used only the following tags: <h1>, <ul>, <li>, <hr>, <footer>, <sup>, and <strong>.

So now we can finally answer those questions…

  1. Why is there sometimes so much typing involved just to display a little bit of text in the browser?

Different HTML tags indicate different semantic values for their content. An <h1> is a primary headline, perhaps for an article, and is most likely intended to have a higher significance than the run-of-the-mill <p> tags comprising the body of that article. Imagine you're searching for an article on a particular subject. You'd likely appreciate receiving a list of possible articles with the closest matches at the top, right? Well, how would a computer program know which article is more relevant than another? How would it order the list? Perhaps, if the search term appears in an <h1> the article will score higher on the search than if the term only appears in a <p> tag.

In order to assign the proper relative values to each element, you need tags. And, sometimes, you need to provide some extra machine-readable information such as to what page a hyperlink should go, or where to find the correct image to insert. These could be extra instructions to the browser or even extra data for possible future use. As we'll see in upcoming chapters and lessons, much of the "so much typing" isn't "just to display a little bit of text in the browser" but rather to assist in the machine's understanding of our website content.

  1. Why are there different element tags that all result in displaying text the same way? (For example: <dfn>, <em>, <cite>, and <var> all just italicize text.)

Do not confuse semantics with styling. A citation is different from a variable, and both are different from a bit of emphasized text. Remember the goal is machine understanding, which requires specificity in these distinctions. No machine (yet) can intuit the purpose of one term over another. If we used, say, <em> tags for everything needing to be italicized, we wouldn't later be able to search the HTML only for citations or definitions.

We also have yet to discover CSS. We'll get there soon. Right now we're relying on the browser's default display choices. It's really only coincidental that all four tags produce italicized text: there are only so many ways to alter text (bold, italics, underline, color, size, etc.). It shouldn't be a surprise there are overlaps. When we do get to applying our own custom styling with CSS, however, you'll come to appreciate being able to style citations and variables differently—as long as they're given the appropriate tag.

  1. Why can't I just format text in a text editor like Word Wrangler or MS-Word and have that show up in the browser? That would be so much easier!

There are indeed resources available to create a WYSIWYG website ("What you see is what you get"). You can drag images and blocks of text around the page, click a button, and produce the HTML document you want. Cool, right? Easy!

But consider for a moment what you are giving up for the sake of easy. For one, you're not really learning the underlying technology, but rather learning only how to operate the thing that does it for you. This is relinquishing control, which may be justifiable because of time or budget constraints. But there's no guarantee the site will be built well, or even correctly. What if the WYSIWYG application only sees italicized text as being <em> tags? Want to style your citations differently later? Tough luck.

But there's no relinquishing responsibility. Proper HTML semantics are essential for search engine optimization (SEO) and handicap accessibility, both of which we'll discuss in a more advanced course. Ignoring these important issues is harmful to your site and your professionalism.

  1. Dude, how did any of this extraneous complication ever become a good idea?!

Hopefully by now, dude, you can answer this one yourself.

But science is always open to new and better ideas, particularly computer science. So if you think of a way to solve all the problems we explored in this chapter using easier, more intuitive syntax, then there's a whole industry waiting to hear from you! This is not facetious: new ideas in web development and Internet standards are written up as RFC documents ("Request for Comments"). Check out the website for The Internet Engineering Task Force (IETF) for up-to-date standards. They would love to hear any real suggestions or insight you may have.

What Exactly Is HTML?

It may seem strange to have waited until now to define something we've already been working with for so long, but I find labels and terms tend to get in the way sometimes. Jumping right into exploration before an explanation is backward only in that it's so infrequently done. Yet I feel this is the true way to learn. If I had lead with this section, you'd most likely have forgotten it long ago. But now you have an abstract understanding on which to apply labels and terms, so hopefully they'll wedge themselves somewhere in long-term memory.

We've been learning a form of markup language, which applies semantic meaning to data by annotating them directly in the same document. Markup has been used by copy editors for centuries, who would write comments and changes right on the paper with a specific syntax system. Here are examples of proofreaders' marks from the Chicago Manual of Style. The idea of applying that same concept to digital data, especially text, started in the late 1960s but came to maturity in the 80s (starting around the same time Airplane! premiered) with the advent of personal computers and the first word processors. Markup allowed text and its edits to be stored in the same digital document, saving memory space. And presentation, or display rules, could be derived from the markup, too: text identified as a headline could easily be displayed more prominently than paragraph text.

In 1989, Mr. Tim Berners-Lee (later, the Queen would change the "Mr." to "Sir") invented a new markup language intended to be used on the Internet. He called it Hypertext Markup Language (HTML) and it had only eighteen different, but semantically descriptive, tags with which to mark up text. We'll explore the significance of Sir Tim's contribution to humankind in another course, when we discuss the World Wide Web and HTTP, but for now just know that his name is hugely significant in the history of computer science.

As of this writing, we have had five versions of HTML, the latest given the creative name HTML5, and we now have many more tags than the original eighteen. HTML is considered the "language of the Web" and is the most commonly used markup language on the planet.

Review

Two chapters in and we're already getting a good feel for HTML. It can be a bit tedious to type out, but there are legitimate reasons we should learn to love all the extra data we're including. Some good advice:

Answers

Note:

Your answers may be different and still be acceptable! Your interpretation of relative sizes, for example, may not be the ones I used, but still produce a result fairly close to the expected output. Don't stress.

einstein.html


    
nightmare.html


    
rock_paper_scissors_lizard_spock.html


    
goddesses.html


    
fluffy_slime.html