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!
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:
- Links to other pages
- Italic text, bold text, or even
- 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 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>
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.
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
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
- First HTML,
- then CSS,
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.