Hi, what's up how is going in this Manoarya explanation article we are going to discover some basic html which you use almost every html website.
We discover following topics in this post.
<!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>
<!-- Write your code hare -->
</body>
</html>
<!DOCTYPE html> is the first line of any html document.
DOCTYPE gives ideas to web browsers that which type of document used to create this document.
<!DOCTYPE html> means the whole document we write is type of html.
By the way <!DOCTYPE html> is the latest version of html which is called Html 5.
previous version of html look like following code. that type we don't use <!DOCTYPE html>.
See version 4.01 called HTML 4.01 👇
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
See version 1.1 called XHTML 👇
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html> is not case sensitive so we can write with any case like <!doctype html> <!DoCtYpe Html> it is not affect on the final result. but I suggest you to write like this*<!DOCTYPE html>* because it's look nicer .
All the information related to document includes inside of head tag.
All the following tags put inside of head tag.
*
*
Almost we are ignore this line of code in early coding stage.
but now we need to know what is the work of this line of code in html document.
So in this code line we have first attribute http-equiv.
Which response https information or values according to what gives inside of content attribute.
Http-equiv attribute values
1. Content-security-policy
Works : Show All the content policies of document.
Uses :
2. Content type
Work : Content type attribute value show which types of character encoding for the document.
Uses :
3. Default Style
Works : Used when you want to use preferred stylesheet.
Uses:
Focus : The value of content attribute is match with stylesheet title.
4. Refresh
Work: auto refresh documents with given time interval. you can give interval time as a content attribute value.
Uses :
Focus : Refresh value used carefully because it affects guidelines of
The value of name attribute which is viewport is show how documents look.
It is responsible for responsive design that's the reason why we called it responsive meta tags. it's important Mata tag of any html document.
Code snippet
If you don't want to zoom document then used this Code snippet
Or, if you want to user zoom the page then use it
<!--comment--> this line of code know as a Comment
Comment helps developers to read and understand what code say.
So you want to write bug free and beautiful code then you must use comment in your code.
< Link Tage basically attached your external css files for applying beautiful styles on the current document.
Link Tage have following attributes
rel : which value is stylesheet.
href : which value is your css file name.
For example I have a css file name as manoarya.css and I want to use this to my Manoarya.html document.
Then my link Tage look like this
Now my css file code applied on this document.
The title Tage is very important of any html document because it is highly important for SEO prescriptive.
The title Tag is helps browsers as well as users to understand what types of information provides by this page.
Title show on the top of the browsers window as well as on Google search result. see 👇
The Meta description is the very important Tag for defining what information contained to this document.
It is a short information of whole document.
Description also helps to ranks on google.
Body Tage is most important part of the html document.
Without Body tag nothing show on the browser.
Whatever things you see on the browser Coded inside of body tag.
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--your css file links-->
<link rel="stylesheet" href="your file name.css" />
<!--title of your website-->
<title>Add your title</title>
<!--description of your website-->
<meta name="description" content="Add your description.">
</head>
<body>
<!--your javascript file attached-->
<script src="your javascript file name.js" type="text/javascript" charset="utf-8"></script>
</body>
That's all for this article. I hope you like and enjoy this post.
Please share you suggestions and give some advice.
Thank you show much.
Top comments (0)