HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Document Structure

Till Now you have learned some basic HTML tags, therefore, now it is important for you to understand the basic structure of an HTML document.

An HTML document has two main parts:

  • head
  • body

The head element contains information about the current document, such as its title, keywords, description that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content. They may, however, make information in the HEAD available to users through other mechanisms.

The body of a document contains the document's content. This element contains the visible page content. You can think of the body as a canvas where the content appears: text, images, colors, graphics, etc.

And both parts are enclosed in <html> tag (also known as root tag).

But firstly every HTML document must start by declaring that it is an HTML document using <!DOCTYPE html> tag.

Example Explained

Tags Description
<!DOCTYPE html> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document.
<head> This tag represents the document's header which can keep other HTML tags like <title>, <meta>, <link> etc.
<body> This tag represents the document's body which keeps other HTML tags like <h1>, <p>, <img> etc. This element contains the visible page content.

All HTML5 documents must start with a <!DOCTYPE html>