Learn to Code via Tutorials on Repl.it!

← Back to all posts
Full HTML Tutorial


Hi! This is a tuorial made by @Kookiez and @necronova. This will cover most of the basics in HTML, plus a little CSS. There are 2 parts to this tutorial, and in this tutorial we will show you the basics of HTML, plus a little CSS. The second tutorial will talk more about CSS, and maybe a little JS.

This tutorial is divided into 4 sections, plus a bonus part!

History and Facts about HTML

HTML was first created by Tim Berners-Lee in 1993. Since then, there's been more versions of HTML, and this version we use in repl.it, (and the version pretty much everyone uses) is HTML5, which is the 5th version. HTML is used to make websites. You can also use Flask and Django to make websites in Python, but HTML is the easiest because it is and if you don't agree with me, go learn Django and make a website that looks good compared to just HTML and CSS that you can make in just 30 minutes.

HTML is rarely used alone. Almost every HTML project uses CSS and JavaScript in conjunction to make stylish and functional webpages. Sometimes other programming languages are used, but implimenting them is tricky, and certainly not required.

As the language that makes up pretty much everything you see on the internet, HTML is also one of the easiest "programming languages" to learn! It doesn't take long for you to become an amazing web developer! Edit:
@xpertHacker - HTML stands for HyperText Markup Language



Getting Started

Click the blue + button to create a new repl, and then select HTML, CSS, JS to get started!

So first, when you open a new HTML, CSS, JS repl, it will look like this:

So, we'll do a quick overview about what does what!

The <!DOCTYPE html> is very important in HTML. It may look like a tag, but it's actually a statement informing the browser that this code is HTML, and it is also stating what version of HTML it is. This is so the web browser can handle it correctly.

Then there is the <html> tag. This tag represents the root of a HTML document. The <html> tag is the container for all other tags except for <!DOCTYPE html>.

The <head> tag is a container to store information about metadata. Metadata is information about the document, but it doesn't get displayed.

The <title> tag is the text that gets displayed when you open it. So open your repl in a new tab. The tab has some text on it, and the code that does it is <title>repl.it</title>. Your title will be called repl.it.

The <body> tag is where most of your HTML will go. It defines your, well, body of the code. You can write paragraphs, headers, lists, hyperlinks, images, and much more here.

The <script> tag means that the script, the JS, will be found from the file script.js. You can put all your JS in the script.js code.

Some future reference to learn about (and might be important sometime) is HERE and HERE.

Alright, enough, let's get to the funner part (is funner a word?🤔).

Section 1: Headers, Paragraphs, and Comments

NOTE: All of this code is written in the <body> section.

Alright, one of the first things you might learn in HTML are headers. The headers go from <h1>(the biggest) to <h6>(the tiniest). Here is how to write a header:

Did you notice this part </h1>? It has a / in front. Why is that? Well, it's just the way it is... because I'm a terrible explainer. Actually, no. Here's a helpful explanation from w3Schools.

Now let's test it out! The text may appear ugly, plain - but it still works! You can style it with CSS, which we'll explain later.

Now let's learn about another tag - the paragraph tag! It's the <p> tag. It's basically like a paragraph - hence its name, and here's how you do it!

Try it out on your own! It's smaller, but you can adjust its size and font using CSS. We're not going into that yet, but we will.

Alright, we'll look at how to make comments! People make comments to save code they want to use later, or explain what this specific code does. Comments are not displayed by the browser. Think of them as a little note telling you about stuff. Here is how to make a comment:

Alright, let's have a "checkpoint":


  • We learned how to make headers
  • We also learned how to make paragraphs
  • And lastly, we learned how to make comments and the purpose of them

I've seen that we sound so serious and we...
speel meeny thangs rite an wee r xperts at grammer.

And that sentence above was probably the BEST grammar I've ever written.

Alright, that wraps up Section 1, and we're going about lists, styling text, and line breaks in the next part!

Section 2: Lists, Styling Text, and Line Breaks

Alright, let's start out with lists. So, to make a list, there are two kinds:

  • Ordered lists <ol>
    -Unordered lists <ul>

    So, let's learn about ordered lists first.

To make an ordered list, here is an example:

Alright, so you see <ol> stands for ordered list, and <li> makes up each little 1. or 2. or 3. Ordered lists may be useful for explaining steps in a recipe, giving instructions, or maybe ordering things from your favorite to your least favorite. Any of these choices are good for an ordered list. But what if you don't want an ordered list? Well, then we'll use an unordered list.

