Lesson 2 – What is Doctype and Basic usage of tag

?What is DOCTYPE in HTML?

Every HTML page needs it’s own document type declaration. DOCTYPE tells that which syntax suits for this HTML page. So it is very much important to choose right doctype for your page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The above Doctype is being used more commonly. This tell that your HTML document is?HTML 4.01 Strict.?For HTML5 the doctype will be just?<!DOCTYPE>

<!DOCTYPE>

So it’s a very much important things to wok with HTML page. This Doctype must be inserted before starting <html> tag. See the example below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
          <title></title>
    </head>
<body>
</body>
</html>

Be aware that never use Doctype without know about it. So try to use the first Doctype code in your HTML page which is given in first in this page.

?Basic usage of <head>tag?

Sometimes somebody may tell that <head> tag is not important. But remember that <head> is very much important and undoubtedly serious stuff in HTML page. It tells the way of representation and it does all the basic work before showing the content of your HTML page. <head> tag represent?HTML document, including meta information, page title, links to other documents, and index information and many more.. Even it has a great value for better on-page Search Engine Optimization.

<head></head> must be placed before starting <body> tag.

See a basic usage of <head> tag and it’s explanation:

<head>
<title>My Home Page</title>
<link rel=home href="/tags/index.html">
<meta name=AUTHOR content="Ben Hall">
</head>

In the above code <title> represent the Title of your page. When you browse any website then you can see that website’s title in top corner of your browser.
In the above image you are see ‘Preview ICT – Next Generatio….’ in your chrome browser if you type http://www.previewict.com. This is the title. It is so much important to choose short & effective title because most of the search engine know the value of your page on title.

<meta> tag inside <head> tag represent few important things. In the above code bloc you are see <meta name=”Author” content=”benn Ali”> it tells that the author of this page is Benn. I hope you got the idea. Also to include stylesheet, javascript for your html page it is necessary to know about <head> tag.

To add stylesheet for your HTML page- (Add external .css file)

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

To add inline css in <head> tag

<head>
<style type="text/css">
hr {color:black;}
p {margin-left:5px;}
</style>
</head>

Also inside the <head> tag your all JavaScript and CSS will be placed for your HTML page. So undoubtedly it is so much essential. I will describe how to add Javascript & CSS inside <head> tag in Javascript & CSS lessons.

Shaharia is a professional software engineer with more than 10 years of experience in the relevant fields. Digital ad certified, cloud platform architect, Big data enthusiasts, tech early adopters.

Site Footer