How Heraldry Helped Me Learn HTML
Reflections on how King Arthur, the Catalan language, and the craft of knitting shape my understanding of code
A few weeks ago, I began my quest to learn HTML armed with a fifteen-year-old master’s degree in medieval history and a book written for children called Create With Code.
The book delivered on its promise to help readers “build [their] own website.” Within a few days, I had a basic website up and running. The fact that it consisted of a visual mess did not signify; I had painstakingly crafted each line of code and was as proud of this design disaster as I was of the very first socks that I knit more than twenty years ago (which, coincidentally, were also an exercise in questionable colour combinations).
Now, I will not say that coding comes naturally to me, because it doesn’t and I doubt that it ever will. However, it overwhelmed me much less than I had anticipated. It transpires that learning basic Catalan, a knowledge of heraldry, and the ability to knit lace shawls can cushion the blow of computer science to one’s brain.
How is Catalan relevant to coding?
In the pandemic before-times, we went to Barcelona. Before our departure, I decided to learn some Catalan. As a child who grew up speaking French, I’d been told that Spanish would be a doddle. Not true in my case; I struggled with it for decades and thus approached Catalan with no little apprehension. To my surprise, Catalan bore many more overt similarities to French and I found it much easier than Spanish. Still, there wasn’t enough time to do a deep dive into its grammar and nuances. I jotted down a few tourist phrases, common nouns, and some verb conjugations, and hoped for the best.
Create With Code reminded me of a tourist phrasebook. It didn’t explain a lot of theory (all the links where it promised more tips turned out to be dead), preferring instead to have its readers make rapid progress according to the “repeat after me” philosophy. I wandered around my webpage inserting pictures, maps, and tables in the same rote way in which I could order a drink in Catalan: by repeating a collection of words that I didn’t really understand.
However, as I learned in Barcelona, a phrasebook will get you quite far. Even if you have to scramble to look up what you want to say, you can make yourself understood despite your terrible accent. Similarly, the code that I copied verbatim from Create With Code and Google searches probably lacked elegance, but it got the job — or a job, at least — done.
With a multi-page website now up and running, I pivoted to a more thorough approach and promptly started Khan Academy’s Intro to HTML/CSS course. If Create With Code was a phrasebook, then Khan Academy’s course was a grammar book. Apparently, href isn’t a cousin of Hrothgar from Beowulf as I, lacking any other explanation, had convinced myself; rather, it’s a portmanteau of hypertext + reference. Padding, meanwhile, refers not to a certain English bear who is missing his tail, but to “the space between the content of the element and its border.” With every 4-minute video segment, I understand more about the grammar and structure of HTML and CSS, and how to manipulate them to serve my own ends.
I still can’t speak Catalan very well, but I can read newspapers, street signs, and menus. As a tourist, I don’t really need to do more. My goal in HTML is similarly modest: to have enough of the language at my fingertips to build a simple personal website with minimal bells and whistles. Already I am hopeful that <header>The Monkey’s Distaff<br></header> will engender less side-eye than my perpetually self-conscious request of “suc de taronja, si us plau.”
So how does heraldry tie in?
I wrote my master’s thesis about heraldry in Arthurian legend. That is to say, at one point in my life I knew a lot about coats of arms. My brain has retained very little of that knowledge today, but in an apparent attempt to understand HTML it managed to dredge up some vague memories of heraldic language, which is known as blazon.
Blazon — the art of describing a shield — is all about nesting and layers. You start with at the bottom and work your way to the top. Hence a coat of arms that appears flat in fact contains many different levels. In this sense, a herald sees a shield in a very different way than a layperson.
Blazon is such that it can perfectly describe any coat of arms without leaving any doubt as to its appearance. Ironically, given the complexity of what it describes, blazon has no subtleties. Each word has a single, limited meaning from which deviation is not possible. To omit a word or to order it wrongly is to change the appearance of the shield or even render its description incomprehensible.
So too with HTML. " and > and } have become my new nemeses. I have repeatedly bashed the “reload” button only to see no visible changes, sworn uncreatively but loudly for several minutes, and then scrutinised my work only to find that, in thirty lines of code, I forgot a single > that renders it all moot. That head and header refer to two different things seems completely ridiculous, but then I remember that a shield per pale argent and gules does not look the same as a shield per pale gules and argent and it begins to make sense. And oh, how much woe has been my lot due to my inability to see how to nest div within section, section within article, and article within body. Sometimes I preview a page and try to look at it through “heraldic eyes” in order to understand how to structure the code. (I also sketch a lot of nested boxes. They’re less elegant than a lion passant guardant Or, langued and armed azure, but they get the job done.)
Regular languages teach many of the same lessons as blazon; for example, in French enchanter, enchanté, and enchantée all mean slightly different things though they sound the same. Natural language, however, is more forgiving. You might make yourself look like an undereducated fool if you write enchanter in a sentence that calls for enchantée, but your audience will understand you. The computer, by contrast, is an ungenerous and literal interpreter of words. I speak five languages, but blazon has been more useful to me than any of them in making clear the need for pedantic precision in code.
You just had to drag knitting into it, didn’t you?
Yeah, I did. I learned to knit at the age of seven, and in the same way that some people “measure out [their] life in coffee spoons” I measure mine in knitting needles.
Actually, it’s designing patterns rather than knitting itself that has informed my approach to programming. I prefer to design iteratively. That is, I just start knitting: a sweater, a hat, mittens, a shawl. If it displeases me, I unravel it and begin again. And again, and again, and again until I’m happy with it. This is my twist on “swatching” — the practice of knitting a test square (a “swatch”) to see if your chosen needles, yarn, and pattern work together as harmoniously as you imagine they will. Spoiler alert: they often don’t.
Knitting has taught me that even the best-laid plans can go awry. Occasionally I forego the swatching principle and instead chart out an entire shawl, only to discover within ten minutes of casting on that the design is doomed to fail. For this reason, I use the swatching technique in the creation of websites. In practice, it involves refreshing the page after every tweak of code. Don’t like it? Delete it! Not to mention that if you swatch, you won’t waste thirty hours on a theoretical design that simply doesn’t work in practice. On that note in particular, I speak from painful experience.
Conclusion
Obviously, learning to code would have been easier twenty years ago or if I were a social scientist or accountant accustomed to dealing with spreadsheet-based algorithms. Attempting to acquire this skill as a forty-year-old ex-medievalist is probably a lot like learning a natural language at the same age. I’ll always have an accent and have to consciously think about grammar. There will be a limit at which I max out my abilities, and it will probably come sooner rather than later.
Yet my point is that it isn’t impossible. The skills that humanities and craft taught me — how to think about grammar and language, to look critically at art, to bin a project and start anew from scratch — serve me well on this HTML journey too.