An unordered list is made up of bullet points. Test this example out:

It's the same "format" as an ordered list, just replaced by <ul>.

So moving on to these 2 tags, <strong> and <em>. The <strong> tag is used to emphasize text, not just to make it bold. So, for example:

Test it out. The "like" will be bold.

The <b> tag also works. But, the <strong> tag means that THIS TEXT IS IMPORTANT! LOOK AT IT! while the <b> tag just means that the text is bold. The <b> tag is used in the same way the <strong> tag is.

Now let's see what the <em> tag does. It makes the text italicized, and <i> also works, but the <em> tag works the most. So, it is used like this:

The <i> tag is used in the same way.

Now let's learn about the <br> tag.

The <br> tag is used for line breaks. It has no end tags. So try out the example here:

Also, one last thing. A b element might not always be bold, and an i element may not always be italic. So it is strongly recommended to not use these tags and use other tags that do similar things. And that's why it's recommended to use the <strong> and <em> tags.


  • We learned about unordered and ordered lists
  • We learned about <em>, <b>, <strong>, and <i> tags
  • We learned about the <br> tag

Yay! Now we will learn about links and images in the next section!

Section 3: Links and Images

Images are important (most of the time). They make your website look better (most of the time). Anyways, the image tag looks like this: <img>. There is no end tag in the <img> tag because it's special and you're not... actually, maybe you are special. But the <img> tag still doesn't have an end tag.

You can search for an image on the internet, or upload one of your own. To upload an image, you can:
1. Click the 3 vertical dots and select "Upload file" and choose your own image to upload!
2. Drag and drop your image - it's that easy!

Alright, whether you choose an image from the internet or upload your own, this is how you declare that it is an image:

See? It's that easy! Also, keep in mind that this is inside the <body> tag, and above the <script> tag.

If the browser can't display it, you can provide some alternate text:

Yay! Now let's see how to adjust the size of your image. To adjust the size of your image, you do this:

Easy, right? Now let's talk about hyperlinks.

Well, if you cite something, you will make a link. The most common way to make a hyperlink is to use the <a> tag. This has an end tag, if you were wondering.

Here is an example of a link:

The href tells you what website, image, or anything the link wants you to redirect to. Oh, and a little tip:

IF you want to link to open in a new tab, add this:

Magic! Now, you may notice that your links are a different color than normal text and are underlined. Well, the default ones are like this when they haven't been clicked yet:

And links look like this when they've already been clicked:

They're still underlined, but they're purple now. Well, maybe you want them to be a different color, like orange, for example. Well, that's easy. All we need is some CSS. Well, so... you will learn some CSS in the next section, but why not right now?

So, you can select them by element type (all <p> text will be blue, all <h1> text to be underlined...) since that's the easiest.

Well, let's go into the style.css part. I think it's the easiest way to put your CSS there. The next section will touch up on some things we will learn about CSS in this part, so I don't have to explain much! Yay!

Alright, go to the style.css part. It's blank, but you can change that by writing the CSS shown below:

This CSS tells all of the text inside each and every <a> tag to be orange, and to have no underline.

Test it out, or swap some of the colors out! Remember, you should always put a semicolon ; after each "statement", but don't put them behind the curly brackets. {}.

Maybe you could even change the font, how about this?

Now, it's time for our checkpoint!


  • We learned about how to make images
  • We learned about how to make hyperlinks
  • We learned how to use some CSS!

Now, you're more than halfway there! Yay! The next section will cover some basic CSS. Excited yet?

Section 4: Styling Elements and Using CSS

Our webpage is coming along nicely, but doesn't it look a bit bland? Lets spice it up by changing things like the size, color, and font of different elements.
Let's take a look at a paragraph: <p> This is some text. </p>

It works, but it could be better. Let's start with adding a bit of color.

HTML allows you to style elements a few different ways. The first method we'll explore goes inside the tag of the element, like this:
<p style="color: red;"> This text is now red </p>

As you can see, you only have to put the style tag in the opening <p> tag. Let's try making the text bigger, and give it a blue background:
<p style="color: red; background-color: blue; font-size: 20px;"> This text is really exciting</p>

Now, styling elements like this works, but as you can probably see, it can get a bit cluttered when designing an entire website. This is where our second method of styling comes into play: the <style></style> tags. This set of tags usually goes in the <head> tag of your file, and helps to keep your code nice and neat.

