Paying attention to what’s behind the curtain: An introductory HTML activity
Presenter: Christine Photinos
School Affiliation: National University, San Diego
Email: cphotinos at nu.edu
Introduction
This HTML activity, designed for a general education information literacy course taught in a computer classroom, seeks to help students strengthen their mental model of how web pages work and encourage greater critical engagement with web authoring practices. Students study some HTML basics and create their own pages using a plain text editor. This foundational understanding of HTML allows them to examine the code behind a series of web pages, analyzing the strategies implied by various authorial choices. It also enables them to alter an existing page at the level of source.
Getting Started
Even a rudimentary, expeditiously acquired knowledge of HTML can go a long way towards demystifying the web page and activating critical engagement with web-authoring practices (Turnley, 2005). In this activity, students begin by studying a few HTML basics. (A web search for HTML tutorial will yield thousands of sites that explain HTML to beginners. A good interactive HTML tutorial is maintained by the World Wide Web Consortium at http://www.w3schools.com/html.) Then, using a plain text editor (in my classroom this means Notepad), students enter some basic tags:
<html> <head> <title></title> </head> <body> <h1></h1> <p></p> </body> </html>
As they move through the activity, they toggle back and forth between text editor and browser in order to view the effects of their changes. In the process of learning some HTML basics, they create a brief, web-based introduction to their in-progress research projects, written for a general audience: their classmates. Students usually elect to re-purpose the introductions they have produced for their preliminary drafts.
Paragraphs
Although this activity only minimally addresses the far broader topic of effective web authoring, it is useful to remind students that web writing is generally "chunked" into smaller units than what is typical in an academic research paper, for reasons that students already understand fairly well (e.g., reading from a computer screen, compared with reading from a printed page, is usually faster and non-sequential). Any number of pages can be used to quickly illustrate this point and to show how
<p></p>
tags are used to to define paragraphs. Throughout the activity, students navigate to pages that are discussed and view the source (right click and select "view source," or from the taskbar View menu, select "source"). Ctrl-F (Command-F on Mac) is used to navigate to specific items.
Titles and Headings
Our impulse is to consider a page's title as the first and most important means by which information about content is communicated to readers, and many students are initially surprised to see how little visual prominence is afforded the content enclosed in
<title></title>
tags (Figure 1).
This provides an occasion for a discussion of factors that, to varying degrees, determine how web page titles are written. Web page titles:
- are used by search engines to determine the relevancy of the page's content to a searcher's query
- are displayed in search engine results
- serve as the default label when a page is bookmarked
- are usually displayed in a page's title bar
For the class activity, students craft titles that clearly communicate the content of their pages. They then analyze the titles of some existing pages... Examples of titles written primarily for purposes of search engine optimization are not hard to find (Figures 2 and 3).
In some browsers (e.g., Google Chrome), there is no title bar (Figure 4). This arrangement further emphasizes the role of the title content in search rather than as orienting information for readers on the page itself.
Headings are intended to identify different topical sections on the page, with the content enclosed in
<h1></h1>
tags serving as the page's major heading. In practice, headings do not always work this way. For example, on some pages, the level-1 heading content is styled such that it is emphasized for search engines more than for visitors viewing the page itself (Figure 5).
Students visit such pages, view the source and use Ctrl-F (Command-F on a Mac) to find
<h1>
tags and examine how they are being used. Since level 1 headings, like titles, are understood to be a significant factor in SEO,
<h1></h1>
content generally complements
<title>
content (Figure 6).
But occasionally the two are quite different, as in the page from Esquire.com that appears in Figure 7.[www.slate.com="">1
The class looks at a sampling of web pages and considers what factors and assumptions seem to have informed the writer's choices for title and heading content.
Images and Links
Students next add the markup for an image and a hyperlink to their pages:
<img src="IMAGE URL"> <a href="URL"></a>
I have students use an image that they find online rather than uploading one of their own. They search http://search.creativecommons.org/ for images licensed under Creative Commons. (To access the image URL in Flickr, click on "Actions" and "View all sizes." Then right click on the desired size and choose "Copy Image Location.") For practice creating a link, they add to their pages a link back to the page where they found the image, and link text that credits the author. For example:
<img src="http://farm6.static.flickr.com/5081/5347580266_f1bd0f238d_m.jpg" /> <a href="http://www.flickr.com/photos/marciecasas/5347580266/">Photo by Marcie Casas</a>
Having added images in this way, students are well-positioned to understand the key structural point that the image is not part of their page. Rather, the browser is assembling a page based on the instructions they are providing in the markup. (A moment of attention to the relatively small size and bareness of the actual "page" students are working on is also helpful).
Alt
alt stands for “alternative” and represents “alternative text”-that is, words that stand in for the image. Students add an alt attribute to their image tag:
<img src="IMAGE URL" alt="alternative text that stands in for the image" />
Before they write their own alt content, it is helpful to point out that the alt content is generally written with multiple audiences/purposes in mind:
- Alt text describes the content of the image to visually-impaired audiences experiencing the page through a screen reader
- Alt text describes the content of the image to audiences who--by choice or due to technical constraints (e.g., low bandwidth)-are experiencing the site without visuals
- Alt text communicates information about the image to search engines
I illustrate the most important function of the alt text-accessibility for the visually impaired-by projecting pages onto the screen with the free Firefox add-on Fangs displaying how a page will be rendered by most screen readers. Such a tool can, more broadly, provide a sense of how the page will read from top to bottom, and of the means by which it might be navigated. It thus allows for more considered assessment of a page's accessibility than does an alt attribute in isolation.2 Other options for aiding comprehension of how pages will be experienced without images are:
- Viewing pages with images turned off (e.g., in Firefox: Tools> Options> Content > uncheck "Load images automatically")
- Viewing the page with the text-based browser Lynx 3
- Listening to pages being read through a screen reader, such as the online screen reader Web Anywhere
Any of these tools can also be used to demonstrate the distortion produced when alt attributes are used primarily as SEO tools. For example, a March 29, 2011 Huffington Post story about USC students unwittingly being photographed having sex on a rooftop is accompanied by a photo of a banner with the school's symbol, the profile of a Trojan warrior, and team name-"Trojans" (Figure 8).
The "alt" text for this image focuses on search engine optimization:
alt="USC Students Sex"
Students write "alt" content for their chosen image, practicing the selection of concise, information-rich descriptors while reflecting upon the challenges and limitations of the "alt" approach to accessibility.
Nofollow
Another example of behind-the-scenes page communication with search engines that can be illustrated by viewing page source is the use of nofollow. A page's search-engine ranking is improved when many external links point towards it. The rel attribute nofollow communicates to search engines that the link should not be read as a "vote" for the site-in other words, that the link should not influence the site's ranking. Most blogging software adds nofollow to links posted within comments to discourage the practice of link spamming: i.e., posting links for the sole or primary purpose of elevating the search ranking of the sites being linked to (Malaga, 2010). Special emphasis is given to links coming from sites deemed reliable, with the result that .edu pages that link to other pages for the purpose of analysis appear to search engines to be endorsing those pages. Thus, educators linking to pages containing bogus information as a means of illustrating the importance of critical web reading have often inadvertently elevated the search rankings of those same bogus pages. A peek at the source behind educational sites on web source evaluation can illustrate the use of nofollow to prevent this. For example, a discussion of hoaxes on the Lesley University Library site incorporates links to a site on Martin Luther King Jr. that is maintained by the white supremacist group Stormfront. The nofollow attribute value is used to prevent the site's use of the links for illustrative purposes from being "read" by search engines as an endorsement by Lesley University of the Stormfront pages. (Students can view this themselves by navigating to the Lesley University site, viewing the source, and searching for the term nofollow.) A discussion of nofollow is helpful to an overall understanding of search engine ranking and its limitations.
Tinkering
In Tinkering: Consumers Reinvent the Early Automobile, historian Kathleen Franz explores how the fad for "tinkering" among early automobile enthusiasts lent them a degree of pride and assertiveness in a culture that valued technological ingenuity. Many aspects of the history Franz recounts have parallels with the history of the web, where the low barrier to entry represented by HTML has allowed non-professionals to build pages and sites, often making design choices that express personal and popular tastes rather than allegiance to corporate interests and professional design standards, and that rankle design professionals. As the era of the personal web "page" gives way to the era of the web 2.0 "post," many have challenged simplistic distinctions between content and design (Arola, 2010). Objections to the diminishing role of non-professionals in shaping the web have additionally been expressed by those who wish to maintain openness as a core value for the web (Zittrain, 2008; Wu, 2010) and find cause for regret in the narrowing of opportunities for personal and popular expression (Whipple, 2010; Lanier, 2010) and for experiencing technological authority (Stephenson, 2011) through web authoring. This final part of the activity has students "tinker" with an existing web page as a means of reactivating some of the positive aspects of early web authoring while continuing to demystify and encourage critical engagement with basic HTML source code. The page my own students use is one that is familiar to all of them and a source of frustration for some: the school login page students must pass through to access our supplemental class site. The page source is viewed and saved in a new file. Then the tinkering begins. I provide a starting menu of possibilities:
- Navigate to
<h1>
on the page and replace the existing content. - Add additional headings.
- Emphasize text with
<strong></strong>
and
<em></em>
tags. - Add some text enclosed in
<marquee></marquee>
tags. (Among professional designers,
<marquee>
is one of the most-hated HTML tags of all time.) - Add an animated GIF. Animated GIFs, like
<marquee>
, are associated with bad 1990s web design.4">http://www.slate.com/articles/arts/culturebox/2010/10/christina_hendricks_on_an_endless_loop.html">4 (Search Creative Commons again, this time searching with the keywords animated GIF.) - Replace any other words on the login page. To find the words you wish to replace, use Ctrl-F (Command-F on a Mac).
Students then set to work changing the page, with little regard for dominant design principles (Figure 9).
Jeffrey Zeldman, in Designing with Web Standards (2007), expresses aversion for "messes flung together by ... self-taught HTML auteurs" (p. 43). If students are able to produce such a mess and enjoy doing so, the exercise serves its purpose. They will develop a better understanding of how a web page works, experience web authoring outside of the constraints of web 2.0 templates, and acquire an introductory level of knowledge and confidence that can serve as a foundation for further study.
References
Arola, Kristin. (2010, March). The design of Web 2.0: The rise of the template, the fall of design. Computers and Composition, 27(1), 4-14.
Franz, Kathleen.(2005). Tinkering: consumers reinvent the early automobile. Philadelphia: University of Pennsylvania Press.
Lanier, Jaron. (2010). You are Not a Gadget: A Manifesto. New York: Alfred A. Knopf.
Malaga, Ross A. (2010). Search Engine Optimization - Black and White Hat Approaches. Advances in Computers 78: 1-39.
Reilly, Colleen A. (2010). alt: Accessible web design or token gesture? In Bradley Dilger and Jeff Rice (Eds.), From A to < A > Keywords of markup. Minneapolis, MN: University of Minnesota Press.
Stephenson, Lynda Rutledge. (2011). Road trip: A writer's exploration of cyberspace as literary space. Kairos: A Journal of Rhetoric, Technology, and Pedagogy, 15 (2). Retrieved from http://kairos.technorhetoric.net/15.2/praxis/stephenson/index.html
Turnley, Melinda. (2005). Contextualized design: Teaching critical approaches to web authoring through redesign projects. Computers and Composition 22: 131–148.
Whipple, Bob. (2010). The evil tags, < bl
Wu, Tim. (2010). The master switch: The rise and fall of information empires. New York: Alfred A. Knopf.
Zeldman, Jeffrey. (2007). Designing with web standards (2nd ed). Berkeley, CA: New Riders.
Zittrain, Jonathan. (2008). The future of the Internet and how to stop it. New Haven, CT: Yale University Press.