Table of contents
No headings in the article.
"Start from HTML". I don't know how many times I've said this to beginner web developers. Maybe because I heard it a lot too when I first started. But hey, it really is where to start from. Are you building a web app, a website, a Learning management system (LMS), web3 app/website etc. You can't do it without HTML.
But then you get that Condescending reaction when you tick HTML as your stack and you may have even heard the popular "HTML is not a programming language" comment. While this may be true, HTML is too important to be underrated like it is in the web development industry.
People tend to want to quickly add another stack to their HTML knowledge –even before they master the very basics of HTML –because they feel HTML isn't that important to spend so much time learning it. But HTML is like the foundation of your whole life as a web developer, not just your website. And I know this may be too much but it's true.
You can basically do without every other programming/markup language as a developer because there are so many substitutes for them. But the base of everything you'd ever build as a web developer is HTML. So if you get the foundation wrong, you risk losing the whole building. (pun not intended).
But just to give this article a bit of officiality, let's understand the meaning of HTML and what it's used for:
HTML is an acronym for HyperText Markup Language. To easily understand this, let's define "HyperText" and "Markup Language".
A HyperText is any text that has a link to another text within it. These links are called hyperlinks. This is a hypertext that contains a hyperlink within it that takes you to my Twitter page which is basically a bunch of other texts.
A markup language is a computer language that controls the structure and formatting of a text document. It defines which part of the document is an image, a heading, a link, a form etc. It's like when you write in a notebook. You make a heading, a subheading, the body of the text, a conclusion etc. Imagine if you wrote everything without punctuations and all in a straight page. It would be difficult to read. A markup language does this for the computer browser and users. It explains the text document.
Simply put, HTML is a markup language which incorporates HyperTexts to give web pages structure and formatting. It tells the browser how to display each content on the text document so that both people and computers can easily understand it.
Understanding the importance of HTML is easy. Imagine buying Christmas tree decorations when you have no Christmas tree, where are you supposed to hang the decorations? HTML is the Christmas tree of every web page/app while other programming languages like CSS and JavaScript are the decorations.
Another popular analogy about understanding HTML is that it is basically the skeleton of every webpage.
HTML SEMANTICS
We've established the fact that HTML defines the contents in a text document to make it both human and computer readable. But in the past, it wasn't always like this. Tim Berners-Lee created the first version of HTML in 1990 as a simple markup language which would aid developers to create and easily share documents with other developers on the web.
For HTML to effectively do this it needed "tags" which are basically small units of HTML codes that tells the browser how to display particular parts of the document so the developers can easily understand it. Like the
<head></head>
tag which tells the browser to display everything put into it at the uppermost section of the text document.
… So HTML semantics is proper the use of these HTML tags in creating text documents or web pages.
There are two types of HTML semantics: the first is Non-Semantic HTML and the other is the Semantic HTML.
NON-SEMANTIC HTML
Non-Semantic HTML –which largely makes up the first version of HTML –incorporates HTML tags that are hardly human or even computer readable. Examples are the
<a></a>
<div></div>
and
<span></span>
tags. They tell nothing of the contents put into it. For instance if a developer wanted to create a footer section on their text document or web page, they had no tag to effectively define what they intended to do.
Many developers had to name sections of their documents inside these non-semantic tags using "classes or IDs" for example:
<div class= "footer">
This caused a disunification of code as different developers had their different ways of naming parts of their documents. The footer for instance could be named by different developers as:
<div class= "foot">
<div id= "base">
or
<div class= "down">
etc.
In addition to the fact that non-semantic HTML is hard to read and lacks unification, it also doesn't encourage web accessibility. Web Accessibility means that websites are developed/created having empathy for everybody in mind, especially the disabled. For instance, with non-semantic HTML, assistive technologies like Text-to-Speech software may not effectively decode and read out web contents for the visually impaired.
SEMANTIC HTML
Anyway, as the people and the web evolved, there was an equal need for the evolution of HTML. And this evolution is currently at the HTML5 stage. Semantic HTML largely makes up the HTML5. It incorporates HTML tags that are clearly human and machine readable. Examples are the:
<footer></footer>
<article></article>
<header></header>
tags etc. They clearly describe the tag and the contents put into it. For instance the
<form></form>
tag is used to create a web form for users to input their details.
Semantic HTML mitigates the shortcomings of Non-semantic HTML by unifying and making codes easier to read and understand and encouraging accessibility. In addition to this, it helps with SEO Optimization: Since the browser understands each part of the document, it'll naturally find it easy to bring it up in web searches.
CONCLUSION
I hope you now understand HTML and the importance of using the right HTML semantics when creating your web pages. If there's still a bit of confusion, when creating your web page, constantly ask yourself what HTML tag best describes what you intend doing. Are you trying to make a section, another section but for an article, a form, a header, an image, audio or video etc. Look up the right semantic for creating these and do the needful.
You can also check out W3Schools and MDN as they are both great resources for learning HTML. I hope you find favour as you revere the almighty HTML!