What Is HTML Code & What Is It Used For? – A Beginners Guide To Learning HTML
Written By: Grant Darling January 15, 2020
So here you are, ready to start your journey as a Web Developer, or maybe you're just curious about how the World Wide Web works. In either case, you've come to the right place. HTML is (or should be) the very first thing you learn when you want to start digging into what makes the web work and function the way it does. So, what is HTML code?
Let's read on to figure out what HTML code is and what it's used for!
What Is HTML Code?
HTML is an acronym for Hypertext Markup Language and is the markup language used to display information on a web browser.
Okay, so that might already be confusing, so let's practice our programming skills and break this into steps! The first word, 'hypertext', is explained in the Cambridge dictionary as "a way of joining a word or image to another page, document, etc. on the internet or in another computer program so that you can move from one to the other easily". This essentially means we can add text or media into a document, or webpage, from another source. The second word, "markup" is the code used to add this text or media into the document or webpage. We can think of the code as being the vehicle that transmits this text or media onto the webpage. Finally, 'language', in this context, can be thought of as the rules used by this code to act the way it does.
With this information, we can now start to understand that HTML is a language that allows us to insert information onto a webpage with code! If you don't fully understand yet (which is normal), the examples provided later on should help clear things up.
A Brief History of HTML
HTML was invented by Tim Berners-Lee in 1990. Since then, HTML has gone through five major revisions lead mostly by the WHATWG (Web Hypertext Application Technology Working Group), made up of individuals from Apple, the Mozilla Foundation, Opera Software, and Google. As of 2020, we use the version of HTML titled HTML5. HTML5 was created to address the multi-platform and multi-device world we live in today. If you'd like to read up on the updates up to and including HTML5, you can do so here.
It is important to note that every webpage that you view uses some form of HTML, which will also be covered below!
Examples of HTML
As we now know, HTML makes up all of the elements displayed on a page. Even the words you are reading right now are displayed here using HTML code.
In order to write a paragraph in HTML, like above, we use code that looks like this:
<p></p>
The 'p' within these opening and closing brackets stand for 'paragraph'.
So if we just wanted to display the text "Hello World!", we could write it on the webpage with this one line of code:
Simple right? Well, there is actually one more step. In order to set-up a webpage with HTML, we need to use what is referred to as 'skeleton' or boilerplate code. It is the code needed to start every project in HTML. Now, this may look scary at first but this is how we set up our HTML document. It is the same in every HTML project and eventually becomes second nature to see and understand.
Right now, the document above doesn't add anything visible to our webpage. You can think of the <html> & </html> tags as a container that holds our <head> and <body> tags between them. Which are, themselves, containers to hold their own code. Containers, do not display anything, they hold elements that are then displayed to the page. Now, this is a very broad look at HTML, but it should start to make a little bit more sense.
If you wanted to write the text "Hello World!" Within this document, we would simply copy our code from the top example into our HTML skeleton. Like so:
Hello World!
I uploaded this exact file to my webserver and this is exactly what that code produces in your browser. You can view it here.
One big question I had when I first learned HTML (roughly +10 years ago!) was how does this code magically become that webpage?
Well, it isn't exactly magic. Your browser essentially takes the code you have given it (an input), renders it, and sends back the visual interpretation of what it received (output). So you can actually think of HTML as a language used to talk to a web browser!
If you are still confused, that is okay. I included some great resources at the end of this post that can take you from complete beginner to expert for free. So stay tuned.
HTML Is Not A Programming Language
One last thing we need to explain is that HTML is not a programming language. HTML is a declarative or markup language, meaning it is used to "declare" an element onto a webpage. HTML is used to add context and structure to your webpage, while a programming language defines a set of instructions that allow a given task to be implemented.
There is some controversy, even among developers, that HTML is a programming language. Given a broad enough definition of the word. However, I would argue that most in the industry agree that HTML is not a programming language.
Best HTML Tutorials For Beginners
Hopefully, this article helped you discover the importance of HTML, discovered it's history and provided some simple examples to help understand the language a little bit better. However, learning HTML is a bit outside the scope of this article. Here are some examples to get you started on your journey to becoming a developer! Either of these two resources should teach you everything you need to know!
Resources
Codecademy HTML Course
Codecademy is one of my favourite learning platforms for beginners. It breaks down the content in a very easily digestible and fun way. If you are just starting out, Codeacademy is a great place to start.
Udemy HTML Course
If you dislike the learning style of Codeacacademy, another popular choice is Udemy. Another one of the leading learning platforms in 2020.
So there you have it! If you want to learn more about web development, including great free learning resources, feel free to check out my other article on every skill required to become a professional full-stack web developer in 2020!
If you want to check out all the skills needed to become a successful Web Developer in 2020, then check out this other article I wrote here!