HTML Document Structure

Summary -

In this topic, we described about the below sections -

Document Structure
- The <!DOCTYPE> Declaration
- The <HTML> Element
  - <head> Element
  - <body> Element

Basic structure of HTML document should have the below elements or tags.

<!DOCTYPE>
<html>
<head>
<title>
<body>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration supports the browser to display a web page properly. This tag is used to understand to understand the version of the HTML is being used.

Current version is HTML5 and the declaration specified below -

Syntax -

<!DOCTYPE html>

The doctype declaration is not case sensitive. The HTML version and corresponding declaration below.

HTML5:

<!DOCTYPE html>

HTML 4.01:

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

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> DOCTYPE Example.. </title>
	</head>
	<body>
		<!--  Below is the paragraph -->
		<p> Actual Paragraph. </p>
	</body>
</html>

The <HTML> Element

The HTML element can contain the coding for entire html document. The <html> tag is the representation of HTML element. The <html> is the identifier to the world that the document coded with <html> is HTML document.

<html> tag acts as a root of the document. <html> tag contains all other tags in HTML document. <html> tag also supports the global attributes in HTML.

Rules:

HTML element should be only one for the entire HTML document and should not contain more than one.
Each HTML document should end with </html>

The HMTL divided into two parts.

Tag	Description
<head>	Used to define HTML headings
<body>	Contain the actual content area of a webpage structure

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Title of the HTML document</title>
	</head>
	<body>
		The body content of the document..
	</body>
</html>

<head> Element:

<head> tag is a container for all Head element. <head> tag is of metadata type. <head> tag contains the required tags or elements that are used to link to the document except HTML images.

<head> tag will be used only once. <head> tag is mandatory in HTML 4.01. <head> tag is optional from HTML5. It should start immediately after the <html> tag and closed before <body> tag open.

<head> tag will act as a second level root after <html> tag. The elements can be coded within the <head> tag are

Tag	Description
<title>	Defines the title of the document
<base>	Specifies the base location from where the links to made
<meta>	Represents HTML document metadata
<style>	Used to define styles for the HTML document
<link>	Used to define link between external resource from HTML document
<script>	Inserting scripts in the HTML document
<noscript>	Used if scripting is unsupported or disabled

Click on the above respective element or tag to get more detailed information.

HTML 4.01 document format -

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title of the HTML document</title>
    </head>
    <body>
        <!-- Content of the HTML document -->
    </body>
</html>

HTML5 document format -

<!DOCTYPE html>
<html>
	<title>Title of the document</title>
	<body>
        <!-- Content of the HTML document -->
	</body>
</html>

Tag	Description
<table>	Defines the table
<div>	Defines the block-level elements.
<span>	Defines the generic container for inline elements and content.

<body> Element -

The Body sections contain the actual content area of a webpage structure. The <body> tag is used to declare the main content section of the HTML document. The <body> tag is placed after the document's <head> tag closed.

The document's content inserted between the opening and closing tags <body></body>, will be treated as HTML document body. Normally one <body> element per one HTML document.

It should start immediately after the closing head tag and end directly before the closing html tag. All layout attributes from HTML 4.01 are removed in HTML5.

Syntax:

<body>.. text/tags here.. </body>

Optional Attributes -

Attribute	Description	Values
Alink	Specifies the color of the active link for the HTML document	Color
Background	Specifies the background image for the HTML document	URL
Bgcolor	Specifies the background color for the HTML document	Color
Link	Specifies the unvisited links color for the HTML document	Color
Text	Specifies the text color for the HTML document	Color
Vlink	Specifies the visited links color for the HTML document	Color

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> Body element example.. </title>
	</head>
	<body>
		<!--  document body here -->
		<p> document body display </p>
	</body>
</html>