The complete tutorial to getting started with HTML

This tutorial covers everything there is to know to learn HTML. I promise this document is the most thorough HTML tutorial there is!

Introduction

👋 My name is James King and I have been a professional web developer for more than 10 years.

I’ve built countless websites and web-apps of my own over the last 10 years, as well as worked for many small, medium, and enterprise companies, developing web products.

As someone who learned to code from reading online tutorials and watching videos, I know first hand how difficult self-learning online can be.

Online learning is done through piecemeal and is not efficient for learning how to code.

As a result, I will strive to use simple, clear, and elegant language that is not confusing to the beginner coder.

For example, HTML code examples are thoroughly marked using copyable snippets, with the filename shown in the top left of the code snippet, like so:

index.html
<div class="container"> <div class="row"> <div class="col-12"> <h1 class="hero-text">Join Me on My Journey to 100,000 Monthly Pageviews</h1> </div> </div> </div>

Additional tips and tricks are highlighted and scattered throughout this tutorial, like so:

This is a tip about HTML, for example, did you know that HTML isn’t a programming language, it is a scripting language?

If you have any questions at all throughout this tutorial, please leave a comment at the end of the tutorial and I will strive to reply to it.

Without further ado, let’s begin learning HTML!

Why Should I Learn HTML in 2020?

HTML remains to be a fantastic introduction language to learn if you want to learn how to code in 2020.

🤔 Why?

Well, for a start, it’s the primary language of the web. There are no plans to change the fact that HTML is the primary language to create a webpage.

As a result, there are plenty of resources to help you learn HTML.

You will never run out of tutorials, like this one, to help you progress in your learning.

Every desktop and laptop is able to create HTML documents out of the box, for free.

Finally, it is easier to learn than other true programming languages like JavaScript, Java, and Swift.

Therefore, HTML is a great place to start for those who are wanting to learn how to code in 2020.

What Are We Going to Learn in This HTML tutorial?

As I mentioned before, I am striving to make this tutorial the best and most thorough introduction to HTML on the web.

As a result, I intend to cover all of the necessary introductory topics, such as:

So, without further ado, sit back, relax, and dive into the best introduction to HTML there is!

What is HTML?

Hypertext Markup Language, or HTML, is a scripting language used primarily to create web pages.

What Do I Need to Code in HTML?

As mentioned above, one of the reasons why many people who want to learn to code begin with HTML is because of how accessible it is.

If you’re reading this tutorial on a laptop or desktop, then you’re in luck, as that machine has everything already installed to begin creating, editing, and viewing HTML documents.

To create HTML documents, we require:

  • A laptop or desktop computer 💻
  • A text editor 🗒️
  • A web browser 🌎

We only require those three things to begin coding HTML and creating web pages! That’s why HTML is such a great language to learn first.

We are all aware of what a laptop or desktop is, so I won’t cover that.

As for a text editor, if you are on Windows, we will be using an application called Notepad.

This tutorial is for Windows users. If you are on MacOS, use TextEdit to create and edit HTML documents.

To access Notepad, click in the search field in the bottom left-hand corner of Windows and search for “Notepad”.

You will see an application like looks like this:

A screenshot of Windows 10 searching for Notepad to begin an HTML tutorial

You may have used Notepad before to write down notes and ideas and save them to your computer.

However, you can also write HTML code and create HTML documents using Notepad.

Pretty cool, huh?

The last item we need to code in HTML is a web browser.

And it’s safe to say that if you are reading this tutorial, you have access to a web browser!

Create an HTML Document

If you didn’t already open up Notepad from the previous step, search for it again in the bottom-left hand corner.

Open up Notepad.

You will see an empty Untitled document, like this:

Screenshot of notepad in Windows.

Click into the document and type or copy-and-paste the following HTML code:

Untitled
<!DOCTYPE html> <html> <head> <title>My First HTML Document</title> </head> <body> <h1>This is my first HTML document!</h1> </body> </html>

Before we view this HTML document as a web page, let’s just make sure that we’re on the same step.

Your Notepad document should look like this:

Screenshot of notepad with HTML code inside of it ready for an HTML tutorial.

All good? Excellent!

Leave a comment below If you have any questions or feedback at any point throughout this tutorial. I strive to reply to all comments and questions!

Now save the file by pressing CTRL + S on Windows, or cmd+ S on MacOS.

A new window will appear, asking you what you wish to name the document.

This is where we will tell Notepad that we are creating an HTML document.

Toward the bottom of the new save window there are two fields:

  • File name:
  • Save as type:

