Introduction to Web Design For Literary Theorists

Third Workshop:
Machines Read, Too (with a little help from their human friends)

Patrick Mooney
Co-Lead TA, 2013-2015
Department of English
UC Santa Barbara

Objectives for this workshop series

Objectives for today's workshop

More specifically …

Today we will be talking about:

Details, details ...

Reminders from previous workshops

Reminder: A minimally acceptable XHTML document...

... has these elements:

So how do machines see text?

Think about how your students encounter difficult texts:

Caddy came to the door and stood there, looking at Father and Mother. Her eyes flew at me, and away. I began to cry. It went loud and I got up. Caddy came in and stood with her back to the wall, looking at me. I went toward her, crying, and she shrank against the wall and I saw her but I pulled at her dress. Her eyes ran.

Versh said, Your name Benjamin now. You know how come your name Benjamin now. They making a bluegum out of you.

    — William Faulkner, The Sound and the Fury (page 44 in the Norton Critical Edition)

Why be nice to machines?

Some additional <head> contents

The <meta> tag

Some examples

<meta name="generator" content="Bluefish 2.2.3" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Patrick Mooney" />
<meta name="copyright" content="Copyright © 2014 Patrick Mooney" />
<meta name="keywords" content="Southern literature, UCSB, spring 2014, Faulkner, Eudora Welty" />
<meta name="description" content="Notes for my discussion section in English 133SO, Spring 2014, at UC Santa Barbara." />
<meta name="date" content="2014-05-29T03:47:45-0700" />

Indicating the (natural) language of your text


Some Attributes Are for any Tag

Marking up personal information with hCard

  1. Find the HTML tag that encloses all of the relevant information (or, if there isn't one, surround the information with <span> ... </span> or <div> ... </div>). Give this element the class vcard.
  2. Mark up whatever relevant information is there with class names from the hCard vocabulary.
    • The only required piece of information is fn ("formatted name"), but you can provide a lot of other information if you'd like: email, telephone, web page, address, birthday, photo, etc.


Some more hCard notes

Another microformat: hCalendar

Other considerations


A final microformat: XFN

What you can put in rel= values

relationship category sample XFN values
friendship (at most one) friend, acquaintance, contact
physical met
professional co-worker, colleague
geographical (at most one) co-resident, neighbor
family (at most one) child, parent, sibling, spouse, kin
romantic crush, date, sweetheart
identity me

Uses of rel=

Be nice to Google

One of the reasons for using microformats: Google leverages them for deciding how to display search results.


A sample

<urlset xmlns="">

Some considerations

Open Graph

Add a bit of verbiage to your root <html> element

<html prefix="og:">

Four characteristics are mandatory to be minimally compliant:

<meta property="og:title" content="Discussion Notes for George Eliot's Middlemarch" />
<meta property="og:type" content="website" />
<meta property="og:url" content="[the document's actual URL]" />
<meta property="og:image" content="[URL of a thumbnail image]" />

Increasing your search engine ranking

Treat your own home page as a central hub for your online presence

How much of this is worthwhile?

What else can I do?