Styles can select elements by id, class, or element type. We'll start with element type since its the easiest:

Now any element in your webpage that uses the <p> tag will have that style applied to it.

What if you want different paragraphs to have different styles? That's where IDs become useful. Let's make 2 paragraphs:

Now let's style them:

Note that we use a # to show that we are selecting an id. if we had used a class instead, like <p class="myClass">This text has a class</p> we would have used a ., which would look like:

Classes are similar to IDs. The difference is that classes are usually used to style multiple similar elements, while IDs are usually used when styling select elements, such as a specific text box on a page.

The final way to style elements is through an external file. This is especially useful when you want to use the same styles across multiple pages on a website. You may have noticed the "style.css" file when you first opened your project. This file is styled just like the <style> tags in the head of your document. In order to use it on your webpage, you need to add it in the head of your document as a link, like this:

The "rel" tag tells the document what type of link you're creating, and the "href" tag tells your document the location of your style file.

So, you can write all your CSS in the style.css part, and it'll look even more cleaner and it'll be easier to navigate, since all of the CSS will be in the CSS part, and all of the HTML will be in the HTML part.


  • We learned about how to use CSS
  • We learned about how to use CSS by using:
    • Classes
    • IDs
    • Element Type

We are at the end! 🎉 Now here's a bonus part... ✨


Now since you've scrolled all you way down here, we have a bonus part! We are going to learn how to get input, make a button, and learn a little JS.

Step 1

In this part, we will add all of the HTML.

So we will make a button and a text box:

So let's break it down.

The first line, <h1>Bonus Tutorial</h1> displays the text "Bonus Tutorial".
The second line is an <input> tag. The "type is text because this is looking for text. The placeholder is "Name" because we want to know the person's name and say hello. The id is "checkInput" since we will need that information later, in the JS. I will elaborate later.
The third line, which has the <button> tag, will notify the JS that the input is done using onclick. The function's name will be getInput, so we will need that.

Now let's add the JS in script.js.

Well, now let's explain everything.
So, the function tells the JS that you are making a function. The text that follows it, getInput, is its name. Then it is followed by a pair of parentheses, followed by curly brackets. Everything inside the curly brackets is part of the function.

Then there is an if statement. JS if statements are like this:

So, we don't need an else if, so we just use else.

So, the code says:

So, the code above is saying, "If the input's value is nothing, then I say, "It's an error, try again." " We know that it's not really an error, but it won't really work if the person doesn't type in anything and it says, "Hello, ".

Now let's get to the else part.

So, the code is saying, if the first condition isn't what's happening, then I will do this. The thing that it is saying, is to make a "Name" and the value is the person's input. Then, it says, "Hello, <INPUT>!".

See a demo HERE!

Now add some CSS of your own, and it'll look even better! ✨

Closing Notes

Thanks for reading our tutorial! 😄 Since you've read all the way here, we have a special thing for you. Click HERE to claim your award! Now you have a 1-week hacker plan. Enjoy!

Oh, and don't leave yet! You see, we have a few people to credit:

@k9chelsea - because they said they would help but didn't get the chance, but we're still including them 👏

@JBYT27 - for the same reason 👏

Now let's clap for them!


That's a lot of claps.

Here are some tutorials that may help you:


Yay! Now thanks, and hope you enjoyed it! 😊

If we made any typos, wrong information, or bad explanations, feel free to correct us in the comments section! We will credit you.

Also, thanks to @xxpertHacker for giving some constructive criticism on how wrong we were on some parts.


Nice! Well done :)


@DynamicSquid Thanks! :)


... HTML is also one of the easiest "programming languages" to learn!

HTML stands for
HyperText Markup Language

Markup Language


The <!DOCTYPE html> is very important in HTML. It may look like a tag, but it's actually a statement informing the browser that this code is HTML, and it is also stating what version of HTML it is. This is so the web browser can handle it correctly.


...but it's actually a statement informing the browser that this code is HTML

Looks like someone needs to read up on MIMEs:

NOTE: All of this code is written in the <body> section. Do NOT write your code below the <script src="script.js"></script> or it will NOT work.

100%... wrong.

At this point, I want to stop, because the author has no clue what they're talking about :(

You touch upon b vs strong and i vs em, but you don't explain the differences between semantic markup at all.

The <strong> tag is used to make text bold.

