HTML - SPLessons

HTML Document

Chapter 4

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Document

HTML Document

shape Introduction

This chapter demonstrates about the HTML Documents which consist of some absolute minimum elements. Following are the concepts covered.

  • Structure
  • Head and Title
  • Body

Structure

shape Description

Every HTML document must and should contain two elements, they are <!Doctype> and <html>.
<!Doctype> is used to encode the document with in html specifications to the browser. <html> is used to inform the browser to consider from html starting tag to ending tag i,e <html>….</html>. The code below demonstrate the structure of the document.

<!DOCTYPE HTML>                        
<html>  

	<p>All other elements, styles, scripts must be enclosed within these two tags.</p>

</html>                            

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Head and Title

shape Description

The <head> and <Title> tags must be place in between the starting and ending tags of HTML tags. The <head> tag contains meta data, and the <Title> tag is the most required element in the html document. Title should be unique and appears on top of the document. <title> element is used by the search engine to get the idea about the web page and to place in a web page search results and title page can contain links or images. The code below demonstrate the head and title tags of the HTML document.

<!DOCTYPE HTML>                        
<html> 
  <head>

	<title>The Title of the page.</title>

  </head>
  <p>Displays Title of the page</p> 
</html>                             

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Body

shape Description

Body element is used to display the content of the web page in the main window of the browser. Html document contains only one body element, it should be followed by <head> element. All other content of the document like headings, paragraphs, tables, forms, multimedia, links should be placed in between body tags. The code below demonstrates the body element.

<!DOCTYPE HTML>                        
<html>  
	<head>
   		<title>Title of the Webpage.</title>
	</head>
	<body>
 		<p>/* All contents to be displayed in the main window of the web browser
   		 must be enclosed within the body tags.*/</p> 
	</body>
</html>                                     

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

shape Examples

The below code demonstrate the basic elements of a web page which contain <!DOCTYPE>, <head>, <title>, <body> elements.

<!DOCTYPE>                        
<html>  
	<head>
		<title>The Title of the Webpage.</title>                            
	</head>
	<body>
 		<!-- the text to be displayed must be written within body element---->

	 	<p> Basic HTML document </p>
 
 	</body>
</html> 

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape Key Points

  • Title tag should be unique on the web page.
  • Body element should be in between the head tag.
  • Meta data should not appear on the web page.