Jmeow Tutor­ials - HTML Bas­ics


Welcome to the HTML Basics tutorial! Are you ready to learn some new things? I hope you are!
To start, you should get a text editor if you don't already have one. Some good code editor recom­mendations are:

If you don't want to use any of the editors above, that's OK, there are plenty more out there. Now let's finally get started!

1. Elements

The very first thing you should know about HTML is the element. Elements are one of the most basic parts of HTML. To make an element, type in this code into a new .html file:

Now, save it and open it in a web browser. You just programmed your first webpage!
And now... The thing you've been waitig for... The Explan­ations!
Now you might be wondering what the name for those <h1> things is. It's called a tag! That parti­cular one was an opening tag (The beginning of the element), but there are also closing tags! Here's a closing h1 tag: </h1> Also, are you wondering what that h1 thing means? H1 means a level 1 header. A header is, well, a header. The 1 after it means it's the largest size header and is likely the main header of the page (like the title). The smallest header is an h6. The p element stands for paragraph. So the main page header of the above HTML is "Hello World" and there's a paragraph under it saying "And I'm a paragraph!".

2. Attributes

An attribute is some infor­mation about an element inside of an element's tag. Here's an example:

Now, if you really want to try this out and edit it, you can, but if you just want to know what it does, here it is:

The title attribute is not the only attribute, there are many others! But that is how you make an attribute. Here is a list of common attributes:

  • The style attribute. This attribute lets you add inline CSS to an element, but you should usually use the class attribute instead.
  • The class attribute. This attribute lets you add CSS to an element, with the CSS defined somewhere else. I recommend using this instead of the style attribute to prevent repeated code.
  • The id attribute. This can be used for CSS, but I don't recommend it because it can only be used once per webpage. It is mostly used for identification by JavaScript and (in my opinion) is useless if you don't know JavaScript. Now, don't start rushing over to the JavaScript tutorial yet, I would recommend at least learning HTML, and also probably CSS, before you even start with JavaScript.
  • The href and target attributes. They are very useful for creating links, which you will learn later.

There are many more attributes not covered above, but you can learn them when you need them. These are some of the most common (In my code. You might have other attributes you use more often.).

3. Links

A link is some text you can click on to go to another page. They can open another page on your website, or even to Google. You should use them for navigation, and almost never as buttons. You can use the <button> element for that. Now, do you want to start making links? Of course you do, here's how:

Live preview:

Now, here's how it works:

4. Images

An image is, well, an image. The <img> element is used a little differently:

And the live example:

Here's what those attributes mean:

5. Proper HTML documents

So far, you've been going right to the things you want to display, but there's more! First, in every HTML document you write, you should include this:

This basically tells the browser you want it to interpert it as HTML5, which is (at the time of writing) the latest version of HTML. You should also add a <head> element with a <title> element inside, like this:

Oh yes, and also usually you should add <meta charset="UTF-8"/> because otherwise some text and emojis will appear really weirdly. Like, for example, 🐱 will render as 🐱 for some reason. Also, instead of putting all your HTML directly inside of the HTML file, put inside a <body> element, like this:

6. Wrap-up

You've finally reached the end of the HTML Basics tutorial. Congratulations! 🎉 There's lots more to learn after this, so you don't know everything about programming cool stuff yet, but this tutorial is a good start! Want to learn lots more? Go to the CSS Tutorial! It's also pretty simple. HTML is a really good starting point though, and I hope you enjoy it! Now, go make something amazing!