HTML Document Structure

Today, we’ll look into the HTML document structure and try to get familiar with different parts of an HTML page.

In our last session, we discussed about the term HTML, the look and contents of a html file, required applications to edit html, and finally created a simple html page. That was really simple, wasn’t it?

Read: Getting Started – HTML Tutorials

Considering HTML version 4 and later, an HTML document has three main parts:

Document type declaration (DTD) at the toptions
HTML element containing following elements
1. Head
2. Body

Refer to the example above. Did you notice the red text and the black text. The text in black are the content and the red text are the tags (what are they?) which constitutes elements.

Document Type Declaration (1)

The first line in the example above isn’t an element, but it is a document type declaration (also called DOCTYPE declaration). It tells the version information of an HTML document. It lets modern browsers know they should interpret the document as written according to the HTML specification. A valid HTML document declares what version of HTML is used in the document.

Refer: Information about DOCTYPE

HTML Element (2)

The entire document is contained within an html element. The html element is called the root element because it contains all the elements in the document, and it may not be contained within any other element. It is used for both HTML and XHTML documents.

Within the html element, the document is divided into a head and a body.

Head Element (3)

The head element contains descriptive information about the document itself. The contents mentioned here is not to display in browser but to pass some information to the browsers such as its title, the style sheet(s) it uses, scripts, and other types of “meta” information.

The Meta Element (4)

The meta elements inside the head element provide information about the meta data. A meta element can be used to provide different sort of information. In above example it specifies the character encoding used in the document.

Note: meta data means the information about a document rather than document content

The Title Element (5)

The head also contains the mandatory title element. According to the HTML specification, every document must contain a descriptive title. The title you specify in this element is displayed in the title bar (or tab) of browsers.

The Body Element (7)

Finally, the body element contains everything that we want to show up in the browser window. This is the part of HTML document that is displayed in browser.

Points to Remember

A Tag in HTML is a label for enclosed content that tells browser how the content should be presented in browser.
Any HTML document has three parts – Type definition, Head & Body
HTML 5 is defined simply with <!DOCTYPE html> while HTML 4 has 3 different types of type definitions – Strict, Transitional & Frameset.
<html> is the root element which can’t go inside any other element.
<head> and <body> elements are nested inside <html> element.
<head> part of HTML document contain information for the browser so that it can render the web page correctly.
<body> part of HTML document contains all the contents that should be displayed in browser window.
An HTML element is the combined form of opening tag, content and a closing tag.
Doctype declaration tells browser about the standard it follows.
<head> element can contain document title, style sheets, scripts and meta data.
Meta data is the information about a document rather than document content.

HTML MCQ Questions

Click the link below to visit MCQ Questions page from this chapter:

HTML Elements MCQ Questions for 2016 CO Exam

Your Questions & Confusions

Visit following link
/website-designing/
Log in using your Facebook, Google, Yahoo accounts. (Use the Log in buttons on right sidebar. If you are viewing this page in mobile device, you’ll find the login buttons below)
Post your questions or confusions. You are equally welcomed to answer other member’s questions there.

Comments, Suggestions & Feedback

We’ve a comment form below this post. You’re most welcome to write your comments, suggestions or feedback. They are highly appreciated.

HTML Document Structure – Post #2 – HTML Tutorials