Just Another Language Class
It should not have come as a shock to me that the more I learn about HTML and coding, the more I understand that what we are doing to put our content into a legible format for online purposes is really nothing other than framing that content inside another language. And learning this framing-language is really no different from learning any other language in a language class. After all, HTML is short for Hypertext Mark-up Language.
One of my majors at university was English Philology, so I learned about phonetics and phonology (the study of sound in a language), about syntax and about semantics. I understood that one could create grammatically correct and syntactically beautifully phrased sentences that make no sense at all semantically. For example:
“I ate a piece of dry water”
is a grammatically correct sentence. The verb has the correct agreement, the past tense is formed correctly (‘ate’ rather than ‘eated’), and the words are in the correct order (Subject – Verb – Object rather than Yoda-Speak ‘Of dry water I ate a piece’). But semantically, the sentence is complete non-sense because you can neither eat water, nor is it dry, nor can you cut or break it into pieces. Your listener would be utterly confused were you to say something like that. I am sure we have all found ourselves in a situation where we thought “I understand the words, but I don’t understand the meaning!”
Baby Yoda’s genuinely confused reaction when confronted with “I ate a piece of dry water.” Image courtesy of tenor.com
To cut a long story short: Semantics can be defined firstly as the field of study in linguistics that looks at meaning in language symbols, and secondly as the content or meaning of words, sentences and texts.
I was quite happy to hear that HTML requires semantics as well in order to be read and understood universally. This means that the semantic structure of an HTML text can be recognized and read by all browsers, anywhere, regardless of what the input language is. It makes no difference whether the content of my webpage is in English, Mandarin, Russian or Arabic (or, in fact, any other language).
The semantic <em> element for example is used for emphasis and shows the content in italics. It makes content recognizable as receiving particular emphasis, pointing out foreign words or special terminology. The <strong> element puts content into bold characters, also making it recognizable as receiving particular emphasis.
In addition to adding meaning to certain words or excerpts of a text, there are also semantic elements that add a structure to a text or page. To understand the meaning and the importance of the correct distinction between these elements, let us just have a quick look at the <header> and the <footer> elements.
Basically, all webpages have a header and a footer area. And once you start paying attention to it, you will notice they are all made up of more or less the same content. In the header, we will usually find the page name, the logo, the main menu and maybe the links to other social media – all things of immediate importance when you are visiting a website and things that help the user navigate the page. In the footer area, on the other hand, we usually find things like copy right info, contact details, further links etc. – additional information for people who want to know more.
HTML gives us the option of framing our content inside those elements, making them recognizable as belonging to the header or the footer area.
<header>
Webpage Name
Logo
Main Menu
Links to social media
</header>*
Or
<footer>
Copy Right Info
Contact Detail
Further Links
</footer>*
These elements help us structure our page by adding meaning to elected blocks of content, by defining that these units belong together, and in the case of the <header> element that these units are of prime importance to the visitor. Exchanging the content of the header with that of the footer would just be another
“I ate a piece of dry water.”
And we know the reaction to that.
*Please note that this is not correct coding
