Now that you know what frontend development is, let’s talk about HTML. People say that frontend development consists of HTML, CSS, and JavaScript. And you have probably recognized that HTML always comes first. So you can tell that it’s pretty important.
Firefox has released a website called MDN, which is formerly known as Mozilla Development Network. This website pretty much works like an official document for web development. MDN says that HTML is the code that is used to structure a web page and its content.
The keyword here is structure. It is a way to tell the browser “this is how this webpage is structured” or “this is what my webpage is going to look like, and what it’s supposed to do”
When you learn new terminology, it’s usually helpful when you look at what it stands for. HTML stands for HyperText Markup Language. Let’s break this down.
HyperText is HYPER-text. Let’s think of the word “hyper.” hyper usually means extra-active or unusually energetic. but when the word hyper is used as a prefix, it means “above” or “beyond.” so hypertext, the word itself means “more than just text”
According to the Webster dictionary, hypertext is something that’s gone beyond the limitations of ordinary text. and many tech websites explain that hypertext is the text that links to other information. In our case, this information is another webpage. HyperText is a way to link two or more web pages with one another.
Next is markup. Markup is MARK-up. According to the Cambridge dictionary, a mark is a typical feature that allows you to recognize something. By marking up a webpage, you are annotating the contents of your webpage by using HTML elements. You are telling your browser that this is going to be a header, this is going to be a paragraph, this is going to be an image, this is going to be a button, and so on.
And the last is language, which is a method of communication. So HTML is a way of communicating what a webpage looks like and how it is connected with another webpage.
Let’s look at a simple HTML element for an example,
<h1>Code On</h1><h1> → an opening tag
</h1> → a closing tag
Code On → content
and the whole thing is called an element. these tags tell the browser that the content of this element is going to be a header.
If you need some visuals to understand this concept, please check out this YouTube video below.