Basis Of Html
Tags: programming, html
Published: 2021-09-08 06:03:04

#Introduction
-So today we are going to learn about some of basis of html.Let's start with what is HTML.
-If we search google for full form of HTML it will say Hyper Text Markup Language.So we can say it is an Markup Language.But what is an Markup Language 🤔.
-Markup language are used to define the structure of a document.So basically there are some rules or so called tags which helps in defining the structure or how we represent the text in the document.

#Anatomy of Html Document
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v54hg0ienw9v8nmmafbd.png)
Here we have the following-
* `<!DOCTYPE html>`-This basically tells the type of document.
* `<html></html>`-This is the root element of html.It wraps all the content inside it.
* `<head></head>`-This is head of the Html it comprises of data which you want browser to look and normally it is not visible to users.
* `<meta />`-It consists of meta data about your page we can use it to describe the type of content our page serves.
* `<title></title>`-It represents the title or so called name of document.
* `<body></body>`-It is the main body element.Inside it you can define data which you want to show to users be it text,images,audio or sound.

#Heading-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt6htn5nxgoq571z06zp.png)
These are the 6 different types of heading tags which we can use to create a heading.These heading tags are arranged in descending order of their font Sizes.h1 having largest font size and h6 having lowest font size.
#Images-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xpe4nlbf5oc0fwlkknd.png)
So if we want to insert images we can use this img tag.It comes with 2 properties src which is called source where we have to gice link of where the image is located and an alt tag where we can specify the text if a image is not loaded.
It also has some additional attributes but for basis this is enough.
#links-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dq92p3xilkq0z6f8bql.png) 
For creating links we have anchor tag.Here we have href attribute which is used to insert the link we want to go when we click on it.
#lists-
So basically there are two types of lists in html.
1.Ordered List `<ol></ol`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps42hj8cxp59wpf1kx08.png)
2.Unordered List `<ul></ul>` 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13h2ohi8u81dyyvzrx15.png)
#Paragraphs-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdq3f0k15y2w4j5vnu35.png)
So there are 2 tags which we can use to represent a paragraph.
1.`<p>` tag-It creates a general paragraph.
2.`<pre>` tag-It creates a paragraph like how you have written text inside this paragraph.So if we want fixed paragraph like how we have inserted the text inside it this tag is the way to do it.
#Containers-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r20hi9t9foj4ub8ga49o.png)
So there are basically these 4 main types of containers which we can use obivously there are more but we are gong to talk about these basic and important 4 only.
1.`<div>`-It is a common wrapper whenever we simply want a block to wrap elements inside.
2.`<main>`-It is used to wrap main and important things inside the page.
3.`<section>`-It is used to create a section inside the body and wraps all the section elemets inside it.
4.`<article>`-It is used to create an article.It is mainly used in blog posts,form posts to create an article.

#Conclusion-
Html itself is a powerful markup Language.It describes the documents contents with a set of rules called as tags.These are some of the few basic tags everyone should know while working with html.When css and js is embedded in html then it gives the true beauty to the web page.Always remember Html is like a builder which builds a house,css is like painter which gives beautiful color to house and js is like Electrican which gives electric functionality to house and many other components.

### P.S-This is my very First blog i tried to explain basic things as easy as possible.Any suggestions will be welcomed.