Learn to Code via Tutorials on Repl.it!

← Back to all posts
HTML crash course (20 minutes)
Nathanielx3rd

Hi! I am Nathaniel, i'm a fullstack developer with 3.5 years of experience in HTML and i'm here to give you an HTML crash course. Please leave a comment if this was helpful. Feel free to correct if you have something to add or I left out something.

Introduction

HTML is the foundation of all websites and some apps. HTML stands for Hypertext Markdown Language. It was written by Tim Berners-Lee in 1993 and it has evolved in many ways. The current one is HTML5.

HTML Basics

An html file can be named with the following formats : index.html or you can have index.htm. Before you start coding html you ALWAYS ALWAYS have to have this line of code on the top of your document <!DOCTYPE html>. This declares the file to be HTML. You can declare the HTML language, charset or encoding here but it isn't required.

HTML Tags

In a simplified way HTML has so called "tags". HTML is basically all tags. 90% of HTML tags have to be closed. There are a few exceptions to this however but you need not worry. There are 3 main tags to an HTML document. First you have the <html>. This basically contains everything inside the HTML document. Next you have the <head>, this contains the title and the meta data (discussed later) and your stylesheets (discussed later). The main one is called <body>, this is everything that is shown on the web page.

HTML Text Tags

There are a plethora of tags that can contain text, I will go over the main ones here. Note : All of them are closed at the end.

First we have the headers

<h1> is the largest header and the rest get smaller as you go down the list. Each of these can be scaled up or down with a stylesheet (later discussed).

Then we have the default tags with normal sized text.
<p> The "p" tag stands for paragraph and the default size is around 13.3 pixels but like the rest can be scaled up or down.

Next we have the <span>. This can hold normal text but is more often then not used to select a specific word or words in a group of more text. The default size can vary from browsers but a <span> is about 22 pixels.

The <a> tag. This stands for anchor and is used to anchor a link or an id (discussed later). It is basically a hyperlink, looks like a word but when you click on it, its a link. When you anchor something the text becomes Blue and has an line under it, this can be removed with a stylesheet. To add the link you want to anchor you need add the href element to the anchor. HREF stands for HTML Reference. It ALWAYS has to be in the following format :
<a href="https://yourlinkhere">Your Text Here</a>
This is super useful and can be changed.

These are all the basic text tags and their uses.

HTML Text Style Tags

There are 8 basics style tags in HTML. These are not used since they can be easier achieved and customized with stylesheets.

Bold text
Important text
Italic text
Emphasized text
Marked text
Smaller text
Deleted text
Inserted text

They all stand for the list above in the same order.

HTML Identifiers

Sometimes you will have multiple of the same HTML tags and if you want to select a specific one, it might be tough. That's why there are ways to identify a HTML tag. Let's say you have 2 <h1> tags and you want a way to differentiate between them you will have to add class or and id. These classes or ids go inside the first opening tag NOT the closing tag in the following format:

You can re-use the classes in different tags, but you shouldn't use unicode characters or special characters like : [email protected]#$%^&*`.
You may use the hyphen - or underscore _

The second identifier is the id tag. It isn't a tag by itself but rather it is to be nested inside a tag by the following format :

The main difference between a class and a id is that a class can be re-used by an id is unique to the element it is in. it is always in the opening tag and NOT the closing one.

HTML Section Tags

The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements, which can then changed with your stylesheet. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag or can be used to make space between elements or contain an elements. You can even cover the <div> with an image.

The HTML <section> tag is used to define sections in a document. When you put your content on a web page, it may contain large amounts of text to style to and like the <div> can be attribute with an class or id and can be styled.

THE END

This is the end of part 1
PART 2 is coming soon and I decided to separate them.

PLEASE leave a comment or a reaction. You can check out my site here. Hope you learned something from here.
Keep on coding 🙃

Voters
CodingElf66
mpatel42x
zApson60fpson
dudeactualdev
Jasonkoger5
figglediggle
ms143168
Siti-AzizahAziz
MuhammadSaefudi
SARAELMESTEKAWY
Comments
hotnewtop
iamsia

UPVOTE NOW IF YOU WANT TO BE AS GOOD AS NATHANIEL

Nathanielx3rd

@iamsia Here we got the biggest fanboy

sn236

Hi @Nathanielx3rd Just one thing I wanted to correct we can start a html document by using the <html> tag. Otherwise really good.

Nathanielx3rd

Hey @sn236 ! Well you need the <!DOCTYPE html> to tell the webpage to read it as html, however when using an ide such as repl.it or glitch you don't have to add it since you already said that the project or repl is gonna be html/css/js. But in a real case scenario like just dragging the file from your computer and dropping into your server and manually deploying it to your domain you will need the tag. Otherwise thanks for the feedback and upvote 👍.

sn236
sn236

@Nathanielx3rd I was online at that time so I replied

sn236

@Nathanielx3rd Sure, do you have any Ideas

sn236

@Nathanielx3rd I am currently learning css as I have explored html for a year

sn236
sn236
sn236

@Nathanielx3rd I saw that but whenever I click on that it takes me to the login page could you again invite me

sn236

@Nathanielx3rd oh, but I am not in there

sn236
iamsia

RANDOM FACT: DID YOU KNOW THAT THE NEW CAR SMELL IS ACTUALLY DOZENS OF CHEMICALS MIXED TOGETHER TO KEEP THE CAR "NEW"

Nathanielx3rd

@iamsia I like that smell

zApson60fpson

This was very helpful I'm a very new coder I got inspired by my dad for this and I very happy for this lesson

Nathanielx3rd

@zApson60fpson Your dad hmm, is he a developer or something? Your welcome for this tutorial :D

If you need help with anything just add me to your project and I will help you out.

Currently working on Part 2 of this tutorial so stay tuned.

zApson60fpson

@Nathanielx3rd Thank you and I will stay tuned

zApson60fpson

@Nathanielx3rd Oh and yes he was on the news he knows a lot of languages

Nathanielx3rd

@zApson60fpson damn is he like bill gates or something cool I only know 3

CodingElf66

Can you make a whole tutorial about HTML? That's better.

Nathanielx3rd

@CodingElf66 It is about HTML I haven't exactly done any other language in this tutorial.......

iamsia

LADEIS AND GENTS I INTRODUCE TO YOU THE BEST 15YEAR OLD CODER YOU WILL EVER MEET IN YOUR LIFE

CodingElf66

@iamsia bruh please don't spam

iamsia

YOU WILL ENTER THAT TEAM YOU WANT TO BE INNNNNNNNNNNNNNNNNNNNN

iamsia

GO NATHANIELLLLLLLLLLLLLLLLLLLLLLLLLLL