by Eric Tirado
Learn HTML in 5 minutes
A quick tutorial to help you get started building websites.
Since HTML is the foundation of the web, it is also the most essential language for any web development career path. In this fast-paced tutorial, I’ll teach you the very basics of it.
And when you’re done, I have already launched a free 14-part course on HTML5 over on Scrimba.com — an interactive platform where you can jump into the code of a playing screencast at any given time.
You can check out the first lecture here:
Alright, before we jump into the HTML, I want to start out by telling you a little bit about the architecture of the web. This will put the role of HTML into perspective for us.
Basic web architecture
Once you’ve developed a website, you’ll need to host it on a server to make it accessible on the world wide web. All servers have an IP address (i.e 184.108.40.206) which you can think of as a phone number. We normally put a domain name (i.e. scrimba.com) over that IP address, so that it’s easier to remember.
Now let’s have a closer look at the roles these three languages play.
What is HTML?
Let’s imagine a website as a person. We’ll use this analogy to understand our website. The HTML is best described as the skeleton:
What is CSS?
However, just a plain HTML website looks pretty ugly, so you’ll need to style it with CSS. It can bee seen as the skin and clothing of the website.
Writing your first HTML file
In order to be able to write HTML, you’ll need an HTML document, which is just a document with an .html extension. It doesn’t matter which text editor you use, but the most popular ones these days are Sublime Text, VS Code and Atom. You can also use Scrimba as an in-browser editor.
Let’s create a new file, and call it index.html, and write
Hello world! in it.
If we drag this file into the browser, or point the browser to the address of this file, we’ll get the following.
Congrats, you’ve now created your first website!
Your first HTML tag
However, we haven’t written any HTML tags yet. To do that, let’s wrap the
Hello world! text in
<h1> tags, like this:
<h1> is an opening tag, and the second
one, </h1>, is a closing tag. As you can see, the difference is only the backslash in the closing tag. This will result in the following on the page:
You’ve now told the browser that you want the
Hello world! text to be a heading. Thus the browser applies some styling to it, basically increasing the size of the text.
So that’s how easy it is to start writing HTML.
Writing a proper HTML document
But this isn’t actually a valid HTML document, as they should follow a clearly defined structure. For the purpose of this tutorial, I’m simply going to show it to you briefly, and then we’ll continue with the fun stuff.
Here’s how our
Hello world! example should look like:
<!DOCTYPE html><html> <head> </head> <body> <h1>Hello world!</h1> </body></html>
You don’t have to worry about the
tml>; and <head> tag for now, as we’ll simply write o
ur content in the <body> tag. Let’s continue with that!
Below the h1 tag we’ll add a paragraph. This tag is usually used for, well, paragraphs of text.
<h1>Hello world!</h1><p>Hello, and welcome to my website!<p>
Here’s how it looks:
Now let’s add a list. To do that, we need to add two different tags,
; and <li>. The former stands for unordered list and the latter stands for list item. We’ll need
to wrap the <li>
; tags inside the <ul> tag.
<ul> <li>Eat</li> <li>Sleep</li> <li>Code</li></ul>
If you change the
to an <ol>, then the bullets will be replaced with numbers, as it stands for ordered list.
Getting inputs from users is a critical activity on websites. Let’s add an input field.
<input type="text" placeholder="Enter your email" />
Which would add the input field at the bottom of our site:
Now there are two new concepts to learn here: attributes and self-closing tags. The first one, attributes, provides additional information about the HTML elements.
In our case, we’re adding two attributes: type and placeholder. The type tells the browser that this should be a text field. Here, we could have chosen between a range of types (radio, select, checkbox, date) which would have turned it into completely different elements.
The placeholder dictates the help text inside the element.
Finally, the input tag is also a self-closing element (also known as a void element.), meaning it doesn’t consist of an opening and closing tag, but only one tag which closes itself.
There is so much more stuff to learn in HTML, and it’s not difficult at all. My full course can be completed in less than an hour, and it’ll give you a solid understanding of the basics and enable you to start building real websites!
If you’re hungry for more, we’ve got a free 14 course meal...
on my Learn HTML5 for Free course over at Scrimba.com.
See you there. 👏