For File name, enter in index.html.

For Save as type, select All files.

Screenshot of notepad with HTML code inside of it and saving it as an html document.

HTML documents have a .html file type. It is how we tell web-browsers that the file contains HTML and therefore should be displayed as a web page.

The first or main page of a website is typically named index.html.

This is historical, and although you can name your HTML documents whatever you want, this practice still exists today.

View an HTML Document as a Webpage

Locate the HTML document you just saved.

Screenshot of the HTMl file inside of Windows 10

It will have a little web browser icon next to it, depending on what your default web browser is.

The Google Chrome icon is on the left-hand side of the filename as my default browser is Google Chrome.

If you are using MacOS, then your default web browser may be Safari.

Double click the index.html file.

Your default web browser will open the file automatically, or Windows may ask you with what application you wish to open the file.

If Windows asks you, select your web browser.

You should now see your HTML document in your web browser.

Screenshot of an HTML document displayed inside of a web browser as part of an HTML tutorial.

Notice that you only see the text “This is my first HTML document!”, and not any of the code.

Why?

Because the web browser processes the HTML code and displaying the HTML document in a human-readable format.

That’s what web browsers do, they process HTML documents so humans can read them easily.

What Does HTML Look Like?

It’s important to talk about that HTML code I asked you to write into the Notepad document before we continue writing anymore HTML.

Here’s a reminder of what that code was:

Untitled
<!DOCTYPE html> <html> <head> <title>My First HTML Document</title> </head> <body> <h1>This is my first HTML document!</h1> </body> </html>

What do you notice about HTML code?

Really take a good look at the code above and imagine describing it to someone else.

  • What are some of its characteristics?
  • What do you notice about its structure?
  • How many times can you spot the same words?

I’ll give you a moment to process the code and think about those questions.

Finished?

What Are Tags in HTML?

One of HTML’s defining features as a scripting language is that it uses tags.

Tags are used to describe an HTML document. They tell a web browser how the contents of an HTML document should be displayed.

Tags are keywords words inside of a special kind of parentheses < >.

A tag tells a web browser what the contents of that tag are within the context of that HTML document.

Let’s take the <title> tag as an example:

The Title Tag
<title>My First HTML Document</title>

What do you notice?

  • The title tag is repeated twice
  • There is a / in the last title tag
  • There is text inside of the title tags.

A tag consists of an opening and closing tag.

An opening tag looks like this: <title>.

A closing tag is always signified by the / character, such as </title>.

That’s to say, this is the end of the title tag. The Title tag ends here.

Everything written inside of the title tags are the contents of that particular tag.

So, “My First HTML Document” is the title of this HTML document.

The title tag defines the name of the HTML document. Look at the HTML document inside of your web browser again, specifically the label in the tab.

What does it say?

“My First HTML Document”, right?

That’s because a web browser displays the title of an HTML document as the current tab’s label.

Let’s explore some more tags, as well as their functions, in the next section of this HTML tutorial.

Add Your First HTML Tag

Let’s now add an additional HTML tag to our HTML document. We already have the title tag as we discussed before, so how about we add another commonly used HTML tag?

Inside of the body tag, and underneath the heading one, or H1 tag, write the following code:

index.html
<p>My first website is really coming together now. HTML isn't as difficult as I thought!</p>

So the full code should now look like:

index.html
<!DOCTYPE html> <html> <head> <title>My First HTML Document</title> </head> <body> <h1>This is my first HTML document!</h1> <p>My first website is really coming together now. HTML isn't as difficult as I thought!</p> </body> </html>

We just used the Paragraph tag, or <p> tag.

A paragraph tag is very common inside of HTML documents. It is used to define sentences, such as this one you’re reading!

View Changes to an HTML Document

What if we wanted to view those changes that we just made to our HTML document?

That’s super easy!

Just save the HTML document inside of Notepad, jump back over to your web browser (I hope it’s still open, if not just double click on index.html again), and refresh the page.

If done correctly, your webpage will look like this:

Screenshot of an HTML document displayed inside of a web browser as part of an HTML tutorial

This is a living document. I will be adding more steps to it in the coming days, weeks, and months. Stay tuned for more steps to this HTML tutorial!


🚀 Follow My Journey from 0 to 100,000 Monthly Pageviews!

Starting with this brand-new blog, I'm sharing everything I do to get from 0 pageviews to 100,000 monthly pageviews, every step of the way.
Zero spam, just great content. Unsubscribe at any time.

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.