Conceptual Overview of HTML
What is HTML?
HTML is the language used to give structure to web pages. It is used to create things like headings, paragraphs, bullet-point lists, tables, and much more.
It’s important to note, however, that HTML isn’t used to style a webpage. For example, you can create a heading in HTML but typically you wouldn’t change its styles like color, font, or even placement on the page using it. For that, you should use CSS. But we aren’t going to cover CSS just yet. Below is an example of a website with CSS styling (on the left) and the same site without the CSS styling (on the right).
Is HTML a programming language?
This may surprise you but HTML is NOT a programming language. It’s a markup language. You’ll know this by the fact that HTML stands for HyperText Markup Language.
What’s the difference between a programming language and a markup language? Well, programming language is a set of instructions to be executed, while a markup language acts as a container for holding information. In simpler terms, programming language instructs a computer to do something and a markup language simply presents information.
Should I bother to learn HTML?
Even though it isn’t a programming language, just about every programmer learns the basics of HTML. If you develop websites then you will work with HTML on a regular basis. In addition to HTML, you’ll also work with CSS and JavaScript. So, you should also learn those.
With that conceptual overview, let’s learn our first line of HTML code.
Learn your first HTML element
HTML code is made up of a series of elements. Elements are made up of tags and possibly some content between those tags. To understand what this means let’s look at some sample code.
In the above picture, the element we are looking at is the paragraph element (the “p” stands for paragraph). The paragraph element, like most elements, has an opening and closing tag. The opening tag is “<p>” and the closing tag is “</p>”. Notice that the only difference between the two is one “/” in the closing tag. As with most HTML elements, the tags enclose some sort of content (in this case the text “Hello, World!”).
The code “<p>Hello, World! </p>” outputs the text “Hello, World!” onto the screen (as shown below).
Try out what you learn
Now that you’ve learned your first bit of HTML, it’s time to try out what you learned. This is very important because the best way to learn to code is to try what you learn.
So, if you want to try out things in your learning journey, you can either download a text editor or use a site like codepen.io. The latter isn’t used to build an entire website but rather is sort of like a sandbox tool for you to try out things on a small scale. If you’re new to programming, I recommend sticking with codepen during your early stages of learning as it is a quicker setup.
To use codepen, go to codepen.io, sign up for an account, and then find the button where it says “Start Coding” and click that. After which it should take you to the below screen.
This is the codepen editor and it has 4 panes — HTML, CSS, JS (which stands for JavaScript), and bottom pane. The first three panes allow you to code in HTML, CSS, and JavaScript, respectively. All three languages work together to make what you see when you open a webpage. The widest pane on the bottom is where you will see the result of your code.
Great Places to further your learning
- Udemy.com (you buy courses on this site; it is recommended you buy the course you are interested in when the site goes on sale with courses dropping below $20)
- Coursera.org (you can audit courses for free)
- FreeCodeCamp.org (100% free)
