Atul Singh's blog
About HTML and It's Important Tag !

About HTML and It's Important Tag !

Atul Singh's photo
Atul Singh
·

3 min read

Table of contents

HTML ?

Full form of html is Hyper Text Markup Language. HTML is also known as a some another name from Root tag. HTML is provide structure of any website. This is backbone of website. HTML tag have lang attribute whose tells about we use English language in this html doc file. Inside html tag have two main important tag one is head tag (<head></head>) and second one is body tag (<body></body>) . <body> (this is known as opening body tag) and </body> (this is known as closing body tag). 

<!DOCTYPE html>
<html lang="en">

</html>

head tag

This head tag is most important tag because every information inside got this tag about html doc file. writing inside head tag any information not show in web content, it's data can use for only browser(google) , search engine(keywords) and SCO ranking. These data contain meta tag inside head tag. Meta tag have some attribute as like charset, name, content, http-equiv . In addition to the meta tag, there is also a link tag and a title tag.

Meta tag

Meta tag is a void tag. Void tag means those have not closing tag, means self closing tag. Meta tag have some attribute :- <meta charset= "UTF-8"/>, <meta name= "keyword" content = "html, css, js"/>, <meta name= "viewport" content = "width = device-width, initial-scale = 1.0"/>, <meta http-equiv = "refresh" content= "5"/>.

  • This UTF-8 value comes in html5 . utf-8 means all over character is available in this charset using utf-8.

We use link tag for adding external file(css file, font etc.) in html using href attribute.

<link href="main.css" rel="stylesheet" />

There are a number of other common types you'll come across. For example, a link to the site's favicon:

<link rel="icon" href="favicon.ico" />

There are number of other rel value, we use these value for other plateform like mobile.

<link 
rel = "apple-touch-icon-precomposed" 
sizes ="114x114"
href="apple-icon-114.png"
type="image/png"
/>
  • The sizes attribute use for icon.

We can use link tag for external media query file.

<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

Title tag

Title tag provide our website title name or tab name.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
</body>
</html>

Body Tag

Body tag is most important tag of html tag. In body tag we write here web content whose shoe in web page. Web content means evry thing yuo see in any website like heading, paragraph, image, video, audio etc. For showing content in web page we use tag for every one.

  • h1 - h6
  • p tag <p></p>
  • img tag <img/>
  • video tag <video></video>
  • audio tag <audio></audio> etc.
  • table tag
  • div tag
  • header tag
  • footer tag
  • main tag
  • section tag
  • aside tag
  • nav tag
  • ul tag
  • ol tag Screenshot-html-tag.jpg

Attribute

Every html element tag have attribute. These attributes are add some more functionality in html element tag. Ex:- src, title, width, url, sizes, srcset, height, style, colspan, rowspan, border etc.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>This is a heading<h1/>
  <p>This is a paragraph<p/>
  <img  src= "./image/cow.png"/>
</body>
</html>

If you want to learn HTML in more depth then you go with mdn docs.

iwritecodeineuron