HTML Elements : Head

The HTML document would start with <html> tag and end with </html> closing tag, apart from that it has two main elements :

  • Head
  • Body

Head : 

The <head> tag in html is a container tag which contains metadata. The html metadata is nothing but the data about the html document. The metadata typically defines the document title, character set, styles, links, scripts and other meta information. The <head> tag is placed between the <html> and <body> tag. The information inside <head> tag is not displayed in body part of web browser.

The HTML head elements :

<title> : The <title> tag represent the title of an html document, which displays in a browser's title bar. For example :

<!DOCTYPE html>
<html>
	<head>
	 	<title>Ttle of WebSite</title>
   <head>
   <body>
	 <p>Hello world!!</p>
   </body>
</html>


Also note that only one <title> tag is allowed per document.

Meta <meta> : The <meta> element is used to specify character-set, page description, keywords, author and other metadata. The provided metadata are used by browsers, search engines and other web services. For example :

To define charset :
<meta charset="UTF-8">
To define description :
<meta name="description" content="Computer Science and Information Technology tutorials">
To define keywords for search engines :
<meta name="keywords" content="DBMS tutorials, Computer Architecture tutorials, Web Technology">
To define author of the page :
<meta name="author" content="John wick">
To refresh document at every 30 seconds use the below meta tag :
<meta http-equiv="refresh" content="30">
Here's the example of <meta> tag :
<!DOCTYPE html>
<html>
	<head>
	 	<meta charset="UTF-8">
	 	<meta name="description" content="Computer Science and Information Technology tutorials">
	 	<meta name="keywords" content="DBMS tutorials, Computer Architecture tutorials, Web Technology">
	 	<meta http-equiv="refresh" content="30">
   <head>	
   <body>
	 <p>Hello world!!</p>
   </body>
</html>

Style : The <style> element is used to define style information for a single HTML page. The <style> tag contains CSS properties for an HTML document. Usually <style> tag appear in the <head> element of the document. However it'll also acceptable to used in the <body> element of the document. For example :
<!DOCTYPE html>
<html>
	<head>
	 	<style>
	 		body {background-color: yellow;}
	 		p {color: green;}
	 	</style>
   <head>	
   <body>
	 <p>Hello world!!</p>
   </body>
</html>

Link <link> : The <link> element is used to load an external CSS stylesheet into HTML document. For example :
<!DOCTYPE html>
<html>
	<head>
		<title>Test Page</title>
		<link rel="stylesheet" href="mystyle.css">
   <head>	
   <body>
	 <p>Hello world!!</p>
   </body>
</html>

Script <script> : The <script> element is used to define client-side javascript that is specifies within document or embedded external javascript file through the SRC attribute. Example :
<!DOCTYPE html>
<html>
	<head>
	 <script>
	 	function MyFunc() {
			document.getElementById("demo").innerHTML = "Hello world!! with JavaScript!";
		}
  </script>
   <head>	
   <body>
	 <p id="demo">Hello world!!</p>
	 <button type="button" onclick="MyFunc()">Change Text</button>
   </body>
</html>

Base <base> : The <base> element specifies the base URL and base target for all relative URLs in a page. With <base> tag we do not need to write a full URL in every times, instead once define the base url on <head> element and after that we just need to write relative directory/path URL in a web document. For example :
<!DOCTYPE html>
<html>
	<head>
	 <base href="http://www.mycsnotes.com/webtech/" target="_blank"/>
   <head>	
   <body>
	 <p>Hello world!!</p>
   </body>
</html>



Next Topic :

No comments:

Post a Comment