No, the <b> tag is used for that, the <strong> coincidentally displays as such in a browser, but it is intended to emphasize a sentence or word.

Oh, I actually stuck around till the end, and I saw this:

If we made any typos, wrong information, or bad explanations, feel free to correct us in the comments section! We will credit you.

... I guess this falls under that?


@xxpertHacker lol i'll ping @necronova
wow we're so wrong lol, we'll edit it in a sec


@xxpertHacker also wdym by the this part?

The <!DOCTYPE html> is very important in HTML. It may look like a tag, but it's actually a statement informing the browser that this code is HTML, and it is also stating what version of HTML it is. This is so the web browser can handle it correctly.


...but it's actually a statement informing the browser that this code is HTML


@Kookiez I mentioned MIMEs afterward because that's what browsers use to read a document, not the <!DOCTYPE html> header element.

Here's the source that I'm using in an article to defend XHTML right now:

(XHTML ftw: https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode#XHTML, we don't even need it)


@xxpertHacker oh ok thanks! well then the source i got the information from was wrong >:(
i dont use w3schools anymore, their info is kinda outdated... i use Mozilla docs sometimes
also did you see the chat.md at kookieapp?


@Kookiez Not yet, just got on


@Kookiez w3schools is still pretty reliable. Idk where that <script src="script.js"></script> part came from but from my experience a lot of javascript is actually dependant on being placed BELOW elements in the body.


That's because a lot of people are taught that way and leave it at that.

MDN says the following:

Scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

That means, that any script that does use async, defer, or type="module" do not block the parser, which means it is perfectly fine to leave in the head.



@xxpertHacker It isn't a bad thing to have it. But on repl.it they deploy it for you since you select html as the language I don't think you need it on rep.it.


Very good job!



@Whacko yay thanks :)


Thank you so much for this tutorial! I'm a newbie in CS and this helped me a lot! :D


@roroxilee thanks! :D


this is well written and helpful. good job!


really nice!


@rxphasource thx! :D


Nice job! Sry i couldnt help


@JBYT27 ah its ok. but you can help on our next tutorial, which we'll start on next week


Nice! Another full language tutorial. i love how u added that "review" part at the end of each section. keep up the great work!


@EpicGamer007 Thanks! :D


Good Job!


@tsunami21 Thank you! :)


Thanks for letting me help with this project! I had a lot of fun with it


@necronova Yeah, should we make a game next?


@Kookiez I'd so be down. I was working on a socket io chat room but i'm at a wall right now


@necronova oof, i have 0 experience with socketio but good luck with that! there might be some people that know, maybe ask a question in ask?


wow thats good it deserves its own website


@Kookiez Wow awesome tutorial! This obviously deserves a website of its own, not a simple Replit post. This video Violated YouTube's Terms Of Service


The bonus tutorial help me, thanks!


This is actually way better than the number #1 HTML tutorial on replit

nice job


@ch1ck3n What is the top html tutorial here?


Not bad for second place in the HTML learn section. Could definitely use some more information but it's a good start. Btw if you do triple backticks then say html the color markup will be html.




You forgot an if statement..


Very nice Rick Roll, but it is very obvious it was fake as you couldn't give multiple people hacker plan with 1 link. I still clicked on it though, you know how it is...


@bennyrobert No, you actually can give multiple people real hacker plan with one link. I tried a link before, and it worked. Then I used an alt to test the free hacker plan, and it had the same result.


Oh that's pretty cool, @Kookiez, Ig I was just stupid for not knowing that and still falling for the rick roll anyways.


Where do you put the link code?


@CommanderGL What link code? If you mean a the demo, here it is: https://portlydarkmagentasite.kookiez.repl.co/


TypeError: Cannot read property 'value' of null
at getInput (/script.js:2:44)
at HTMLButtonElement.onclick (/:11:37)


@daksheshdorala can you send the repl link? thanks! :D


@daksheshdorala oh i know why! it looks like id may be case sensitive, so that's probably why. just change the CheckInput in the html to checkInput.


Cool, you should add the output, like for the headers, the css, or the images :)


@Bookie0 Thanks, we'll do that in the next tutorial!


sure! :) @Kookiez


you could always edit the post ya know lol @Kookiez


@Bookie0 lol yeah i know but im too lazy


@Bookie0 @necronova made pretty much all the images, and they're working on a chat rn, they don't have time for this...


Wow 🤩 nice