HTML crash course (20 minutes)
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.
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.
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.
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.
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></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
<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.
<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.
There are 8 basics style tags in HTML. These are not used since they can be easier achieved and customized with stylesheets.
<b></b> <strong></strong> <i></i> <em></em> <mark></mark> <small></small> <del></del> <ins></ins>
They all stand for the list above in the same order.
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:
<h1 class="first-tag">My Text</h1> <h1 class="second-tag">My Text</h1>
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 :
<h1 id="first">Your Text</h1>
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.
<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.
<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.
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 🙃
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 👍.
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