HTML Tutorial For Beginners: A Friendly Introduction

html tutorial for beginners
Estimated study time: 10 minutes

In this HTML tutorial for beginners, you learn the basics of modern web design using HyperText Markup Language, or HTML for short.

Here’s why you might want to follow this tutorial, instead of all the others:

  • Expect a no-frills tutorial; we’ll get started right on this page and by the and of this page, you already know some important concepts.
  • I won’t dive into the long history if HTML and all the alternative syntax and tags one might encounter when looking at the source of old webpages. You will learn the most modern version of HTML that is supported by all the major browsers.
  • The information density is high, and the amount of fluff is kept to a minium.
  • I provide lots of examples, that run directly in your browser and are editable as well, so you can tinker and experiment, which I highly encourage you to do!

Directly after this tutorial, you can continue with our CSS tutorial and then the JavaScript tutorial.

What is HTML?

HyperText Markup Language, or HTML for short, is a set of codes that we can add to text documents. These codes, for example, tell a web browser whether something should be displayed as a regular text paragraph like the one you’re reading right now, or as a header or title.

Besides paragraphs and headers, there is a lot more you can create with HTML:

  • Sections
  • Links to other pages
  • Tables
  • Lists
  • Italic text, bold text, or even strikethrough text
  • Superscript and subscript
  • .. and so forth

What HTML looks like

Have you seen HTML before? Before we dive in, let’s look at the HTML of a very basic webpage:

<!DOCTYPE HTML>
<html>
<head>
  <title>My first webpage</title>
  </head>
  <body>
    <h1>Hello world</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

So what do we see here? We’ll dissect the example, without diving in too deep. After all.. we’re just getting started!

The Doctype

The HTML document starts with this weird-looking doctype definition, <!DOCTYPE HTML>. This tells the browser that this is an HTML 5 file, which is the most modern version of HTML.

There are older versions as well, with different doctype definitions, but that doesn’t matter to us. We’re creating modern websites, and we’ll only use HTML 5, which is the current version of HTML. Each and every recent browser understands and supports HTML 5, including mobile browsers on Android and iOS.

HTML Tags and elements

Any HTML page is full of HTML tags and Most HTML tags surround something: a piece of text, for example. So there’s an opening tag, a closing tag, and something between them.

Let’s take a look at the <p> tag from the example HTML page above:

  • The <p> tag is used to ‘open’ a paragraph.
  • What follows is some text, in this case: ‘This is my first webpage.’
  • Finally, we close the paragram with </p>

HTML elements

This is a pattern that is applicable to almost all the tags:

  • We open with a specific tag (like p, h1, and body) surrounded by the less than and greater than signs: < and >
  • Then some optional content follows, which in itself can also contain HTML tags.
  • We close with the same tag name, by adding a forward slash before the tag name: /

We call the complete set of an opening tag, a closing tag, and the content between an HTML element.

Nesting

As you can see in the example HTML document above, HTML relies heavily on the nesting of elements. The top-level element of any document is the html element, formed by the <html> and </html> tags.

Nested inside this html element, we have the head and body elements. In turn, the body has the nested elements that form the h1 header and a paragraph of text.

A note on the samples on this site

As you just learned, HTML is rendered by a browser into a nice-looking webpage. It’s important to know that I took advantage of the fact that you’re reading this in a browser. Many examples in the HTML tutorial for beginners can be:

  • adapted: you can edit the example to your liking
  • run: click the play button in the top right of the HTML example above and directly see the result.

All without leaving the page. Awesome, isn’t it?

Beyond this HTML tutorial

Although you can create a website solely using HTML, it would be a dull experience for your visitors. HTML is closely tied to two other technologies: CSS and JavaScript.

Separation of content and style

In the past, we would also define the style of a page using HTML, by which I mean things like colors, sizes, and the width of elements. These days, we have CSS for this purpose, which is a good thing.

Using CSS, we can separate the styling of a page from the actual content. It allows us to easily change the style of a page. I’m sure you’ve seen sites where you can choose between a light or dark color scheme. That’s done by switching to a different set of CSS instructions, while the HTML stays the same.

Making a site interactive

HTML pages are static. To make a site interactive, we need JavaScript. Where HTML defines the content, and CSS defines the styling, JavaScript defines the behavior of a website. My JavaScript tutorial for beginners teaches you all the details, but I want to emphasize the importance of learning things in the right order:

  1. First HTML,
  2. then CSS,
  3. and finally JavaScript.

Keep learning

There are other markup languages as well, one of which is Markdown. As a developer, you will often run into documentation files that contain Markdown formatting, so it pays to at least know what it is. You can do a lot with Markdown that you can also do with HTML but with a more readable, less obtrusive syntax. To get a quick overview of what’s possible with markdown, check out this markdown cheat sheet.

Leave a Comment