HTML PAGE STRUCTURE AND NESTING

7 years ago

HTML

The following diagram gives us a basic idea of HTML page structure:

Basic HTML Structure

As we see the page has five important parts:

DOCTYPE
HTML
HEAD
BODY
TITLE

DOCTYPE:

Putting it in simple words, it means a declaration of “the document type”.

There are various versions of HTML like other software and also different instructions on how it should be displayed in the browsers. To view the web page correctly information about the version of the HTML appears in the <DOCTYPE> tag.

It must appear only once, at the top of the page before any HTML tags.

For the sake of safety, we generally use a “loose” interpretation which will allow browsers to read older HTML tags. For example:

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

For HTML5 the declaration goes as:

<! DOCTYPE Html>

HTML:

To display a webpage we first need to signal to the browser that this is a web page.

Why? Because browsers can display other types of files: Adobe Acrobat files, text files, images, Flash files.

To signal to the browser that this is a website page, we need two tags — an opening and a closing <html> tag:

<html>

</html>

Everything that is visible in the browser goes between these two tags.

Notice that you don’t see these tags in your browser (unless you view the source code). This is because browsers are programmed to read the code to determine how to display the page, not to display HTML tags.

HEAD:

It includes only the information about the current document (metadata) and not the document’s contents (data). It contains title of the document, keywords and other descriptions that may be useful to search engines, style and other data that is not to be shown to the users (except for title which is shown in the title bar of browser)

The following elements can go inside the <head> element:

<title> (this element is required in an HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>

It is placed between the <html> and < body> tags.

In HTML 4.01 the <head> element is required.

In HTML5, the <head> element can be omitted.

BODY:

Everything that the users see on their screen is generated from the code between the opening and the closing tags of this element. So it is the “body” of the HTML document.

It contains text, hyperlinks, images, tables, lists, etc.,

The body tag has many attributes which help us to control how some elements of the page are displayed. We can classify these attributes in three types

Layout attributes: such as background color or image, text color and link colors
Global attributes: attributes common to all HTML elements such as style, lang, class, id, etc
Events attribute: such as mouse events, keyboard events, Windows events or form events, media events, etc.

Note that all the Layout attributes have been removed from HTML5. Use CSS instead.

NESTING:

An HTML element is the one which has an opening and a closing tag. For example the two tags

Opening tag <head>

Closing tag </head>

make the head element.

When different HTML elements are assigned to the same block, it is called as nesting.

In HTML we use nesting it many times.

<! DOCTYPE html>
<html>

	<head>
		<title> Page title </title>
	</head>

	<body>
		<h1> My First Heading </h1>
		<p> My first paragraph.</p>
	</body>

</html>

In the above example the elements