HTML Basics - Not-so-Subtle Semantics
Typically a word unfamiliar to new programming students, semantics has a huge role to play in every language of code we have. Merriam-Webster defines semantics as “the study of the meanings of words and phrases” (see, not typical language for computer geeks) but in the context of programming, it could more specifically be used to describe ‘meaning of elements’.
But what does that mean? What elements? What meaning?
That is what I asked myself the first time I heard the term - and I heard it a lot. My first programming professor had an apparent love affair with the word and its overuse in the crowded halls of that first class made a word about meaning, well, meaningless.
So, allow me to save you the tedious journey of trying to understand like I had to - Semantics in a programming sense is simply the meaning of code elements.
That’s it. It’s that easy.
This stands in contrast to syntax, which is the actual written command and how it is written. Think of it like this - syntax is writing “int myNumber = 2;” and semantics is knowing that int means integer and your new variable now holds a of value 2.
Now on to the HTML specific stuff.
The magic of HTML and what sets it apart is that in its very design it gives us syntax that has the semantic element (pun intended) built right in. Table describes a formattable table, form describe a user input form, etc.
However, technically HTML has two types of elements in this context - Semantic and Non-Semantic. div and span, for example, are not strictly semantic because they don’t describe the nature of the content within. They could hold any part of the HTML structure that makes sense. section, article, table, or form, however, describe exactly what they contain.
Introduced in HTML5, ‘semantic elements’ take what used to be a div with an id tag (for example, <div id=“footer”>) and transform them into their own containers for a specific use i.e., <footer>. This not only makes the code a lot easier to read, but also allows for much easier accessibility - search engines and screen readers use them to function for example.
That isn’t to say that semantics on everything else gets nothing more than an afterthought. Even something as simple as the lowly <div> tag is relatively good at conveying its purpose or meaning, its semantics. It’s a division, if you will.
Semantic containers functionally act just like a div, except they are for specific types of content. Article, for example, can contain headers, paragraphs, etc. just like a div but should contain self-contained content - meaning that it makes sense on its own. That being said, nobody is stopping you from putting anything else in there - Semantic containers won’t break if you do.
Typical tags, on the other hand, won’t function as intended with just any input. Table and form are good examples. Technically you can use a table like a div, but you will be formatting its contents into the default 1x1 table you’ve created. Forms have a specific function as well and although you may stuff a loose paragraph inside, the function of the form won’t be filled, and you may as well not have used it at all.
HTML makes understanding its elements and their functions very easy. Even if an element isn’t strictly “semantic” by definition, the very element name usually does a good job of conveying what its purpose is. Truly all of HTML, at least in comparison to many other languages, is “semantic” by nature.
